Google Maps API (Versión 3)

Google Maps API (Versión 3)

Introducción

La nueva versión de la popular API de Google Maps está llena de novedades que hacen que trabajar con mapas y geolocalización sea una tarea cada vez más potente y sencilla. Con esta última actualización de la API podemos fácilmente incorporar mapas a nuestras webs, personalizando todo lo que necesitemos.

En este artículo vamos a seguir un sencillo tutorial para poder empezar a trabajar con esta API:

Primeros pasos

Lo primero de todo, tenemos que añadir la API en el TAG HEAD

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">

En este ejemplo, sacado del tutorial de Google, vemos que hace hincapie en definir una variable llamada sensor en el mismo instante de invocar la librería. Como podemos ver en la documentación de la API

Ten en cuenta que también debemos establecer un parámetro sensor para indicar si esta aplicación utiliza un sensor para determinar la ubicación del usuario. En este ejemplo hemos dejado el parámetro como la variable set_to_true_or_false para hacer hincapié en que se debe definir este valor en true o false de forma explícita.

Una vez aclarado esto, entonces vamos a inicializar la API con la variable sensor a FALSE

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">:

Ahora ya podemos crear en nuestro código JavaScript un mapa, indicando en el constructor del objeto la longitud y latitud donde queremos que inicialmente se encuentre el mapa.

var myOptions = { zoom: 5, center: new google.maps.LatLng(latitud, longitude), mapTypeId: google.maps.MapTypeId.ROADMAP, } ; map = new google.maps.Map (document.getElementById("ID DEL CONTENDOR"), myOptions);

Si nos fijamos bien, con estos pasos tenemos mucha versatilidad para crear nuestros mapas, pues hemos definido la posición inicial del mapa definiendo zoom, posición y tipo de mapa.

Luego, al crear el mapa lo "vínculamos" dentro de un elemento HTML como puede ser un elemento DIV por ejemplo.



Marcadores

Los Marcadores es algo que también es más sencillo de manejar que en versiones anteriores de la API

En primer lugar, basta con crear un objeto marker

marker = new google.maps.Marker ({position: new google.maps.LatLng(latitude, longitude), title: "Mi marcador"}) ;

Y luego asociarlo al mapa

marker.setMap(map);

Esto es un ejemplo muy sencillo de lo que podemos hacer, pero la funcionalidad de estos marcadores viene en que podemos asociarle Listeners, que estarán pendientes de los eventos que ocurran,

Por ejemplo, si queremos escuchar el evento click del marcador, basta con hacer esto:

google.maps.event.addListener (marker, "click", function (event) { … }

Centrado en función marcadores

Centrar el mapa en función de un conjunto de marcadores nos implica crear un objeto Bounds:

var bounds = new google.maps.LatLngBounds() ;

Conforme vamos creando marcadores y situándolos en el mapa, debemos de añadirlos también a este objeto

bounds.extend (new google.maps.LatLng(latitude, longitude));

Y como último paso, ajustamos el mapa a este contorno. Esta función nos ajustará tanto el zoom como las coordenadas para se vea todo centrado en nuestro mapa.

map.fitBounds (bounds);

En próximas entregas trateremos de ir profundizando más en esta potente API

Fuentes

http://code.google.com/intl/es-ES/apis/maps/documentation/javascript/ http://code.google.com/intl/es-ES/apis/maps/documentation/javascript/reference.html

Diseño del icono: Thiago Silva

Comentarios

Comentario de David - 23 de Julio de 2012 - 13:10
Hola. Estoy intentado adaptar el código de este link: https://developers.google.com/maps/documentation/javascript/elevation de manera que puda obtener un path a partir de los puntos latlng de un fichero kml que los contiene. En este ejemplo los crea a mano. Tienes idea de como enfocar este asunto. Gracias por tu blogs Salu2
Comentario de Imaginanet-Pepe - 23 de Julio de 2012 - 13:32
Hola. Puedes probar a crear un array de objetos new google.maps.LatLng a partir de los datos que tienes (en HTML, JSON, ...) que serán tu variable PATH del ejemplo. Es decir, en lugar de esto var path = [ whitney, lonepine, owenslake, panamintsprings, beattyjunction, badwater]; Tendrás var path = miArrayPreviamenteGenerado ; Saludos y suerte!
Comentario de Alex Vazquez - 05 de Abril de 2013 - 19:50
Mil gracias por el aporte de todos los que habia encontrado es el que me funciono perfectamente y en todos los navegadores. Saludos
Comentario de Fran - 26 de Septiembre de 2013 - 09:40
Hola, tengo un problema con la generación de marcadores, estoy utilizando una base de datos que tiene los links de las posiciones en el formato: https://maps.google.es/maps?q=Castellana+259,+Madrid&hl=es&ll=40.504402,-3.680763&spn=0.111728,0.220757&sll=40.2085,-3.713&sspn=14.35235,28.256836&t=h&hq=Castellana+259,+Madrid&radius=15000&z=12&iwloc=A Es decir la URL corta. El problema es que si uso las coordenadas del parámetro "sll" los marcadores se quedan desplazados del punto correcto. ¿Como puedo posicionar los marcadores de la forma correcta a partir de las URL cortas?
Comentario de Macedo - 11 de Febrero de 2014 - 02:16
hoola me gustaría saber ¿cómo se hacen las consultas sql a una Fusion Table? agradecería mucho si me pudiesen ayudar por favor...
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí