Desarrollo Web, Seo, Adsense

Sencillo Mapa de Google

Publicado el 03. ene, 2010 by jbomba in Google Maps, Javascript

El API de Google Maps te permite insertar Google Maps en tus propias páginas web. Una clave de API de Maps es válida para un único ”directorio” o dominio.

Entonces lo primero que debemos hacer es conseguir nuestra clave de API de Maps.
Registro en el API de Google Maps

Empezando
Luego que tenemos nuestro clave creamos nuestro archivo .html, y agregamos nuestra clave dentro de las cabezeras head.
La URL url+api = http://maps.google.com/maps?file=api&v=2&key=abcdefg permite acceder a la ubicación del archivo JavaScript que incluye todos los símbolos y definiciones necesarios para utilizar el API de Google Maps. Para acceder al API, la página debe contener una etiqueta script con la clave recibida durante el registro dirigido a esta dirección URL. En este ejemplo, la clave se muestra como “abcdefg”.

Continuando
Posteriormente Crearemos dos funciones Javascript, la primera funcion es la que agrega nuestro marca en el mapa y la segunda es la que cargaremos cuando nuestro documento este listo.

/*funcion secundaria*/
function addtag(point, address)
{
   var marker = new GMarker(point);
   // Para que nuestra marca se abra inmediatamente cargue el mapa
   // Si no deseas que se abra esta marca hasta que le den click, suprimir la linea siguiente
   marker.openInfoWindowHtml(address); 

  //Las siguiente lineas abren la marca al darle click al icono
   GEvent.addListener(marker, "click", function() {
       marker.openInfoWindowHtml(address);
   } );
   return marker;
}

/*funcion principal que cargaremos en el body*/
function initialize()
{
    /*Verificamos si el navegador es compatible con google maps*/
    if(GBrowserIsCompatible())
    {
     //inicializamos la clase GMap2 con el elemento que contendra nuestro mapà.
     var map = new GMap2(document.getElementById("map"));
     map.addControl(new GMapTypeControl());
     map.addControl(new GLargeMapControl());
     map.addControl(new GScaleControl());
     map.addControl(new GOverviewMapControl());
     map.setCenter(new GLatLng(8.32,-80.15), 7, G_HYBRID_MAP);
    //la siguiente linea es opcional que  en el metodo GLatLng(), hemos indicado el tipo de mapa a utilizar
     map.setMapType(G_HYBRID_MAP); //opcional
     var point = new GLatLng(9.01140,-79.526610);
     var address = '
 Mapa de Panama  Coordenadas 8.32,-80.15 con zoon 7 

 ';
     var marker = addtag(point, address);
     map.addOverlay(marker);
    }
 /*Alertamos que el navegador no es compatible*/
else
 {
 alert(' Your version browser is not compatibilty with google maps ');
 }
}

Y por ultimo dentro del body agregamos el div(elemento contenedor), donde cargaremos nuestro mapa y en el body en el metodo onload llamamos a nuestra funcion initialize, encargada de crear nuestro mapa.

body onLoad="initialize()" ...

Descarga:
Demo: Abajo

Tags: api google maps, Google Maps, maps