API de Google Maps

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

[Facebook] [Google] [LinkedIn] [Twitter] [Windows Live] [Email]
Posted in HTML5, Javascript, Programacion Tagged with: , ,
One comment on “API de Google Maps
  1. Silvia says:

    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

1 Pings/Trackbacks for "API de Google Maps"
  1. […] Nota: Antes de leer lo que sigue, recomiendo repasar como utilizar la API de Google Maps […]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

ACERCA DE…

Soy desarrollador, estudiante de ingeniería en informática en UADE, trabajo como TE en el equipo de nuevas tecnologías de Microsoft Argentina, Chile y Uruguay.

Me pueden encontrar en Twitter (@AleBanzas), Facebook (/AleBanzas), o LinkedIn (/in/AleBanzas).