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

10/Oct/2012 Google , , , , Deja un comentario

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.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*