Usando Google Maps API versión 3

lipman/ 11th June 201110th December 2013/ Programación Web (es)

Índice:
1.-Breve Introducción
2.-Inicializando un mapa
3.-Estableciendo puntos
4.-Eventos
5.-Eventos (pasando valores)
6.-Polígonos
7.-Líneas

1.-Breve Introducción

Mucha de la documentación que se encuentra en Internet con respecto a la API de Google Maps es sobre las versiones viejas, por lo que he decidido intentar hacer un conjunto de posts exclusivamente para la última versión.

Para empezar, oficialmente las versiones 1 y 2 se consideran obsoletas, por lo que viene bien aprender un poco acerca de la última versión. Por otro lado, una de las implementaciones nuevas de esta versión, es la adición de Google Street View.

Con las versiones viejas, primero de todo habia que obtener la clave API dependiendo del sitio web en donde quisieramos usar el código. Pero con esta nueva versión no es necesario, es todo mucho más sencillo.

2.-Inicializando un mapa

Lo primero de todo vamos a tratar de entender cómo funciona el “hola mundo de la api de GMaps”:

(1): Como podemos ver, la URL que cargamos es la siguiente: http://maps.google.com/maps/api/js?sensor=false. Aquí simplemente quería explicar qué significa el parámetro sensor, que puede tomar valores de true y false. Este sensor se pone en true cuando el dispositivo sobre el cual se espera que se cargue esta página dispone de un localizador (como un GPS) encargado de determinar la localización del usuario. Como estamos haciendo pruebas sobre un ordenador (que no dispone de GPS) lo tengo puesto en false.

(2): Aquí simplemente decir que creamos una variable llamada coordenadas en la que establecemos el punto céntrico en donde queremos que se centre nuestro mapa. Para obtener las coordenadas, simplemente nos movemos con el Google Maps a un punto, y le damos al botón de enlazar para obtener las coordenadas en los parámetros que se pasan en la URL, como en la siguiente imagen.

(3): Este valor es la cantidad de zoom que queremos aplicar a nuestro mapa. Normalmente va desde el valor 0 al 19. Este valor depende de la zona y del tipo de mapa empleado.

(4): Establecemos el centro, que es la variable coordenadas anteriormente definida.

(5): Aquí elegimos el tipo de mapa que queremos usar:

ROADMAP: mapa callejero con el nombre de las calles y demás.
SATELLITE: mapa satélite con ningún nombre puesto.
HYBRID: mapa híbrido, satélite con los nombres
TERRAIN: mapa físico con algunos nombres

(6): Creamos el mapa. Nos tenemos que dar cuenta de que usamos el identificador mapa para luego posteriormente usarlo.

Ahora nos vamos con la parte HTML del asunto:

Como podemos ver, creamos un div con el identificador anteriormente usado, y establecemos mediante CSS que ocupe toda la pantalla del navegador.

Ahora, juntamos todo el código fuente, y nos deberia quedar algo así:

3.-Estableciendo puntos

En este apartado aprenderemos como establecer puntos dentro de lo que es el mapa. Para este ejemplo, seguiremos usando el código anterior, por lo que, el siguiente código irá a continuación del código Javascript anterior (dentro de la función de iniciar)

  var coordenadas = new google.maps.LatLng(37.680000,-1.669407);
  //Establecemos las coordenadas del punto
  var marker = new google.maps.Marker({ //opciones
      position: coordenadas,
      //Decimos que la posición es la de la variable 'coordenadas'
      map: map,
      //Nombre del mapa
      title:"Hola Mundo!"
      //Titulo (visible cuando colocamos el ratón sobre el punto)
  });

¿Sencillo verdad? Y el resultado es el siguiente:

4.-Eventos

Los eventos son acciones que se toman tras la realización de otra. Con el siguiente ejemplo lo veremos muy claro. Trataremos dos eventos: el cambio de zoom, y el “click” en una marca.

