Ir al contenido principal

Buscar este blog

Google Maps JavaScript API v3: Como crear el primer mapa

Google Maps v3 Javascript
Empezando a usar la API
Para utilizar la API v3 de Google Maps lo primero que tenemos que hacer es añadir el siguiente script entre las etiquetas head de nuestro documento html.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Quien haya utilizado una versión anterior a la 3.0 se habrá dado cuenta de que no es necesario añadir ninguna API_KEY como había que hacer en versiones anteriores de Google Maps, así que eso nos ahorramos ;). 
Atención! Google Maps APIs realizó una actualización de su política el día 22 de Junio de 2016. A partir de esa fecha, todas las nuevas aplicaciones que quieran usar la API sin proporcionar unas credenciales no funcionarán. Para más información visitar el siguiente enlace: https://developers.google.com/maps/pricing-and-plans/standard-plan-2016-update

 Para añadir nuestra api key a los servicios de Google Maps necesitamos incluir el parámetro llamado key, se haría de la siguiente manera:

 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=TU_API_KEY"></script>

 Puedes consultar como generar una api key para Google Maps JavaScript v3 si no sabes como obtener tu api key.

El parámetro Signed In
El parámetro signed_in se utiliza para habilitar el inicio de sesión en el mapa de una cuenta de Google. Con está opción el mapa se adaptará a las preferencias de la cuenta conectada, sus lugares favoritos, la ubicación de su casa o trabajo guardadas podrían aparecer en el mapa junto con otros.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&key=TU_API_KEY"></script>

El contenedor y los estilos

El siguiente paso es crear el contenedor del mapa y la vista que va a tener. Para empezar creamos un div entre las etiquetas body de nuestro documento.

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

Aplicaremos unos estilos generales en el documento para el html, body y el contenedor del mapa. Harán que nuestro mapa ocupe todo el documento sin márgenes ni espacios. 

<style>
html, body, #map-canvas
{
   height: 100%;
   margin: 0px;
   padding: 0px;
}
</style>

Inicializando el mapa
Para hacer funcionar el mapa solo nos quedaría inicializar el mapa en el load de nuestro documento. La inicialización de un mapa con unas propiedades muy básicas sería esta.

<script>
   function initialize() {
      var configMapa = {
         zoom: 7,
         center: new google.maps.LatLng(41.850033, -87.6500523)
      };
      
      var mapa = new google.maps.Map(document.getElementById('map-canvas'), configMapa);
   }

   google.maps.event.addDomListener(window, 'load', initialize);
</script>

Como veis solo se establecen dos propiedades en la configuración del mapa. La primera zoom (number) que indica el nivel de zoom cuando se visualiza el mapa y center (LatLng) que establece las coordenadas del centro del mapa. Existen muchas más propiedades que podemos modificar. 

 En la página de la api de Google Maps podemos encontrarlas todas.
Ver todas las propiedades del mapa


Ejemplo



 Puede ver este ejemplo en pantalla completa. 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps v3 y Javascript. Como crear el primer mapa</title>
    <style>
        html, body, #map-canvas
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&key=TU_API_KEY"></script>
    <script>
 function initialize() {
            var configMapa = {
                zoom: 7,
                center: new google.maps.LatLng(41.850033, -87.6500523)
            };
            var mapa = new google.maps.Map(document.getElementById('map-canvas'), configMapa);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

Comentarios

Publicar un comentario