API de Google Maps

Google Maps una utilidad de Google que muestra mapas de todo el planeta. Puede alternar tres clases de vista de los mapas. Satélite: Es una vista de pájaro, con fotografí­as a gran altura reales. Mapa: Un callejero/mapa de calles y avenidas o Hí­bridaque mezcla ambas opciones.

Además de poder acceder a la aplicación desde http://maps.google.com , podemos agregar la potencia de la cartografía e información del mapa en nuestro sitio web, utilizando una API publica de uso gratuito.

Para insertar y manipular el mapa desde nuestro sitio web debemos hacer lo siguiente:

Agregar una referencia al archivo JS con las funciones de la API

<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=true&language=es“></script>

Insertar un elemento en nuestro sitio, en el que se renderizará el mapa

<div id=”map_canvas”></div>

Inicializar el mapa con la siguiente función javascript:

var map;

function initialize() {

var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById(‘map_canvas’),myOptions);

}

Agregar un evento que ejecute la función anterior

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

A esta altura, tendremos nuestro mapa, pero sin ninguna funcionalidad adicional.

Con la potencia de la API de geolocalización de HTML5, podemos obtener nuestra posición actual, y ubicarla en el mapa, de la siguiente forma:

Sumamos a nuestra funcion de inicializacion el siguiente codigo

 

if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var infowindow = new google.maps.InfoWindow({map: map, position: pos, content: Tu ubicacion actual usando HTML5.’ });
map.setCenter(pos);
}, function() {
handleError(true);
});
} else {
// Si el navegador no soporta geolocalización
handleError(false);
}

y agregamos la funcion “handleError”

    function handleError(errorFlag) {

if (errorFlag) {
var content = ‘Error en el servicio de geolocalizacion.’;
} else {
var content = ‘Error: Tu navegador no soporta geolocalización.’;
}

var options = { map: map, position: new google.maps.LatLng(60, 105), content: content };
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);

}

Este es un ejemplo, hay muchos mas, y mas información ingresando en la página oficial de la API de Google Maps, http://code.google.com/intl/es-419/apis/maps/index.html