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
HOla
me intereso tu articulo pero no lo implementar.
y el link http://code.google.com/intl/es-419/apis/maps/index.html esta roto.
Podras pasarme un ejemplo por mail como para que lo pueda copiar?
Muchas gracias
Silvia