API de Google Maps

En esta ocasión les voy a hablar sobre la API de Google Maps. Es muy común que en nuestros sitios requerimos incluir un mapa, en el cual requerimos indicar una dirección. Para esto Google dispone de un servicio de mapas (como la gran mayoría ya conoce) para ubicarnos mejor.

Pues a continuación les voy a detallar el código javascript para mostrar varios puntos en un sitio. Esto nos permitirá que nuestro mapa sea interactivo. En este ejemplo vamos a utilizar la versión 2 de la API y los pasos son los siguientes:

1. Lo primero que tenemos que hacer es registrar nuestro dominio en Google Maps aquí. Una vez registrados nos dará una llave que la usaremos como parámetro en un js que mandaremos llamar, de la siguiente manera:

<codigo>

      <script type=”text/javascript” src=”http://www.google.com/jsapi?key=ABC123”></script>

</codigo>

Esta es la forma de llamar a la API.

En donde ABC123 es el key proporcinado por Google una vez que hayamos registrado nuestro dominio.

2.  Definimos un dentro de nuestro HTML un objeto contenedor:

<codigo>

<div id="map" style="width: 500px; height: 500px"></div>

</codigo>

3. A continuación muestro el código javascript:

<codigo>

<script type="text/javascript">

      var objMarkers = {

                  "1": {

                              "lat":                 25.672086771652626,

                              "lng":                -100.31084060668945,

                              "image":                       "http://gls.agilityhoster.com/marker.png",//url icon

                              "imageWidth":  65, //width icon

                              "imgaeHeight":  43, //height icon

                              "text":               "Texto" // Puedes poner HTML para que aparezca en la burbujita

                             },

                  "2": {

                             "lat":                 19.54240050966042,

                              "lng":                -101.61632537841797,

                              "image":                       "http://gls.agilityhoster.com/marker1.png",

                              "imageWidth":  32,

                              "imgaeHeight":  32,

                              "text":               "Texto"

                             },

                  "3": {

                             "lat":                 25.572485247912066,

                              "lng":                -103.4996223449707,

                              "image":                       "http://gls.agilityhoster.com/marker2.png",

                              "imageWidth":  48,

                              "imgaeHeight":  48,

                              "text":               "Texto"

                             }

                  };

     

     

      google.load("maps", "2");

      function createMarker(place, map) {

                                                                

                  // Creamos nuestro icono

                  var defIcon = new GIcon(G_DEFAULT_ICON);

                 

                  defIcon.image = place.image;

                  defIcon.iconSize = new GSize(place.imageWidth, place.imageHeight); // tamaño del icono

                  defIcon.iconAnchor = new GPoint(10, 34);

                  markerOptions             = { icon: defIcon };

                  var point                      = new GLatLng(place.lat, place.lng);

                  var marker                   = new GMarker(point, markerOptions);

                 

                  // Agregamos un evento al marcador

                  GEvent.addListener(marker, "mouseover", function() {

                             marker.openInfoWindowHtml(place.text);

                             });

                 

                  map.addOverlay(marker);

                  }

     

      // Esta es la función que creara los marcadores

      function initialize() {

                  var map = new google.maps.Map2(document.getElementById("map"));

                 

                  map.addControl(new GLargeMapControl()); // Agregamos un control

                  map.addMapType(G_SATELLITE_MAP);

                  map.setCenter(new google.maps.LatLng(25.6574972222, -108.640675), 16); // indicamos cual será el centro de nuestro mapa

                 

                  //recorrido del objeto para crear cada marcador

                  for (var idx in objMarkers) {

                             createMarker(objMarkers[idx], map);

                             }

      }

      google.setOnLoadCallback(initialize);

</script>

</codigo>

Y listo, en caso de requerir mas ubicaciones solo tenemos que agregarlas a nuestro objeto con sus respectivas propiedades.

En caso de alguna duda puedes dejar tu comentario y con gusto te respondo.