Guía para comenzar a trabajar con la API de google maps

Posted by On octubre 10, 2016 2 Comments

Hace un tiempo ya os conté como trabajar con gmaps, una maravillosa librería para trabajar con los mapas de google y que nos permite hacer muchísimas cosas. Pero podemos trabajar también con la API de google maps y crear efectos espectaculares. Por esa razón me he propuesto crear esta pequeña guía con un ejemplo práctico para que todos podamos usar la API de google para los mapas con un conocimiento básico, ya que dicho sea de paso, la documentación está un poco abstracta por decirlo de alguna manera para empezar directamente con ella.

De modo que empecemos…

Consiguiendo una API Key

Lo primero que necesitaremos es una API Key de google para que nuestros mapas funcionen, de hecho hay que introducir esta key en el enlace de un script que es necesario para que se puedan visibilizar nuestros mapas.

Una vez que tengamos nuestra clave ya podemos introducir al final del body de nuestro html el siguiente script

<html>
<head>
</head>
<body>
    <script async defer src="https://maps.googleapis.com/maps/api/js?v=3&key=LA KEY QUE HAYAS OBTENIDO&callback=initMap&region=ES">
    </script>
</body>
</html>

Donde deberemos de sustituir «LA KEY QUE HAYAS OBTENIDO» por la key.

Creando la sección del mapa

Tenemos que marcar en nuestro código donde queremos que se dibuje el mapa. Para ello lo más recomendable es hacer un div con la clase map

<div class="map"></div>

De esta forma podremos darle estilos al espacio donde queramos poner el mapa, aunque aún no podamos tocar el mapa en sí.

Creando el script del mapa

Hasta aquí todo ha sido sencillo, pero ahora es cuando la cosa se comienza complicar, el menos siguiendo las instrucciones de la API de google maps, pero en realidad es sencillo una vez que se entiende.

Debemos de crear otro script que tendrá la función initMap que se incluye en el enlace del script anterior como callback, para que se vaya cargando toda la página mientras lo hace el mapa.

Esta función nos va a permitir configurar todas las opciones que vamos a querer para nuestro mapa, como el color de los elementos, la posición, el zoom, el marcador… siendo donde en verdad tendremos que trabajar.

El ejemplo que yo os traigo es el siguiente:

<script type="text/javascript">
function initMap() {
  var myLatLng = {lat: 37.886137, lng: -4.765622};
  var imagen = 'marcador/icono.png';
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: myLatLng,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    }
  });

  var styles = [
  { "featureType": "poi.park", 
  "elementType": "geometry.fill", 
  "stylers": [ { "color": "#008040" } ] }, 
  { "featureType": "road.highway", 
  "elementType": "geometry.fill", 
  "stylers": [ { "color": "#8080ff" } ] },
  { "featureType": "road.local", 
  "elementType": "geometry.fill", 
  "stylers": [ { "color": "#FFE068" } ] }
  ];

map.setOptions({styles: styles});

 var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: imagen,
    title: 'Hola Mundo!'
  });

}
</script>

En este ejemplo podemos observar como una vez que entramos en la función utilizamos las coordenadas y una url relativa para declarar las coordenadas y donde esta guardado el marcador específico que queremos usar para este mapa.

Después de esto creamos un nuevo objeto mapa que se dibujará dentro del div que hemos definido y donde definimos el centro del mapa, zoom y algunas propiedades de los controles del mapa.

Tras esto, introducimos un objeto JSON en una variable, es muy importante saber que estas propiedades son las que se introducen en el mapa como estilos. En este caso hemos cambiado el color de parques calles y carreteras principales.

Ya en la línea 36 lo que procedemos a hacer es a introducir estos estilos como opciones del mapa. De hecho estos estilos podemos obtenerlos por medio de la herramienta, Create map style de google.

Y finalmente lo que hacemos es crear un nuevo objeto marcador, donde introducimos las opciones que queremos para el mismo, incluyendo la posición, el mapa, el icono y el texto que queremos mostrar al pasar el ratón por encima.

Uniendo las piezas

Con todo lo que tenemos ya podemos presentar un mapa con algunos cambios básicos, y ya con el script que hay más abajo y la ayuda de la documentación de google ir tocando todas las opciones que necesitemos.

En esté código hemos tocado los colores de las calles, los parques y las carreteras principales. Hemos cambiado la presencia de los controles del mapa y también hemos puesto un marcador personalizado

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>

</head>
<body>

  <div id="map"></div>

<script type="text/javascript">
function initMap() {
  var myLatLng = {lat: 37.886137, lng: -4.765622};
  var imagen = 'marcador/icono.png';
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: myLatLng,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    }
  });

  var styles = [
  { "featureType": "poi.park", 
  "elementType": "geometry.fill", 
  "stylers": [ { "color": "#008040" } ] }, 
  { "featureType": "road.highway", 
  "elementType": "geometry.fill", 
  "stylers": [ { "color": "#8080ff" } ] },
  { "featureType": "road.local", 
  "elementType": "geometry.fill", 
  "stylers": [ { "color": "#FFE068" } ] }
  ];

map.setOptions({styles: styles});

 var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: imagen,
    title: 'Hello World!'
  });

}
  </script>
    <script async defer src="https://maps.googleapis.com/maps/api/jsv=3&key=LA KEY QUE HEMOS OBTENIDO&callback=initMap&region=ES">
  </script>
  </body>
</html>

mapa

Conclusiones

He de admitir que la API de google maps es muy potente, y que nos deja hacer casi cualquier cosa que queramos con el mapa, pero también he de decir que la curva de aprendizaje me ha resultado un poco extraña debido tal vez a que no queda muy claro en muchos lugares cómo hacer las cosas y faltando código de ejemplos completos como el que aquí hemos visto. De hecho creo que con este código se puede acelerar de forma significativa su uso.

Por otro lado tenemos una librería mucho más sencilla llamada gmaps con la cual es posible tal y como reza su lema «API de google maps con menos sufrimiento y más diversión», hacer muchas cosas con la API de google de forma sencilla.

Cómo siempre digo cada proyecto debe de estudiarse por separado, lo que para un cliente puede ir perfecto, para otro puede quedarse corto, o largo, de modo que no está mal saber utilizar las dos para resolver las necesidades que se presenten. Para mí como en las artes marciales, no es ninguna mejor o peor (al menos en este caso), simplemente son diferentes.