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