Viernes, 25 Mayo 2018

Google Maps - Primeros pasos

Vamos a crear un mapa simple, con los controles básicos, que podemos colocar en cualquier página web.

 

Índice

 

Antes de empezar

Lo primero que hay que hacer es registrarse en google para conseguir una clave. Para el registro es necesario tener una cuenta gmail.

Una vez conseguida la clave podemos empezar a programar. En la cabecera de nuestra página web ponemos (sustituyendo ABCD por la clave obtenida anteriormente):

<script src= "http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABCD"
type="text/javascript"></script>

Para dibujar el mapa añadimos el siguiente código en la parte de la página que queramos que aparezca el mapa (no olvides darle un tamaño al mapa o no se verá nada):

<div id="map" style="width: 300; height: 300 "></div>

Por último, modificamos el tag <body> para que cargue el mapa de google al cargar la página y lo descargue al cerrar la página:

<body onLoad="load()" onUnload="GUnload()">

La función GUnload es propia de google y no necesitamos definirla, pero la función load sí que debemos escribirlas nosotros. Dependiendo de lo que pongamos en ésta función, nuestro mapa será más o menos complejo. Una vez implementada la función, ya tendremos el mapa en nuestra página web.

[Arriba]

 

Crear un mapa simple

Crearemos un mapa lo más sencillo posible. Para esto añadiremos en la cabecera de nuestra web el siguiente código:

<script type="text/javascript">
  function load() {
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(0,0), 0);
    }
  }
</script>

Este código define la función load, que será llamada cuando se cargue la página. La función comprueba si el navegador web es compatible con google maps (GBrowserIsCompatible()), asigna el mapa al objeto definido como map y establece el centro del mapa. De momento no es necesario saber cómo funciona la función setCenter.

Con esto ya tenemos un mapa que se puede arrastar con el ratón. El resultado lo podéis ver aquí.

[Arriba]

 

Añadir controles

Podemos añadir varios tipos de controles a nuestro mapa. Para esto sólo hace falta añadir la siguiente línea de código en nuestra función:

map.addControl(new tipo_de_control());

donde tipo_de_control puede ser uno de los siguientes:

  • GLargeMapControl: control expandido para modificar el zoom y la posición del mapa
  • GSmallMapControl: control para modificar el zoom y la posición del mapa
  • GSmallZoomControl: control reducido para modificar el zoom
  • GScaleControl: leyenda con la escala actual del mapa
  • GMapTypeControl: control para cambiar el tipo de mapa (mapa, satélite o híbrido)
  • GOverviewMapControl: crea un minimapa en la esquina inferior derecha. Este mapa se moverá en relación al mapa principal y viceversa

Esta línea se puede añadir una o varias veces dentro de nuestra función, como se puede ver en el siguiente ejemplo.

[Arriba]

[Siguiente: Añadir marcas]