Integrar un mapa de Google en nuestra web, es algo realmente sencillo, siguiendo los siguientes pasos:
- Solicitar el API Key
Lo primero es solicitar nuestra API Key, debemos especificar en qué URL vamos a utilizar nuestro mapa.
Aquí tenemos una muestra del código que nos proporciona Google Maps para que utilicemos. Es importante destacar que debemos remplazar el texto resaltado en el código: COLOCAR_AQUI_NUESTRA_KEY por nuestro API Key, para que funcione correctamente.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»content-type» content=»text/html; charset=utf-8″/>
<title>Google Maps JavaScript API Example</title>
<script src=»http://maps.google.com/maps?file=api&v=2&key=COLOCAR_AQUI_NUESTRA_KEY»
type=»text/javascript»></script>
<script>
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(«map»));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
- Inicilizar las coordenadas
En el código que nos ofrece Google Maps para utilizar en nuestra web está predeterminada la ubicación de Palo Alto en Estados Unidos; pero podemos cambiarla estableciendo nuevas coordenadas. En el código siguiente establecimos la ubicación del mapa en la isla Madagascar, al sur de África:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(«map»));
map.setCenter(new GLatLng(-19.435514, 48.603516), 13);
}
}
Hasta ahí todo está muy bien, pero cómo obtenemos las coordenadas de la ubicación que deseamos. Para esto entremos a www.maps.google.es y posicionémonos donde queremos que aparezca nuestro mapa, luego copiemos el vínculo que aparece en la parte superior derecha del mapa con el texto: “Enlazar con esta página”, que sería algo como esto:
http://maps.google.es/?ie=UTF8&ll=-19.435514,48.603516&spn=17.554213,29.882813&z=5&om=1
En el parámetro ll se almacena la latitud y longitud, respectivamente, de la ubicación que estamos observando. Copiamos esos números, los pegamos en la parte del código del API que explicaba anteriormente y hemos logrado cambiar las coordenadas iniciales de nuestro mapa.
- Establecer el zoom
También podemos especificar el nivel de zoom que deseamos que tenga nuestro mapa al mostrarse. Logramos esto variando el segundo parámetro del método setCenter. Por defecto está establecido en 13, pero en el código que mostramos a continuación lo hemos establecido en 5. Mientras más pequeño sea el número más cerca estaremos del mapa.
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(«map»));
map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
}
}
- Añadir controles
Quizás nos interese que nuestro mapa tenga controles de zoom o navegación. Pues a continuación explicaremos cómo insertarlos. Simplemente agregaremos una línea dentro de nuestra instrucción IF, con el método addControl de nuestro objeto map, especificando qué tipo de control queremos insertar, como se muestra en el código:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(«map»));
map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
}
}
En el ejemplo anterior hemos agregado a nuestro mapa un selector del tipo de mapa (GMapTypeControl), un control de desplazamiento con una barra de zoom (GLargeMapControl), la escala del mapa (GScaleContro) y un mini-mapa en una esquina que nos indica la región que estamos visualizando (GOverviewMapControl). Para mayor información sobre los controles que podemos incluir vea la ayuda de la API.
- Cambiar el tipo de mapa
Con el control para seleccionar el tipo de mapa que agregamos podemos seleccionar entre: Mapa, Satélite e Híbrido; pero podemos especificar con cuál queremos que se muestre inicialmente nuestro mapa utilizando el método setMapType del objeto map, que puede tomar los valores: G_MAP_TYPE (Mapa), G_SATELLITE_TYPE (Satélite) y G_HYBRID_TYPE (Híbrido).
En nuestro código de ejemplo insertamos una línea para especificar que nuestro mapa inicie en modo Híbrido.
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(«map»));
map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.setMapType(G_HYBRID_TYPE);
}
}
- Agregar marcas
Las marcas son muy útiles para resaltar ubicaciones. Con la función GMaker() podremos crear una marca en el punto que le pasamos como parámetro y la función addOverlay() nos sirve para adicionar la marca al mapa.
En el código siguiente hemos agregado una marca en la posición -19.000514, 46.603516. Aproximadamente el centro de la isla Madagascar.
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(«map»));
map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.setMapType(G_HYBRID_TYPE);
var point = new GLatLng(-19.000514,46.603516);
map.addOverlay(new GMarker(point));
}
- Añadir etiquetas a las marcas
Siempre es útil que las marcas tengan un texto descriptivo, sobre todo cuando tenemos más de una en nuestro mapa. A continuación explicaremos cómo introducirle una descripción a nuestras marcas.
En el código siguiente utilizamos una función para agregar una etiqueta a nuestra marca. En la variable address guardamos el texto descriptivo de nuestra etiqueta y utilizando la función addtag creamos la marca en el punto point y adicionamos un listener de evento del tipo clic para que se muestre la etiqueta al hacer clic sobre la marca y finalmente agregamos la marca al mapa utilizando addOverlay().
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(«map»));
map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.setMapType(G_HYBRID_TYPE);
function addtag(point, address) {
var marker = new GMarker(point);
GEvent.addListener(marker, «click», function() {
marker.openInfoWindowHtml(address); } );
return marker;
}
var point = new GLatLng(-19.000514,46.603516);
var address = ‘<b>MADAGASCAR</b><br/><i>Centro de Madagascar</i><br /><a href=»http://www.centrodemadagascar.com»>Web del Centro de Madagascar</a>’;
var marker = addtag(point, address);
map.addOverlay(marker);
}
}
Con estos últimos retoques al código ya tenemos nuestro archivo listo para ser publicado en el servidor web.
Deja un comentario