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 –>

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  :-),

También puedes seguirme en Twitter en ‎@revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.

5 comentarios en “Añadir marcadores a Google Maps

  1. Tenes un error en 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,
    });

    creo que te falta un )

    1. Hola Pipon, el código está bien, pero gracias por comentar porque me he dado cuenta de que la url a la que apuntaba los iconos ya no está operativa por eso no se mostraban los marcadores, he modificado el código y he puesto un marcador de muestra alojado en mi servidor.

      Muchas gracias, un saludo.

  2. Hola, buenísimo. Muchas gracias. Te quiero hacer una consulta. Necesito que el marcador haga un efecto toggleBounce cuando se haga mouseover sobre un div que está por fuera del mapa. El código en jquery sería algo así: $(“#ubicacion”).mouseover( function toggleBounce() { marker1.setAnimation(google.maps.Animation.BOUNCE)});
    $(“#ubicacion”).mouseout( function toggleBounce() { marker1.setAnimation(null)});
    Pero no se que poner dentro de la función initMap para que esto funcione. Por favor, si podes ayudarme!! Muchas gracias

  3. Hola, como estas?. Estoy armando un proyecto y necesito poder escribir el origen, (idealmente que te autocomplete el texto) y el destino. Y que me ponga 1 marcador para cada input y entregue la distancia entre ambos.
    Tienes alguna idea de como puedo desarrollarlo?
    He encontrado varias opciones pero aun asi no se me ha dado.. :/

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.