Archivo de la etiqueta: google maps

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

Mostrar un mapa interactivo de Google Maps

En esta entrada vamos a ver como añadir un mapa de Google maps, así como añadirle marcadores y obtener las coordenadas actuales.

Lo primero que debemos hacer para utilizar la api de google maps es añadir el script a nuestro html para ello incluimos la siguiente linea:

< script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>

Después debemos crear un div contenedor donde se incrustará el mapa, debemos darle un id para poder asignárselo al mapa:

  < div id="mapa" style="width: 450px; height: 350px;"></div>

Por último creamos una función que deberemos llamar al inicio y creará el objeto mapa que se mostrará dentro del div:

var map = new google.maps.Map(document.getElementById('mapa'), {
 center: {lat: 43.2686751, lng: -2.9340005},
 scrollwheel: false,
 zoom: 8
 });

Como podemos observar a la hora de crear el objeto mapa le pasamos como primer parámetro el elemento del DOM donde de insertará el mapa, en este caso el div con id mapa.

Como segundo parámetro (Opcional) le pasamos un objeto  con diferentes opciones, en este caso le indicamos las coordenadas donde queremos que aparezca centrado el mapa con la opción center, desactivamos la rueda del ratón con scrollwhell a false y le asignamos el zoom a 8.

Veamos como quedaría nuestro código completo:

 <!DOCTYPE html>
<html lang="es">
<head>
<title>Insertar Mapa</title>
<meta charset="utf-8" />
< script type="text/javascript" src="https://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
 });
}
</script>
</head>
<body onload="initMap()">
 <h1>Insertar Mapa</h1>
 < div id="mapa" style="width: 450px; height: 350px;"> </div>
</body>
</html>

En nuestro navegador se mostraría el siguiente mapa:

Captura de pantalla_2016-01-04_13-14-39

En las opciones que le pasamos como parámetro a la hora de crear el mapa podemos definir que se muestren o no poniendo a true o a false lo siguientes controles:

zoomControl: El control del zoom.
mapTypeControl: Seleccionar tipo de mapa.
scaleControl: El control de la escala.
streetViewControl: El control de streelView.
rotateControl: Control de rotación.

 

Ejemplo:

 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,
 });

Para obtener más información acerca de los controles  podemos acudir a la documentacuión de google maps: https://developers.google.com/maps/articles/v321-controls

Para finalizar esta entrada comentaros que podemos centrar un mapa ya creado utilizando la función setCenter():

map.setCenter({lat: 37.3000, lng: -120.4833});

 

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

Google Maps: Mostrar una imagen con un mapa estático

Hola a todos, para comenzar con este mini tutorial sobre el uso de google maps vamos a empezar por lo más  básico, como mostrar un mapa estático a modo de imagen para mostrar por ejemplo donde nos encontramos localizados.

Esta es la manera más fácil de mostrar nuestra localización aunque al ser estático está limitado a mostrar únicamente una localización sin que se pueda interactuar con el mapa.

Para ello simplemente tenemos que añadir a nuestro html un elemento imagen y en el atributo src poner la url a la api de google de la siguiente manera:

<img  src=”http://maps.googleapis.com/maps/api/staticmap?maptype=satellite&size=[Anchura]x[Altura]&markers=color:[color]|label:[letra]|[latitud,longitud]” />

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Mapa estático</title>
<meta charset="utf-8" />
</head>
<body>
 <h1>Ejemplo de mapa estático</h1>
 <img src="https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=43.2686751,-2.9340005&zoom=16&size=400x400&markers=color:yellow|43.2686751,-2.9340005" />
</body>
</html>

En este ejemplo mostramos una imagen con un mapa estático que muestra la localización del museo Guggenheim de Bilbao.

Como podemos observar  en el atributo src de la etiqueta img ponemos la url http://maps.googleapis.com/maps/api/staticmap y le pasamos los parametros que definen como debe de ser la imagen de mapa.

