Como insertar y mostrar los mapas de Google en las páginas web

Insertar en las páginas web mapas de Google Maps o Google Earth, pueden ser muy útiles para añadirle funcionalidad, interactividad, dinamismo y atractivo, ya sea mostrando la ubicación geográfica del usuario que acceda a la pagina o una zona determinada.
Es posible con este método aprovechar toda la funcionalidad que ofrecen estos mapas, como desplazarse por ellos, hacer zoom, insertarles marcadores, vínculos a páginas, así como escoger el tipo de mapa necesario.
Google Maps permite los modos Mapa que muestra los datos mediante diagramas de la forma clásica, Satélite que consiste en una unión de diferentes fotos satelitales o hibrido que es una mezcla de los modos anteriores.

Obtener una clave API AJAX para acceder a los servicios de Google

Para usar los mapas de Google el único requisito es poseer una clave API AXAJ, es un código que se puede obtener gratis realizando la solicitud a la siguiente dirección: Google Code, solo es necesario para ello poseer una cuenta de Google, la gestión no llevará más de un minuto.
Los siguiente ejemplos detallan el uso de una clave API V2
La clave obtenida se debe insertar en el área del HEAD de la página de la siguiente forma:

<script type="text/javascript" 
src="http://www.google.com/jsapi?key=CODIGO-PERSONAL"></script>

Al cargar la página se comprobará rápidamente la clave y se obtendrán los permisos necesarios para cargar el o los módulos que se deseen utilizar.
En los códigos de los ejemplos que se muestran más abajo se cargan los módulos maps y earth que permiten representar los mapas de Google Maps y Google Earth.
Otros módulos disponibles son: search para búsquedas, feeds, language para idiomas, gdata para datos, visualization y friendconnect para los servicios correspondientes.

Como insertar los mapas en las páginas

En este artículo se detallan las formas elementales de insertar dichos mapas, se muestra la vista previa y a continuación el código necesario, el que se debe insertar en el código HTML o código fuente de la página donde se desean mostrar.
En cada ejemplo solo es necesario modificar los siguientes parámetros:

El código Javascript se puede usar en cualquier lugar de la página, pero para optimizar la carga de la misma lo ideal es insertarlo al final, antes del cierre de la etiqueta </body>
El lugar exacto donde se va a representar el mapa se define con la etiqueta que contiene el identificador ID, por ejemplo:

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

La etiqueta STYLE incluida en dicho contenedor define el tamaño del mapa, así como el color y forma del borde, se pude personalizar al gusto de cada cual.

---

Ejemplos y códigos para insertar Google Maps en las páginas web

1- Mapa simple sin controles

El primer ejemplo muestra como insertar un mapa sencillo, el más simple, solo sustituye en el código los datos como se explicó anteriormente.
El tamaño se puede definir cambiando los valores ancho (width) y alto (height) en el contenedor que se debe colocar en el lugar exacto donde desea mostrar el mapa. El zoom usado en este caso es 4
En todos los ejemplos de esta página se utiliza un botón como evento para cargar los mapas, con el objetivo que no retrasen la carga de la página.
En los códigos no sucede así, se incluye en el script la función "onload" para que el mapa cargue automáticamente en la página donde se inserte, y no sea necesario esperar por la intervención del usuario.
Codigo:
<script type="text/javascript"> //<![CDATA[ google.load('maps', '2', {callback:simple});var map; function simple(){ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map1")); map.setCenter(new GLatLng(20.0972, -81.6503), 4);}} window.onload=function(){simple();} //]]> </script> <div id="map1" style="width:360px;height:200px;border:2px solid blue;"></div>

---

2- Mapa simple con controles y opciones adicionales

El segundo ejemplo es similar, pero en este caso se agregan los controles de zoom y mover, así como los botones para otras opciones diferentes de mapas, también se usa un nivel de zoom mayor, en este caso el 7.
Codigo:
<script type="text/javascript"> //<![CDATA[ google.load('maps', '2', {callback:simple2});var map; function simple2(){ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map2")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(22.5200,-82.1100),7);}} window.onload=function(){simple2();} //]]> </script> <div id="map2" style="width:360px;height:200px;border:2px solid green;"></div>

---

3- Mapa con marcadores

