Integrar Google Maps en nuestro website para indicar la dirección física de nuestras oficinas o para crear un directorio de localidades en un web app o una tienda en línea es muy importante debido al uso de “smartphones”. Eso permite una forma de ayuda para quienes quieren indicaciones de cómo llegar. Es mucho más atractivo si podemos integrar mapas con nuestro toque personal o el branding de nuestra empresa. Esto es posible gracias a Google Maps API.
Lo primero que necesitaremos es una cuenta en Google Developers, luego necesitaremos crear un proyecto, y por último crear un API Key del servicio de Maps para nuestro proyecto.
Para iniciar incluímos la librería del API de Google Maps en nuestro archivo html, pasando como parametro nuestro API Key:
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=aqui-ponemos-el-apikey&sensor=false"></script>
Recuerda que la mejor ubicación para colocar librerías Javascript es al final de nuestro documento, justo antes de cerrar la etiqueta </body>.
<html> <head> <title>Google Maps API</title> </head> <body> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=aqui-ponemos-el-apikey&sensor=false"></script> </body> </html>
Ahora necesitamos un elemento para mostrar el mapa dentro de nuestro archivo, podemos utilizar cualquier elemento de bloque, en este caso usaremos <div>. Entonces incluímos nuestro bloque al código html que ya tenemos, se vería así:
<html> <head> <title>Google Maps API</title> </head> <body> <div class="map" id="map_canvas"><div> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=aqui-ponemos-el-apikey&sensor=false"></script> </body> </html>
El API crea elementos propios dentro de nuestro bloque contenedor. Como el mapa se genera deforma dinámica, debemos indicar por medio de CSS, propiedades de alto y ancho que permitan visualizar el mapa generado por el API, ya que el mismo viene sin propiedades de estilo con el fin de que le usuario tenga total control.
<html>
<head>
<title>Google Maps API</title>
<style>
.map {
height: 400px; /* Alto del mapa */
width: 100%; /* ancho del mapa */
width: inherit; /* tip para IE y navegadores obsoletos */
margin-bottom: 50px; //* margin inferior para separar cualqueir otro contenido debajo del mapa */
}
</style>
</head>
<body>
<div class="map" id="map_canvas"><div>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=aqui-ponemos-el-apikey&sensor=false"></script>
</body>
</html>
Con esto tenemos nuestra estructura para utilizar el API. Ahora necesitaremos Javascript para crear el objeto del mapa. El API es un objeto, por tanto necesitamos inicializarlo como tal:
var map = new google.maps.Map();
Al crear nuestor objeto debemos indicar cual elemento será el contenedor del mapa. Como hemos utilizado un bloque <div>, necesitamos hacer referencia al elemento pro medio de un identificador, el nuestro es el ID del bloque <div> el cual hemos llamado “map_canvas”:
var map = new google.maps.Map(document.getElementById("map_canvas"));
Al incluir nuestro javascript, nuestro bloque debe aparecer como un recuadro gris. Esto indica que hasta ahora vamos bien. A continuación necesitamos especificar algunas opciones o parámetros requeridos para que el mapa pueda visualizarse de forma correcta. Esto lo hacamos pasando los parametros a nuestro recien declarado objeto map de la misma forma que hemos indicado el bloque contenedor donde mostraremos nuestro mapa.
Preferiblemente y por mantener nuestro código limpio y estructurado; pasaremos los parámetros previamente almacenados a una variable. Los parametros que necesitamos son: zoom, center, mapTypeId como opciones requeridas para poder desplegar el mapa. Otros parametros que emplearemos son: panControl, scrollwheel, streetViewControl y styles. Este último nos permitirá personalizar nuestro mapa.
En escencia la opción “center”nos permite indicar que punto del mapa global queremos centralizar o punto de referencia inicial del mapa. Como valor podemos utlizar una dirección, nombre de país, nombre de ciudad, etc. También permite utilizar coordenadas (LAT, LNG). Vamos a utitlizar coordenadas para hacerlo mas interesante y para permitir utilizar el mapa en el futuro para referencia de nuestra ubicación mediante Geolocation del navegador o para crear una lista de lugares que querramos referenciar, todo es posible.
Las coordenadas se indican como un objeto. Si, de la misma forma que declaramos nuestro mapa esto debido a que endpoint del API es google.maps. Cuando creamos el objeto del mapa empleamos el método Map. Ahora utilizaremos el método LatLng:
new google.maps.LatLng(-18.76695, 46.86911)
He tomado la isla de Madagascar como centro para nuestro mapa. Entonces si unimos todo tendremos nuestro mapa centralizado:
<html>
<head>
<title>Google Maps API</title>
<style>
.map {
height: 400px; /* Alto del mapa */
width: 100%; /* ancho del mapa */
width: inherit; /* tip para IE y navegadores obsoletos */
margin-bottom: 50px; //* margin inferior para separar cualqueir otro contenido debajo del mapa */
}
</style>
</head>
<body>
<div class="map" id="map_canvas"><div>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=aqui-ponemos-el-apikey&sensor=false"></script>
<script>
var mapOptions = {
zoom:4,
center: new google.maps.LatLng(-18.76695, 46.86911),
panControl:false,
scrollwheel:false,
streetViewControl:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
</script>
</body>
</html>
Ya tenemos nuestro mapa. Recuerda que en este código ejemplo debes sustituir el Apikey de la referencia del archivo javascript de google map api.
Ahora, finalmente vamos a personalizar nuestro mapa :). Necesitamos indicar el estilo de nuestro mapa. Puedes utilizar la ayuda de Google Developers para todos los detalles. Para nuestro ejemplo utilizaremos lo básico:
var mapStyles = [
{
featureType: "all",
stylers: [
{ saturation: -80 }
]
},{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
{ hue: "#00ffee" },
{ saturation: 50 }
]
},{
featureType: "poi.business",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
Hemos cargado el estilo del mapa como una variable para continuar organizados y estructurados. Por lo tanto, nuestro mapa final lo tendremos personalizado:
<html>
<head>
<title>Google Maps API</title>
<style>
.map {
height: 400px; /* Alto del mapa */
width: 100%; /* ancho del mapa */
width: inherit; /* tip para IE y navegadores obsoletos */
margin-bottom: 50px; //* margin inferior para separar cualqueir otro contenido debajo del mapa */
}
</style>
</head>
<body>
<div class="map" id="map_canvas"><div>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=aqui-ponemos-el-apikey&sensor=false"></script>
<script>
var mapStyles = [
{
featureType: "all",
stylers: [
{ saturation: -80 }
]
},{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
{ hue: "#00ffee" },
{ saturation: 50 }
]
},{
featureType: "poi.business",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var mapOptions = {
zoom:4,
center: new google.maps.LatLng(-18.76695, 46.86911),
panControl:false,
scrollwheel:false,
streetViewControl:false,
styles: mapStyles, /* hemos creado este nuevo parametro */
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
</script>
</body>
</html>
Voilá! Tenemos un mapa personalizado. Solo necesitas jugar con el estilo del mapa que hemos asignado a la variable mapStyles. El índica stylers: hue controla el color o patron de colores que emplearemos a nuestro mapa. Con este valor podemos personalizarf el mapa de la forma que deseamos. De igual forma, la saturación indica la intensidad del patrón de color.
Como un extra; si queremos marcar un punto específico en el mapa por medio de un “Pin” o marcador, obvio, podemos crear otro objeto “marker” e insertarlo en nuestor ya creado mapa. Haciendo esto de forma repetitiva podemos crear infinito número de marcadores en el mapa:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-18.76695, 46.86911),
map:map,
icon:'http://opportunitycollaboration.net/wp-content/uploads/2013/12/icon-map-pin.png'
});
Espero les sea de utilidad. Recuerden, “CODE IS POETRY”.