Archivo de la etiqueta: markers

Añadir marcadores a Google Maps

En este post vamos a ver como añadir marcadores a un mapa de Google Maps.

Para ello debemos crear un mapa como vimos en la entrada Mostrar un mapa interactivo de Google Maps. Después debemos crear un marcador y asignarselo al mapa que hemos creado.

Como siempre vamos a ver esto más claro con un ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Añadir Marcadores</title>
<meta charset="utf-8" />
<script type="text/javascript" src="//maps.google.com/maps/api/js"></script>
<script>
function initMap() {
 // Creamos un objeto mapa y especificamos el elemento DOM donde se va a mostrar.
 var map = new google.maps.Map(document.getElementById('mapa'), {
 center: {lat: 43.2686751, lng: -2.9340005},
 scrollwheel: false,
 zoom: 8,
 zoomControl: true,
 rotateControl : false,
 mapTypeControl: true,
 streetViewControl: false,
 });
 // Creamos dos marcadores.
 var marker1 = new google.maps.Marker({
 position: {lat: 43.2686751, lng: -2.9340005},
 draggable: false
 });
 // a este marcador le añadimos un icono personalizado
 var marker2 = new google.maps.Marker({
 position: {lat: 42.8286751, lng: -3.0990005},
 icon: "https://reviblog.net/wp-content/uploads/2017/03/marcador.png",
 draggable: false
 });
// Le asignamos el mapa a los marcadores.
marker1.setMap(map);
 marker2.setMap(map);
}
</script>
</head>
<body onload="initMap()">
 <h1>Añadir Marcadores</h1>
 <div id="mapa" style="width: 450px; height: 350px;"> </div>
</body>
</html>

Primero creamos un mapa de la forma que ya vimos anteriormente y después creamos dos marcadores.

Para crear un marcador creamos un objeto google.maps.Marker y le pasamos un objeto con las opciones.

En las opciones debemos indicarle la posición, en este caso le hemos indicado:

position: {lat: 43.0586751, lng: -2.9990005},

Opcionalmente le podemos indicar un icono personalizado, para ello con el parámetro icon le indicamos la url del icono que queremos que aparezca, si no le añadimos el parámetro icon usara el icono por defecto de google maps. El icono puede ser una imagen que esté alojada en tu servidor o que se encuentre en cualquier url accesible. Si no eres muy bueno diseñando tus propios iconos aquí puedes encontrar muchos iconos para utilizar en tus mapas.

Tambien le hemos indicado draggable a false. Esto significa que el marcador no se puede arrastrar, en este caso no seria necesario ya que por defecto si no se indica es false.

Si ponemos draggable a true, podemos observar como podemos arrastrar el marcador.

Podemos manejar el evento dragend que se lanza cuando se ha terminado de arrastrar el marcador para recoger por ejemplo las coordenadas en las que se ha quedado el marcador:

Para manejar los eventos del mapa utilizamos google.maps.event.addListener. Como primer parámetro indicamos el objeto al que vamos controlar el evento, como segundo el tipo de evento que vamos a “escuchar”, y como tercer parámetro la función que se va ejecutar cuando el evento se producca.

Por ejemplo si queremos que cuando se termine de arrastrar un marcador nos muestre un alert con las coordenadas donde se ha quedado el marcador podemos hacer algo como esto, suponiendo que ya tenemos un marcador creado en la variable marker:

google.maps.event.addListener(marker, 'dragend', function() {
  alert('Latitud = '+marker.getPosition().lat()+ ', Longitud = '+marker.getPosition().lng());
});

Otros eventos que podemos controlar en un marcador son:

  • 'click'
  • 'dblclick'
  • 'mouseup'
  • 'mousedown'
  • 'mouseover'
  • 'mouseout'

Para saber más sobre los eventos en los mapas de google maps puedes consultar la documentación de google:  https://developers.google.com/maps/documentation/javascript/events

Índice   –   <– Capítulo Anterior   –  Capitulo Siguiente –>