var map;
function iniciar() {
  var coordenadas= new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: coordenadas,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("mapa"), myOptions);
  //Hasta aquí es igual que antes

  google.maps.event.addListener(map, 'zoom_changed', function() {
    setTimeout(moveToDarwin, 3000);
  });
  //(1) Primer evento
  
  var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map,
      title:"Hello World!"
  }); //Esto ya lo vimos antes, creamos una marca o punto
  
  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
  });
  //(2) Segundo evento
  
}
  
function moveToDarwin() {
  var darwin = new google.maps.LatLng(-12.461334, 130.841904);
  map.setCenter(darwin);
}
//Función que se encarga de centrar el mapa en esas coordenadas

Antes de entrar en cada evento particular, podemos destacar las características comunes. Un evento tiene 3 parámetros: el primero hace referencia al objeto que estamos tratando (un mapa o una marca en estos ejemplos). El segundo hace referencia al nombre interno del evento que tiene que ocurrir (que cambie el zoom o que se clickee). El último parámetro simplemente es el accionamiento de una función.

(1): El primer evento se acciona cuando cambiamos el zoom (ya sea para acercar o disminuir), y cuando esto ocurre, al cabo de 3000 ms se acciona la función moveToDarwin que establece el centro en otro sitio.

(2): Este evento se acciona cuando se clickea en la marca, y una vez esto, se establece que el zoom deba de ser 8.

5.-Eventos (pasando valores)

A veces, a la hora de esperar a que se realice un evento, este evento realizado puede transmitir información que nos sea útil. En los ejemplos anteriores no nos valia de nada transmitir información. En uno de los eventos anteriores, simplemente al hacer click en un sitio, estableciamos de zoom 8, y en el otro, simplemente nos moviamos a unas coordenadas predeterminadas.

En el siguiente ejemplo vamos a hacer que cada vez que pinchemos en el mapa, establezcamos una marca. Para esto, a la hora de pinchar, tenemos que transmitir la información de cuando pinchamos (las coordenadas) a la función que se encargará de crear esa marca.

(1): Como podemos ver aquí, transmitimos las coordenadas. event.latLng hace referencia a las coordenadas que queremos transmitir y que posteriormente usaremos para crear la marca.

6.-Polígonos

Simplemente pondré un script de cómo se hacen polígonos. Es realmente fácil y muy intuitivo. El siguiente polígono da como resultado la traza del triángulo de las bermudas:

7.-Líneas

Funcionan casi igual que los polígonos.. solo que tienen algunas opciones distintas y el nombre de la función (como es obvio..) también cambia. Código de ejemplo:

function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var myOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

Para la gente que se quiera adentrar y profundizar en este mundillo, teneis una referencia justo aquí de los métodos, valores que devuelven, tipos y propiedades, publicado por Google. Viene una cantidad ingente de información de la cual es imposible resumir, pero al venir en completo castellano, será fácil encontrar cosas que queramos adaptar a nuestro uso por parte de la API de Google Maps.

Saludos, lipman

21 Replies to “Usando Google Maps API versión 3”

Pingback: Usando google maps API v3.0| Blog de dario
pako says:

22nd October 2011 at 9:49 pm

Muy buen aporte, justamente ocupaba la parte de lineas para unas ideas, gracias.

Reply
sinehard says:

23rd October 2011 at 7:43 pm

Hola, muy buena la entrada. Sin embargo no explicas cómo podríamos crear un mapa estilo googlemaps con la API pero con una imagen propia… al estilo de lo que han hecho en http://www.elfenomeno.com/GoogleMiddleEarth/
Yo quería hacer algo similar con un mapa propio, pero no encuentro en ninguna parte cómo hacerlo.

¿Puedes ayudarme o, al menos, orientarme?

Reply
Marcela says:

6th February 2012 at 4:39 am

Muy bueno el tutorial!!!

Reply
Gilberto Gil says:

24th February 2012 at 5:39 pm

me parecio muy buen aporte, solo tengo una duda que no he podido encontrar en ninguna parte…