En el tercer ejemplo se agregan dos marcadores, cada uno tiene una descripción y el primero incluso un vínculo para dar a la opción de acceder a una página web externa, funcionan al usuario dar un clic en ellos. Al usar marcadores y especificar en ellos correctamente los parámetros, no es necesario definir la ubicación y el nivel de zoom del mapa, se ajustará de forma automática.
Codigo:
<script type="text/javascript"> //<![CDATA[ google.load('maps', '2' {callback:simple3});var map; function simple3(){ if (GBrowserIsCompatible()) { function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html);}); return marker;} var map = new GMap2(document.getElementById("map3")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(23.1311,-82.3726),13);} var point = new GLatLng(23.1351,-82.3598); var marker = createMarker(point,'<div style="width:240px">El Capitolio de la Habana <a href="http://norfipc.com">Pagina web<\/a> con mas información<\/div>') map.addOverlay(marker); var point = new GLatLng(23.1368,-82.3816); var marker = createMarker(point,'La Universidad de la Habana') map.addOverlay(marker);} window.onload=function(){simple3();} //]]> </script> <div id="map3" style="width:360px;height:200px;border:2px solid violet;"></div>

---

4- Como mostrar en el mapa la ubicación del usuario.

Se puede también mostrar en una mapa la localización geográfica del usuario que cargue la página, para eso se utiliza la función ClientLocation que detecta la ubicación por su dirección IP. En caso de que se acceda a la página a través de un proxy se mostrará la ubicación del mismo. El siguiente ejemplo muestra el resultado y como lograrlo. En este caso se emplea el zoom 8.
Codigo:
<script type="text/javascript"> //<![CDATA[ google.load("maps", "2", {callback:localizar}); function localizar() {if (google.loader.ClientLocation) {zoom = 8; latlng = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);} var map = new google.maps.Map2(document.getElementById('map4')); map.setCenter(latlng, zoom);} window.onload=function(){localizar();} //]]> </script> <div id="map4" style="width:360px;height:200px;border:2px solid red;"></div>

---

Datos de la localización geográfica del usuario.

Se puede adicionalmente aunque no es el objetivo de este artículo, escribir en la página los datos que proporciona ClientLocation que son los siguientes:
Para eso mediante Javascript se escribe la información que devuelven todas las variables, pruébalo en el siguiente botón:

---

Ejemplo y el código para insertar Google Earth en una página web.

De forma similar a las anteriores y usando la misma clave API se puede insertar Google Earth, que ofrece una perspectiva diferente, al mostrar el globo terráqueo en 3ra dimensión.
Codigo:
<script type="text/javascript"> //<![CDATA[ google.load("earth","1", {callback:init});var ge=null;function init(){google.earth.createInstance ("map3d",initCallback,failureCallback);} function initCallback(object){ge=object;ge.getWindow().setVisibility(true);} function failureCallback(object){} window.onload=function(){init();} //]]> </script> <div id="map3d" style="border:2px solid yellow;height:240px;width:650px;"></div>

---

Crear una página web con mapas insertados, que funcione en el equipo local

No es necesario en lo absoluto tener acceso a un servidor web, para crear una página que muestre mapas diferentes, puedes tener una página en el escritorio del equipo, en ella experimentar con códigos diferentes y finalmente tener a mano todos los mapas que te interesen en un solo archivo.
Para eso descarga la plantilla siguiente a tu equipo.
Es todo, dos clics en mapa.html y tendrás a mano tus mapas personalizados.
La plantilla en su interior contiene comentarios que te ayudarán.

Descargar plantilla de una página web para insertar mapas

---

Insertar mapas de Google en las páginas web usando la API V3

En los ejemplos mostrados hasta aquí se emplea la extendida versión 2 de la API de Google para mapas. Posteriormente es liberada la versión 3 conocida como Google Maps API V3 (la versión 2 sigue completamente funcional).
Ofrece más rendimiento y rapidez en la carga de los mapas, diseñada con el objetivo de suplir las limitaciones de hardware de los dispositivos móviles y debido a la enorme demanda de mapas en teléfonos Smartphone como los Android y Iphone entre otros.
Para obtener una clave API V3 usa el siguiente vinculo: code.google.com/apis/console

Como usar la API 3 de Gooogle Maps

El código Javascript necesario para cargar mapas en las páginas web es diferente en esta versión.
Para llamar la clave API personal es necesario usar el código con un formato similar al siguiente:
• Sustituye XXX por tu clave API
• El parámetro sensor es obligatorio, es posible usar true en caso de que la aplicación que cargue el mapa use un sensor para determinar la localización del usuario.
Para crear un mapa usando la versión Google Maps API V3 usa el siguiente código:
<script type="text/javascript"> var latlng = new google.maps.LatLng(23.1411, -82.487); var myOptions = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapa"), myOptions); </script> <div id="mapa" style="width:512px;height:256px;"></div>
MapTypeId define el tipo de mapa a cargar, pueden usarse los siguientes valores: En este caso no se muestra ningún mapa de ejemplo, para evitar conflictos al usar dos API diferentes en la misma página.
Más información sobre el uso de la API 3 de Gooogle Maps, puedes encontrarla en: code.google.com/

---

Mas información y toda la documentación de las API de Google puedes encontrarlas en: ✔ code.google.com

Paginas relacionadas en este sitio