Primeros pasos con la API v3 de Google Maps (Mapa y Marcador) Ya tengo un rato manejando la API JavaScript de Google Maps pero ahora con su cambio a la v3 hay cosas que cambiaron y hay que adaptarse, entonces se me ocurrió compartirles lo que vaya aprendiendo desde cero, de cualquier manera pueden leer si así lo desean, toda la documentación oficial de la API de Google Maps.
Lo que voy a intentar hacer es ir al grano del tema del post, para no dar tantas vueltas y quitar toda la paja que viene en la documentación… “Directo y a la cabeza” dicen por ahí.
Para iniciar será necesario y preferente que tengan un poco de conocimiento principalmente de JavaScript y jQuery, asímismo de HTML y un poco de CSS, igual unas pequeñas nociones de HTML5 nos servirán en publicaciones posteriores.
Para empezar hay que declarar nuestra aplicación como HTML5, sencillamente escribiendo el DOCTYPE así:
<!DOCTYPE html>
También para estos ejemplos es necesario incluir los scripts de jQuery, para este dirígete a su sitio oficial, descárgalo y agrega el script, y claro el más importante de estos ejemplos, el script de Google Maps, que para la v3 no es necesario generar una key como en la versión 2 se hacía, ahora solamente agregas el siguiente script:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
Si puedes observar, al final del script dice sensor=set_to_true_or_false es para indicar si queremos que el sensor identifique la posición del usuario, debes indicar true o false según lo requiera tu aplicación.
NOTA: hay una pequeña discusión sobre la localización de los scripts, puedes ponerlos ya sea dentro del head o del body, pero muchos recomiendan que vayan antes de cerrar la etiqueta body, ya que evita que el contenido principal tarde en mostrarse, entonces… es tu decisión donde colocarlos, al final de cuentas para fines didácticos, funcionan igual en cualquier lado.
Dentro del body vamos a declarar un DIV que incluya su id y estilos para un ancho y alto donde queramos que se dibuje el mapa, debe ser algo como esto:
<div id="map_canvas" style="width: 640px; height: 400px;"></div>
Ahora vamos con las opciones del mapa, primero declaremos la latitud y longitud donde queremos que aparezca nuestro mapa de esta manera:
var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)
Lo que hace esa línea de código, es que creamos una instancia de un objeto de la API de GMaps que guardará la latitud y longitud del mapa, marcador o sea lo que sea que queramos dibujar, así que recuérdenla bien para futuros usos.
Los valores pueden variar de la siguiente manera:
- myLatitude es el valor del ángulo que parte del ecuador, puede variar de 90 a -90 de norte a sur respectivamente, siendo 0 el ecuador.
- myLongitude es el valor que parte del meridiano de Greenwich, o sea a partir de Londres, Inglaterra, tomando valores que varian de -180 a 180 de este a oeste respectivamente siendo 0 en Londres.
TIP: Si quieres obtener la latitud y longitud específicos dirígete a Maps.Google.com y en los Labs, activa el marcador de latitud y longitud.
Ahora, vamos con las opciones del mapa, las vamos a declarar de la siguiente forma:
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Fácil de entender, ¿no?, lo que se realiza con esto es que a myOptions se le adjuntan las opciones propias de despliegue del mapa, zoom, es el nivel de visión del mapa, el más bajo 1, el más alto puede variar, ya que en algunos lugares puede ser hasta de un nivel 25 (hasta donde he descubierto), ya dependerá de lo que quieras mostrar en tu aplicación; center, si claro, centra el mapa con la latitud y longitud que un paso antes hemos declarado con la variable myLatlng; mapTypeId es una variable que interpreta el tipo de mapa que se va a desplegar, los cuales pueden ser estos:
- ROADMAP muestra el mapa normal, el que es en 2D, si no se declara nada, este es el tipo por default.
- SATELLITE muestra las cuadros fotografiados de la superficie.
- HYBRID muestra una combinación de cuadro fotográficos, y el mapa 2D con nombres de calles y demás sobrepuesto, es como sobrevolar la superficie con todo y direcciones.
- TERRAIN muestra cuadros del relieve físico de la tierra, elevaciones, ríos, montañas, entre otros.
Lo que prosigue es crear una instancia que guarde, interprete y dibuje todas las opciones que hemos visto de un mapa, recuerden tener jQuery cargado para que les funcione este script:
var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
Así creamos la instancia al mapa y le decimos que lo coloque en el DIV con el ID de map_canvas, así como las opciones que requiere el mapa para ser desplegado correctamente. La variable map nos servirá más delante para tener control sobre el mismo mapa, como dibujar marcadores, formas, líneas, etc., haciéndole referencia.
Por último vamos a colocar/dibujar un marcador, un pin, o como lo quieran llamar, es muy simple hacerlo:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hola Mundo"
});
Estas son las opciones básicas y quizá mínimas para dibujar un marcador, para position usaremos la misma variable que usamos para centrar el mapa y colocar el marcador en el centro del mismo, map es la instancia del objeto del mapa sobre el que vamos a colocar el marcador, title es el tooltip del marcador (el que dice un texto cuando dejamos encima el puntero).
Entonces al final, el código lo colocamos en una función que llamaremos initialize, para poder llamarlo posteriormente en cualquier parte de nuestro sitio, que para el ejercicio lo haremos en cuanto se cargue el body, agregando en la etiqueta de apertura:
<body onload="initialize()">
Aunque puedes llamar la función desde cualquier otro lado, ahora si nuestro documento con todo y el script debe verse algo semejante a esto:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(20.68009, -101.35403);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hola Mundo"
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 640px; height: 400px;"></div>
</body>
</html>
Es todo por esta ocasión, ya tengo otros ejercicios listos, solamente falta desglozarlos, cualquier duda, ya saben cómo contactarme 
.
Enjoy this Life!!
Quizá también te interese...
14 Responses to “Primeros pasos con la API v3 de Google Maps (Mapa y Marcador)”
hola,
antes de nada gracias por el aporte
pero, he copiado y pegado el mismo código poniendo a true el lugar donde lo pide y a false tambien.
he puesto el doctype comleto:
i me sale toda la pantalla en blanco como resultado uso firefox como navegador.
alguna ayudita?m
pongo el codigo completo aquí para que te sea mas facil:
function initialize() {
var myLatlng = new google.maps.LatLng(41.899372,1.876966);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($(“#map_canvas”).get(0), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:”Hola Mundo”
});
}
@Axel estás integrando jQuery y pones un div en el body donde el ID sea map_canvas?? SI puedes también colocame el HTML que estás poniendo por favor =D
Hola, gracias por el tuto pero llegue a este problema:
mi pagina carga sus secciones por medio de ajax en un
. pero cuando trato de cargar un mapa el script de la api no se carga. si coloco el mapa directamente en una pagina si sirve, pero cuando trato de cargarlo por medio de ajax no, puedes ayudarme con esto?
@juanalvarez9 puedes colocar la parte del código que carga el mapa, o enviármela en la parte de contacto y así poder ayudarte, saludos!
http://pastebin.com/sUHAFr0Q
ahi esta mas o menos lo que busco hacer, gracias
@juanalvarez9 Bien sencillo, te falta en el div colocar el width y height (ancho – alto) para que sepa cómo colocar el mapa, recuerda, explícito es mejor que implícito =P
hola, hice el ejemplo tal cual pero me sale en blanco.¿me podrias ayudar? cabe mencionar que no se nada de JQuery y se muy poco de JS, pero como esto me urge muchas veces no da tiempo de estudiarlo y comprenderlo al 100. Lo que hice fue descargar el JQuery me devolvio 2 carpetas dist y test las cuales coloque en donde estoy haciendo las pruebas, aqui el codigo, igual que el tuyo
function initialize() { var myLatlng = new google.maps.LatLng(20.68009, -101.35403); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map($(“#map_canvas”).get(0), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title:”Hola Mundo” }); }
@samuel tu script está correcto, pero con respecto a lo de jQuery… agregaste la referencia al script?? lo más seguro es que ese sea el problema, que no encuentra dónde colocar el mapa porque no encuentra las librerías de jQuery, puedes en lugar de usar:
$(“#map_canvas”).get(0)
uses:
document.getElementById(“map_canvas”)
Intenta y ya nos comentas como te fue…
Muchisimas gracias!! Efectivamente no tenia bien direccionado el script(que estupido, lo corregi y aun aparecia en blanco, sustitui el $(“#map_canvas”).get(0)
por el document.getElementById(“map_canvas”) y aun asi no podia verlo, decidi volverlo a hacer de nuevo y funciono perfecto ignoro lo que paso, seguro que algo me faltaba. Te agradezco mucho tu ayuda y tus aportes, seguire viendo el resto de tus tutoriales.
Gracias por el ejemplo y la explicación! Son bastante claros. Bueno, me gustaría aportar un poquito sobre la carga de jQuery y los otros scripts. Esto es lo que yo uso para cargarlos. Nótese que en la carga del jQuery, dentro de mi proyecto tengo una carpeta llamada Scripts, y ahí están los archivos de jQuery.
Espero que sea de ayuda. Saludos!
@Ivan creo que faltó el código que nos ibas a mostrar =P
No me lo puso de nuevo :S Que raro…. :S Lo copie y pegue desde VWD, no se que paso…
@Ivan ponlo entre estos tags [ js ] [/ js ] … (sin espacios dentro de los corchetes)
<%--Agregarmos la referencia para la API jQuery--%> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"> </script> <%--Agregarmos la referencia para la API Google Maps V3. Nota: sensor=false significa que no queremos que el sensor identifique nuestra posición actual--%> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <%--Agregarmos la referencia para la documentación para API Google Maps V3 Nota: El archivo se coloco en la carpeta Scripts de este proyecto--%> <script src="Scripts/google-maps-3-vs-1-0.js" type="text/javascript"> </script>