que funcion puedo utilizar para borrar todas las marcas del mapa en la version del API v3 ya que la funcion del API V2 no funciona.

Reply
Javier Eduardo says:

7th March 2012 at 10:44 pm

No entiendo bien tienes que descargar la API alguna libreria o archivo o con solo escribir

//(1) Cargamos la API

ya tenemos acceso a todos los eventos.
Como usa esta API en flash

Reply
lipman says:

7th March 2012 at 11:35 pm

La API se carga con la línea que hay encima del comentario:

Reply
juan says:

25th March 2012 at 6:26 pm

como harias un click en un poligono y que te muestre una ventana emergente con datos

Reply
Manchego says:

29th May 2012 at 3:25 pm

Buenas tardes lipman,
Lo primero agradecerte tu esfuerzo, ya que no he encontrado ningun otro sitio donde se hable de como programar la nueva version 3 de la api de google maps y encontrar un sitio así es merecedor de todos los elogios.
Mi consulta es la siguiente:
Estoy programando mi página con flash CS4 y AS3 y no tengo muy claro como hacer para integrar esta nueva veersion. El código de programación que comentas donde habría que ponerlo? Bastaría con ponerlo en el primer frame en acciones y ya está o esto es para html?
Perdona si lo que digo es una barbaridad pero es q estoy un poco verde y no se como integrarlo en Flash.
Un saludo y una vez mas mostrarte mi agradecimiento por ser pionero en mostrar algo de luz sobre esta nueva version de la api de google maps.

Reply
lipman says:

29th May 2012 at 4:54 pm

Me alegro que te haya gustado la entrada pero siento decirte que sobre action script no tengo absolutamente nada de idea, aun así, voy a tratar de dejarte claro el funcionamiento para que puedas llevar a cabo en AS, que me imagino que se podrá:

Tu tienes un código javascript, que son las características del mapa. Esto lo pones dentro del head. Ahora, desde el resto del código, se ejecuta una llamada a la función “iniciar” (que es la que crea el mapa y todo eso) y se “imprime” ese mapa en el div que tiene de ID “mapa”.

Lo que quiero decir es, si tienes alguna manera de llamar a funciones de javascript en AS (me imagino que las habrá pero te repito que no tengo ni idea), simplemente llámalo (si te fijas, yo lo llamo en el método onload del body, justo al cargar la página) y ten un contenedor cuyo ID sea “mapa” (que en mi caso es el div).

En resumen, necesitas lo siguiente:
-Código javascript (en el head)
-Llamada al código, ya que es una función (lo tengo en el body)
-Contenedor para meter el mapa cuyo ID sea “mapa” (en mi caso el div).

Siento no poder ayudarte más, espero que te sirva y/o que al menos te haya dejado las cosas más claras.

Un saludo!

Reply
Juan Carlos says:

29th July 2012 at 5:09 am

@manchego …. hola, acabo de ver tu comentario y he buscado un poco mas, encontre este tutorial que parece bastante prometedor, http://www.technogumbo.com/2011/12/Migrating-to-Javascript-from-the-Google-Maps-API-for-Flash-Using-Adobe-AIR/ …. saludos!

Reply
y3ssi says:

28th August 2012 at 2:48 am

Hola, checando este tutorial el ejemplo de estableciendo puntos no puedo ejecutarlo alguien puede ayudarme plis…
mi codigo es el siguiente pero cuando lo corro no muestra nada 🙁

**********************************************

Ejemplo con Google Maps

//(1) Cargamos la API

function iniciar(){
var coordenadas = new google.maps.LatLng(37.680000,-1.669407); //Establecemos las coordenadas del punto

var marker = new google.maps.Marker({ //opciones
zoom:13, //(3) cantidad de zoom
//center:coordenadas, //(4) establecemos el centro
position: coordenadas,//Decimos que la posición es la de la variable ‘coordenadas’
map: map,//Nombre del mapa
title:”Hola Mundo!”//Titulo (visible cuando colocamos el ratón sobre el punto)
});
var mapita = new google.maps.Map(document.getElementById(“mapa”),marker); //(6) creamos el nuevo mapa
}

