Añadir marcas dinámicamente a un mapa de Google Maps

10/Oct/2012 Google , , , ,

En este ejemplo vamos a ver cómo podemos añadir una marca a un mapa de forma dinámica. Para ello vamos a utilizar lo aprendido en los ejemplos Cómo añadir una marca a Google Maps y Detectar la longitud y latitud sobre un mapa de Google Maps. Y es que el ejemplo es una combinación de creación de marcas y gestión de eventos onclick sobre el mapa.

Lo primero, como hacemos siempre, sera cargar el mapa de Google Maps.

  1. var myLatlng = new google.maps.LatLng(40.674389,-4.700432);
  2. var mapOptions = {
  3. zoom: 12,
  4. center: myLatlng,
  5. mapTypeId: google.maps.MapTypeId.ROADMAP
  6. };
  7.  
  8. map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

Lo siguiente será registrar el evento onclick sobre el mapa mediante el método addListener.

  1. google.maps.event.addListener(map, 'click', function(event) {
  2. addMark(event.latLng);
  3. });

Lo que hemos hecho ha sido invocar al método addMark, el cual recibirá un objeto de tipo LatLng con la longitud y latitud en la cual vamos a añadir la marca.

Si revisamos el método addMark veremos que lo que vamos a hacer es crear un objeto de tipo Marker de Google Maps, que es el que representa a las marcas. Y dicho objeto tendrá como posición la recibida en el parámetro LatLng.

  1. function addMark(location){
  2. marker = new google.maps.Marker({
  3. position: location,
  4. map: map
  5. });
  6. }

Así ya tenemos añadida la marca al mapa de Google Maps de forma dinámica utilizando un click.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D