Con el parámetro maptype le indicamos el tipo de mapa que tiene que mostrar, hay cuatro tipos de mapas disponibles en la API de Google Maps:

  • roadmap: especifica una imagen de mapa de ruta estándar, la que normalmente se muestra en la página web de Google Maps. Este es el tipo de mapa predeterminado.
  • satellite:  muestra imágenes de satélite de Google Earth
  • hybrid: muestra una mezcla de vistas normales y de satélite
  • terrain: muestra un mapa físico basado en información del terreno.

Con el parámetro center le indicamos las coordenadas latitud y longitud en las que deseamos que esté centrado el mapa.

Con el parámetro zoom le indicamos el grado de zoom (aumento) a aplicar sobre el mapa.

Con el parámetro size mostramos el tamaño (anchura x altura) de la imagen.

Con el parámetro markers definimos los marcadores. Podemos definir el color, la posición (latitud,logitud). Las diferentes opciones que acepta el parámetro markers deben ir separadas por el carácter pipe ‘|’. Ademas del color y de la posición se puede definir una letra a modo de etiqueta con la opción label, también se puede definir el icono con la opcion icon por ejemplo ejemplo:

<img src="https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=43.2686751,-2.9340005&zoom=16&size=400x400&markers=&markers=icon:http://chart.apis.google.com/chart?chst=d_map_pin_icon%26chld=cafe|43.2686751,-2.934000" />

Para terminar con el mapa estático solo queda decir que podemos utilizar tantos marcadores como queramos añadiendo varios parámetros markers por ejemplo:

 <img src="https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=43.2686751,-2.9340005&zoom=16&size=400x400&markers=icon:http://chart.apis.google.com/chart?chst=d_map_pin_icon|color:yellow|43.2686751,-2.9340005&markers=color:blue|43.2686751,-2.9320005" />

Si ejecutamos en un navegador el ejemplo anterior se mostrará en el navegador una imagen como esta:

Captura de pantalla 2016-01-03 a las 21.20.07

Índice   –  Capitulo Siguiente –>

 

Abrir mapa nativo en iOS, Android y Windows Phone desde un link

 

Hola a todos:

A veces nos interesa poner el típico enlace de “Como llegar” en nuestra web, o en una app que estemos construyendo por ejemplo con Phonegap, y nos interesa que la dirección que le indicamos se abra en la aplicación nativa  de mapas del móvil, que suele funcionar mejor y la interfaz resulta mas familiar para el usuario que esta acostumbrado a utilizar su plataforma móvil.

Veamos las diferentes tipos de url que podemos utilizar en los liks para abrir mapas.

Por defecto:

Sabemos que tenemos el link estándar de google maps que podría ser algo así:

<a href="http://maps.google.com?q=laubideta+16+matiena+abadiano">Mostrar mapa</a>

iOS:

Sin embargo para que nos abra la aplicacion de mapas nativa de iOS (iPhone) deberemos poner una url como esta:

<a href="http://maps.apple.com/maps?q=laubideta+16+matiena+abadiano">Mostrar Mapa en iOS</a>

Y si queremos que nos trace una ruta  desde el punto en el que nos encontramos hasta un punto  de destino tenemos que usar una url como esta:

 <a href="http://maps.apple.com/maps?saddr=Current%20Location&daddr=Universidad+de+deusto+bilbao">como llegar Ios</a>

En el parámetro saddr ponemos Current%20Location para indicar que el punto de inicio es el sitio donde nos situamos en este momento, podemos indicar una dirección de inicio de la ruta en lugar de “Current Location” , y en saddr ponemos la dirección de destino.

Tambien podemos indicarle la dirección mediante coordenadas de latitud y longitud:

<a href="http://maps.apple.com/maps?saddr=Current%20Location&daddr=43.12955890000001,-2.542329300000006">Como  llegar en IOs - coordenadas</a>

Android:

Para que se abra directamente la aplicación de mapas de Android usaremos:

<a href="geo:0,0?daddr=Laubideta+16+Abadiano+bizkaia">como  llegar Android</a>

