Archivo de la etiqueta: tutorial google maps

Todo lo que debes saber sobre geolocalización y la api javascript de Google Maps para su uso en tu web o app.

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

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