tutorial google maps Archives

Hola a todos:

He querido realizar un tutorial que recoja todos los elementos que entran en juego a la hora de trabajar con geolocalización en javascript, el uso de la api v3 de google maps y en definitiva todas las posibilidades que nos ofrece la geolocalización a la hora de utilizarla tanto en una web o en una app hibrida que utilice javascript en una webview como apache cordova/phonegap, ionic, etc.

Como los post muy largos son aburridos de leer he decidido dividir este tutorial en varios capítulos en posts diferentes.

A lo largo de este contenido veremos como mostrar un mapa estático como una imagen, mostrar mapas dinámicos con marcadores, obtener las coordenadas actuales de nuestro dispositivo, obtener las coordenadas de un punto a partir de una dirección, obtener una dirección a partir de unas coordenadas, buscar lugares de interés cercanos al punto donde nos encontramos, aprenderemos a crear una función que calcule la distancia en kilometros entre dos puntos a partir de sus coordenadas. También he añadido un post antiguo donde muestro como abrir el mapa nativo de nuestro dispositivo para mostrar la ruta hasta un punto (Android, iOSm Windows Phone) formando una url concreta en función del sistema operativo que estemos utilizando.

A continuación pos pongo los links a cada uno de los capitulos que forman este tutorial dedicado a la geolocalización:

Al ser un tema extenso es posible que se hayan quedado algunas cosas en el tintero. No dudéis en dejar en los comentarios sugerencias para ampliar este tutorial con algún tema sobre geolocalización en javascript que no se haya tratado, o cualquier comentario que querais hacer al respecto.

Espero que os sea de utilidad.

Un saludo

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