Si lo que queremos es indicar la dirección por sus coordenadas seria:

<a href="geo:43.1689947,-2.608256200000028">Como llegar Android - Coordenada</a>

Por desgracia este tipo de url no permite indicarle un punto de inicio para establecer una ruta, una vez abierto el mapa el usuario deberá seleccionar en la aplicación  que le indique la ruta si así lo desea.

Windows Phone:

Las urls anteriores no funcionan en Windows Phone, que utilizan su propio formato:

<a href="maps:Elorrio+Bizkaia">Abrir mapa en Windows Phone</a>

Por coordenadas sería:

<a href="maps:43.1689947,-2.608256200000028">Abrir mapa en Windows phone por coordenadas</a>

De esta manera podemos elegir que url nos interesa.

Si estamos trabajando con Phonegap/Apache Cordova elegiremos la que se ajuste a la plataforma para la que estemos utilizando.

A modo de información os comento que otra forma de hacerlo en Phonegap puede ser utilizar InAppBrowser de la siguiente manera:

window.open("http://maps.google.com/?q="+ address,"_system");

Si estamos desarrollando una web en php  una  opción es detectar la plataforma y mostrar el link con la url que corresponda dependiendo de este.

Para detectar dispositivos móviles en php se puede utilizar la clase php-mobile-detect que dispone de los siguientes metodos: isAndroid(), isAndroidtablet(), isIphone(), isIpad(), isBlackberry(), isBlackberrytablet(), isPalm(), isWindowsphone(), isWindows(), isGeneric(), isMobile().

Un ejemplo de como la  podríamos usar para mostrar un enlace dependiendo del dispositivo seria  este:

<?php
include('Mobile_Detect.php');
$detect = new Mobile_Detect();
if( $detect->isAndroid() ) {
 // Android
 $url="geo:0,0?daddr=Universidad+de+deusto+bilbao";
} elseif ( $detect->isIphone() ) {
 // iPhone
 $url="http://maps.apple.com/maps?saddr=Current%20Location&daddr=Universidad+de+deusto+bilbao";
} elseif ( $detect->isWindowsphone() ) {
 // Windows Phone
 $url="maps:Universidad+de+deusto+bilbao";
} else{
 // Por defecto
 $url = 'http://maps.google.com?daddr=Universidad+de+deusto+bilbao';
}
 echo '<a href="'.$url.'">Mostrar Mapa</a>';
?>

 

Ahora os mostraré un sencillo ejemplo de como podemos hacer esto con javascript:

Primero vamos a crear una función en javascript  que he llamado showMap:

Para hacer un ejemplo de forma rápida podéis pegar este código en el head.

 // ****************************************************************//
 // * Función: showMapa() *//
 // * Descripción: Abre el mapa nativo del dispositivo móvil *//
 // * Autor: Eduardo Revilla Vaquero *//
 // ****************************************************************//

 showMap=function(q)
 {
 var device = navigator.userAgent;
 var url = 'http://maps.google.com?daddr='+q;
 if (device.match(/Iphone/i) || device.match(/iPhone|iPad|iPod/i))
 {
 // iOs
 url='http://maps.apple.com/maps?saddr=Current%20Location&daddr='+q;
 }
 else if(device.match(/Android/i))
 {
 // Android
 url='geo:0,0?q='+q;
 }
 else if(device.match(/Windows Phone/i))
 {
 // windows phone
 url='maps:'+q;
 }

 window.location.href = url;
 }

Y después en el body donde queramos mostrar el enlace al mapa podremos algo como esto:

<a href="#" onclick="showMap('Universidad+de+Deusto+Bilbao')">Mostrar mapa</a>

Y solo con este pequeño código podemos redirigir la petición y abrir el mapa nativo del móvil independientemente de la plataforma en la que nos encontremos.

Sencillo ¿no? 😉

Y…. eso es todo por hoy.

Espero vuestros comentarios.

Un saludo.

Índice   –   <– Capítulo Anterior