Reply
y3ssi says:

28th August 2012 at 2:49 am

Ejemplo con Google Maps

//(1) Cargamos la API

function iniciar(){
var coordenadas = new google.maps.LatLng(37.680000,-1.669407); //Establecemos las coordenadas del punto

var marker = new google.maps.Marker({ //opciones
zoom:13, //(3) cantidad de zoom
//center:coordenadas, //(4) establecemos el centro
position: coordenadas,//Decimos que la posición es la de la variable ‘coordenadas’
map: map,//Nombre del mapa
title:”Hola Mundo!”//Titulo (visible cuando colocamos el ratón sobre el punto)
});
var mapita = new google.maps.Map(document.getElementById(“mapa”),marker); //(6) creamos el nuevo mapa
}

Reply
jesús says:

10th September 2012 at 11:40 pm

gracias por la info me sirvio de mucho!

Reply
Oscar says:

14th November 2012 at 6:28 am

Hola .. tengo este codigo aparentemente bueno pero no me funciona … sin embargo si le quito la declaracion DOCTYPE si funciona perfecto, el inconveniente es que en navegadores modernos no se ejecutan bien bien los DIVs de la pagina si le retiro la linea donde se declara el DOCTYPE … ya lo he probado. .. que puedo hacer? ..

Reply
Oscar says:

14th November 2012 at 6:29 am

,,,, mmmm … no puedo pegar el codigo .. 🙁

Reply
jorge says:

18th February 2013 at 9:42 pm

Hola. Gracias por el tutorial, es realmente bueno. Te quería pedir si me puedes ayudar a hacer que funcione un código de geolocalización en un documento HTML5.
Tengo dos puntos georeferenciados en él y lo que quisiera es que google maps me trazara la mejor ruta andando, en coche o en bici según he sacado de un API de google Maps, pero que soy incapaz de hacerla funcionar.
Te pongo el código de la prueba y si puedes ayudarme estaría muy agradecido.
Un saludo.

prueba de unir dos puntos

#map_canvas {
height: 100%; height: 250px;
}

var directionDisplay; /*este creo que no vale*/
var directionsService = new google.maps.DirectionsService();
var map;
var casa = new google.maps.LatLng(40.650649, -3.998813 );
var punto = new google.maps.LatLng(40.645641, -3.991820);

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
center: casa,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById(‘map_canvas’), mapOptions);

casa = new google.maps.Marker({
position: casa,
map: map,
title: ‘CASA’
});

punto = new google.maps.Marker({
position: punto,
map: map,
title: ‘PUNTO’
});

directionsDisplay.setMap(map);
}

function calcRoute() {
var selectedMode = document.getElementById(‘mode’).value;
var request = {
origin: casa,
destination: punto,
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}

Forma de llegar:

En coche
Andando
En bicicleta
<!–Transit–>

Reply
jorge says:

18th February 2013 at 9:43 pm

Creo que no saldará bien el código, asi que si quieres te envío el documento por mail a la dirección que me digas.
Un saludo

Reply
jorge says:

20th February 2013 at 10:08 am

Ya lo conseguí hacer. Gracias de todas formas.
un saludo

Reply
daniel says:

28th February 2013 at 3:56 pm

como puedo utilizar la api google map, enviandoles los parametros de direccion y no las coordenadas, ya que tendria que saberlo el usuario para verlo en el mapa.
gracias

Reply
CARLOS says:

2nd May 2013 at 5:58 pm

Hola!!
alguien me puede ayudar como puedo hacer para que el zoom llegue hasta el final, zoom plano hasta donde se ven las calles y fachadas.

ya tengo mis ubicaciones en el mapa, ya selecciono un punto y me da la ventana de informacion, con datos y una imagen, sobre esa imagen quiero darle click, y que me lleve hasta el fondo de esa ubicacion las calles y facahada de punto que ya ubique.

si alguien me púede ayudar, se lo agradeseria infinitamente !

Reply