Google Maps API v3 es la nueva API de los mapas de Google, los cuales los podemos utilizar para nuestros proyectos que tengan que ver con ubicaciones, etc.
En esta Introducción Vamos a hablar principalmente lo básico para insertar un mapa en nuestra aplicación web.
Obtener tener una Browser API KEY: http://evilnapsis.com/2015/08/23/google-developers-obtener-la-api-key/
Para hacer pruebas te presto mi API KEY con Acceso a la Google Maps API v3: AIzaSyDuBEidKGDuQo7Bzf1uRg47MPaRRlEesw0
Codigo Completo
A continuación el código completo, ya con esto puedes ver el Mapa en tu pagina web.
[code language=”html”]<!DOCTYPE html>
<html>
<head>
<title>Google Maps API v3: Introduccion</title>
</head>
<body>
<h1>Google Maps API v3: Introduccion</h1>
<div id="map" style="width:100%;height:600px;"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById(‘map’), {
center: {lat: 23.63, lng: -102.55},
zoom: 4
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuBEidKGDuQo7Bzf1uRg47MPaRRlEesw0&callback=initMap">
</script>
</body>
</html>
El resultado es el Siguiente:
Explicacion
Debemos llamar a la libreria Javascript que se encarga de renderizar el mapa, ademas le debemos asignar 2 parámetros,uno es la API-KEY, la cual ya la puse arriba para pruebas y el otro parámetro es una función Javascript que se va a llamar para ejecutar el mapa, en este ejemplo usaremos una función llamada initMap:
<script async defer
src=”https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=CALLBACK”>
</script>
Para mostrar el mapa necesitamos un elemento div al cual le debemos asignar medidas width y height, en este ejemplo usamos:
<div id=”map” style=”width:100%;height:600px;”></div>
Ahora ya que tenemos el div y el Javascript de Google Maps nos falta el callback, el cual es el siguiente:
[code language=”javascript”]var map;
function initMap() {
map = new google.maps.Map(document.getElementById(‘map’), {
center: {lat: 23.63, lng: -102.55},
zoom: 4
});
}
Basicamente definimos un objeto tipo google.maps.Map, el cual lleva como parametros, el objeto del elemento div que ya creamos, ademas el parámetro center que tiene las coordenadas latitud y longitud que serán el centro de nuestro mapa y por ultimo el zoom o acercamiento que nos mostrar el mapa en referencia al centro marcado.
Conclusión
Esto es todo por esta entrega, como pueden ver no es muy difícil insertar un mapa, en la siguiente entrega veremos como agregar marcadores a los mapas.