Mapas de Google

facebook-svg gplus-svg twitter-svg

La forma más fácil de aprender a trabajar con las mapas de Google es ver un ejemplo. El siguiente mapa aparece centrado en Barcelona.

El HTML

Por alguna parte en el HTML aparece un <div id="mapa"> donde vamos a colocar el mapa. Hay que declarar la anchura y la altura del div, y si es el único elemento de la página ( un HTML minimalista ) hay que declarar también la altura y anchura de los elementos <html> y <body>.


<!DOCTYPE html>
<html>
<head>
  <title>Un mapa sencillo</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    html, body, #mapa {
    	height:500px;
    	width:800px;
    	margin:0px;
    	padding:0px;
    }
  </style>
  <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
  <script>
    var mapa;

    function initialize() {
      var opcionesDeMapa = {
        zoom: 8,
        center: new google.maps.LatLng(41.3887900, 2.1589900),
        mapTypeId: google.maps.MapTypeId.HYBRID //SATELITE, HYBRID, ROADMAP, TERRAIN
      };
      mapa = new google.maps.Map(document.getElementById("mapa"), opcionesDeMapa);
    }
    google.maps.event.addDomListener(window, "load", initialize);
  </script>
</head>
<body>
  <div id="mapa"></div>
</body>
</html>

También hay que añadir un enlace hacia un archivo JavaScript externo que contiene el código necesario para cargar el mapa.

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

El valor del parámetro sensor puede ser true o false. Normalmente sensor = false, al menos que queramos determinar la ubicación mediante geolocalización. En este caso sensor = true

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

En el caso que utilizamos una conexión segura ( https ) el enlace hacia el JavaScript externo es:

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>

Google recalca la importancia de utilizar una clave API ( API key ) de esta manera:

<script src = "http://maps.googleapis.com/maps/api/js?key=claveAPI&sensor=false"></script>

Utilizar una clave API ( individual ) nos permite monitorizar el uso de mapas Google, y permite a Google contactarnos si fuera necesario. Es importante una clave API en producción pero para practicar podemos prescindir de ella. Para conseguir su claveAPI consulte con Google.

En el JavaScript

Además del JavaScript externo, tenemos que escribir un poco más de JavaScript.
Vamos a escribir una función que inicializa el mapa ( initialize() ), y a la que llamamos cuando la ventana se haya cargado:

google.maps.event.addDomListener(window, 'load', initialize);


// es importante declarar la variable mapa!						
var mapa;

function initialize() {
    var opcionesDeMapa = {
      zoom: 8,
      center: new google.maps.LatLng(41.3887900, 2.1589900),
      mapTypeId: google.maps.MapTypeId.HYBRID //SATELITE, HYBRID, ROADMAP, TERRAIN
    };
    // instancia un nuevo objeto Map
    mapa = new google.maps.Map(document.getElementById("mapa"), opcionesDeMapa);
  }
  // inicializa el mapa cuando la ventana se haya cargado:
google.maps.event.addDomListener(window, "load", initialize);
La función Initialize()

Para inicializar el mapa hay que crear un objeto que llamamos opcionesDeMapa, y después, utlizando las propiedades de opcionesDeMapa podemos crear un nuevo mapa en el <div id="mapa">

Opciones de mapa

Este es un listado con todas las propiedades del objeto opcionesDeMapa: - una instancia de MapOptions
Dos de estas propiedades son obligatorias:

zoom: Puede ser un número entre 0 y 21. Define el zoom inicial del mapa.
center: Inicialmente el mapa está centrado en este punto. Puede definirse como:


// 1. nueva instancia de LatLng							
center: new google.maps.LatLng(41.3887900, 2.1589900)
// 2. creando un objeto que contenga la latitud y la longitud del punto
center: {lat:41.3887900, lng: 2.1589900}
// 3. sea cual sea su orden
center: {lng: 2.1589900, lat:41.3887900}

Otra propiedad importante es:

mapTypeId: Puede tomar una de estas valores: HYBRID, ROADMAP, SATELLITE y TERRAIN, y coinciden con los ajustes habituales de un mapa de Google.
El valor por defecto es ROADMAP.

El objeto mapa

Para crear un nuevo mapa hay que crear una nueva instancia de Map.
El objeto opcionesDeMapa junto con el <div id="mapa"> servirá para instanciar el objeto mapa.

var mapa = new google.maps.Map( document.getElementById("mapa"), opcionesDeMapa );

Vea un ejemplo: mapa de Google centrado en Barcelona. El tipo de mapa: TERRAIN