Sanjuu, el Blog » Internet http://blog.sanjuu.net Viajes por la cibergalaxia Mon, 28 Mar 2011 17:28:17 +0000 en hourly 1 http://wordpress.org/?v=3.1 Creando un directorio con el API de Google Maps http://blog.sanjuu.net/2009/06/24/creando-un-directorio-con-el-api-de-google-maps/ http://blog.sanjuu.net/2009/06/24/creando-un-directorio-con-el-api-de-google-maps/#comments Wed, 24 Jun 2009 09:13:16 +0000 Sanjuu http://blog.sanjuu.net/?p=287 El API de Google Maps nos permite infinidad de posibilidades para construir nuestros propios mapas e incrustarlos en nuestra web o blog. Sólo se requieren ciertos conocimientos de codificación en JavaScript y estar familiarizado con la Programación Orientada a Objetos. El uso de este API es totalmente gratuito y lo único que requieren es un registro de una clave de API para poder usarla.

Una de las posibilidades más genericas, sencillas y útiles puede ser la creación de un directorio que muestre comercios, locales, restaurantes, bares, teatros, cines... en una determinada ciudad y los localice en el mapa. Dicho directorio constaría de 2 ficheros, un html para el mapa y un xml con la información de los locales:

El fichero HTML es el que genera el mapa mediante JavaScript

PLAIN TEXT
HTML:
  3. <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
  4. <title>Ejemplo de Google Maps API</title>
  5. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={AQUI TU API KEY DE GMAPS}&sensor=false"
  6.             type="text/javascript"></script>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.    
  10.     var cm_mapMarkers = [];
  11.     var cm_mapHTMLS = [];
  12.     var map;
  13.    
  14.     function cm_markerClicked(markerNum) {
  15.         cm_mapMarkers[markerNum].openInfoWindowHtml(cm_mapHTMLS[markerNum]);
  16.         //SI QUEREMOS CENTRAR EL MAPA EN EL PUNTO EN EL CUAL HACEMOS CLICK DESCOMENTAMOS LA SIGUIENTE LINEA
  17.         //map.setCenter(cm_mapMarkers[markerNum].getLatLng(), 12);
  18.     }
  19.  
  20.  
  21.     function cm_createMarker(punto,nombre,html) {
  22.         var markerOpts = {};       
  23.         markerOpts = {
  24.             "clickable": true,
  25.             "labelText": nombre
  26.         };
  27.       var newPoint = punto;
  28.       var marker = new GMarker(newPoint, markerOpts);
  29.         GEvent.addListener(marker, "click", function() {
  30.             marker.openInfoWindowHtml(html);
  31.            
  32.         });
  33.         return marker;
  34.     }
  35.  
  36.  
  37.  
  38.     function load(){
  39.           map = new GMap2(document.getElementById("map"));   
  40.           map.setCenter(new GLatLng(37.173452, -3.600104), 12);   
  41.           map.addControl(new GLargeMapControl());
  42.         
  43.          GDownloadUrl("markers.xml", function(data){
  44.             var xml = GXml.parse(data);
  45.             var markers = xml.documentElement.getElementsByTagName("marker");
  46.             var divR = document.getElementById("marcas");
  47.             var marcas = new Array(markers.length);
  48.             for (var i = 0; i <markers.length; i++){
  49.                 var name = markers[i].getAttribute("nombre");
  50.                 var address = markers[i].getAttribute("direccion");
  51.                 var city = markers[i].getAttribute("localidad");
  52.                 var html = "<b>" + name + "</b><br/>" + address + "<br/>" + city;
  53.                 var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
  54.                                       parseFloat(markers[i].getAttribute("lng")));
  55.                                       
  56.                 var marker = new cm_createMarker(latlng,name,html); //, {icon: newIcon});   
  57.                 map.addOverlay(marker);
  58.                 cm_mapMarkers.push(marker);
  59.                 cm_mapHTMLS.push(html);
  60.                
  61.                 var markerA = document.createElement("a");
  62.                 markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
  63.                 var sidebarText= name;
  64.                 markerA.appendChild(document.createTextNode(sidebarText));
  65.                 divR.appendChild(markerA);
  66.                 divR.appendChild(document.createElement("br"));   
  67.             }
  68.         });   
  69.    }
  70. //]]>
  71. </script>
  72. </head>
  73. <body onload="load()" onunload="GUnload()">
  74. <div id="map" style="float:left;border: 1px black solid; width: 700px; height: 500px"></div>
  75. <div id="marcas" style="margin-left:720px;text-align:left"><b>Lista de Locales</b>:<br></div>
  76.  
  77. </body>
  78. </html>

El siguiente fichero XML (markers.xml) guarda la información de los puntos a representar en el mapa, hay que respetar la estructura.

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="ISO-8859-1"?>
  2.  
  3. <markers>
  4.     <marker nombre="Sugarpop" direccion="Gran Capitán 25" localidad="18002, Granada" lat="37.1774" lng="-3.60538"/>
  5.     <marker nombre="Sala El Tren" direccion="Ctra. Antigüa de Málaga s/n" localidad="18015, Granada" lat="37.190859" lng="-3.635616"/>
  6.     <marker nombre="Booga Club" direccion="C/ Santa Bárbara, 3" localidad="18001, Granada" lat="37.182939" lng="-3.603344"/>
  7.     <marker nombre="Los Nogales" direccion="Camino Puente Palo s/n" localidad="181894, Granada" lat="37.148603" lng="-3.633707"/>
  8.     <marker nombre="Planta Baja" direccion="C/ Horno Abad 11" localidad="18002, Granada" lat="37.176400" lng="-3.604213"/>
  9.     <marker nombre="Organ Jazz" direccion="Carretera de Sierra Nevada 100" localidad="18190, Cenes de la Vega" lat="37.1584" lng="-3.5359"/>
  10.     <marker nombre="La Telonera" direccion="C/ Londres" localidad="18100, Armilla" lat="37.148" lng="-3.62272"/>
  11.     <marker nombre="Pub Warhol" direccion="C/ San José, 69" localidad="18650, Dúrcal" lat="36.9921" lng="-3.57021"/>
  12.     <marker nombre="Sala Who" direccion="C/ Dr. Guirao Gea" localidad="18012, Granada" lat="37.186401" lng="-3.604975"/>
  13. </markers>

Finalmente aquí tenemos el resultado. Como se puede ver con pocas líneas de código se consiguen cosas bastante interesantes. Guiándonos con la referencia completa del API y con un poco de imaginación será muy fácil conseguir lo que queramos.

Comparte esta entrada:
  • Facebook
  • Google Bookmarks
  • Twitter
  • Live
  • Yahoo! Bookmarks
  • Digg
  • Tumblr
  • del.icio.us
  • Technorati
  • LinkedIn
  • email
  • RSS
  • Print
]]> http://blog.sanjuu.net/2009/06/24/creando-un-directorio-con-el-api-de-google-maps/feed/ 0