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
-
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
-
<title>Ejemplo de Google Maps API</title>
-
<script src="http://maps.google.com/maps?file=api&v=2&key={AQUI TU API KEY DE GMAPS}&sensor=false"
-
type="text/javascript"></script>
-
<script type="text/javascript">
-
//<![CDATA[
-
-
var cm_mapMarkers = [];
-
var cm_mapHTMLS = [];
-
var map;
-
-
function cm_markerClicked(markerNum) {
-
cm_mapMarkers[markerNum].openInfoWindowHtml(cm_mapHTMLS[markerNum]);
-
//SI QUEREMOS CENTRAR EL MAPA EN EL PUNTO EN EL CUAL HACEMOS CLICK DESCOMENTAMOS LA SIGUIENTE LINEA
-
//map.setCenter(cm_mapMarkers[markerNum].getLatLng(), 12);
-
}
-
-
-
function cm_createMarker(punto,nombre,html) {
-
var markerOpts = {};
-
markerOpts = {
-
"clickable": true,
-
"labelText": nombre
-
};
-
var newPoint = punto;
-
var marker = new GMarker(newPoint, markerOpts);
-
GEvent.addListener(marker, "click", function() {
-
marker.openInfoWindowHtml(html);
-
-
});
-
return marker;
-
}
-
-
-
-
function load(){
-
map = new GMap2(document.getElementById("map"));
-
map.setCenter(new GLatLng(37.173452, -3.600104), 12);
-
map.addControl(new GLargeMapControl());
-
-
GDownloadUrl("markers.xml", function(data){
-
var xml = GXml.parse(data);
-
var markers = xml.documentElement.getElementsByTagName("marker");
-
var divR = document.getElementById("marcas");
-
var marcas = new Array(markers.length);
-
for (var i = 0; i <markers.length; i++){
-
var name = markers[i].getAttribute("nombre");
-
var address = markers[i].getAttribute("direccion");
-
var city = markers[i].getAttribute("localidad");
-
var html = "<b>" + name + "</b><br/>" + address + "<br/>" + city;
-
var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
-
parseFloat(markers[i].getAttribute("lng")));
-
-
var marker = new cm_createMarker(latlng,name,html); //, {icon: newIcon});
-
map.addOverlay(marker);
-
cm_mapMarkers.push(marker);
-
cm_mapHTMLS.push(html);
-
-
var markerA = document.createElement("a");
-
markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
-
var sidebarText= name;
-
markerA.appendChild(document.createTextNode(sidebarText));
-
divR.appendChild(markerA);
-
divR.appendChild(document.createElement("br"));
-
}
-
});
-
}
-
//]]>
-
</script>
-
</head>
-
<body onload="load()" onunload="GUnload()">
-
<div id="map" style="float:left;border: 1px black solid; width: 700px; height: 500px"></div>
-
<div id="marcas" style="margin-left:720px;text-align:left"><b>Lista de Locales</b>:<br></div>
-
-
</body>
-
</html>
El siguiente fichero XML (markers.xml) guarda la información de los puntos a representar en el mapa, hay que respetar la estructura.
-
<?xml version="1.0" encoding="ISO-8859-1"?>
-
-
<markers>
-
<marker nombre="Sugarpop" direccion="Gran Capitán 25" localidad="18002, Granada" lat="37.1774" lng="-3.60538"/>
-
<marker nombre="Sala El Tren" direccion="Ctra. Antigüa de Málaga s/n" localidad="18015, Granada" lat="37.190859" lng="-3.635616"/>
-
<marker nombre="Booga Club" direccion="C/ Santa Bárbara, 3" localidad="18001, Granada" lat="37.182939" lng="-3.603344"/>
-
<marker nombre="Los Nogales" direccion="Camino Puente Palo s/n" localidad="181894, Granada" lat="37.148603" lng="-3.633707"/>
-
<marker nombre="Planta Baja" direccion="C/ Horno Abad 11" localidad="18002, Granada" lat="37.176400" lng="-3.604213"/>
-
<marker nombre="Organ Jazz" direccion="Carretera de Sierra Nevada 100" localidad="18190, Cenes de la Vega" lat="37.1584" lng="-3.5359"/>
-
<marker nombre="La Telonera" direccion="C/ Londres" localidad="18100, Armilla" lat="37.148" lng="-3.62272"/>
-
<marker nombre="Pub Warhol" direccion="C/ San José, 69" localidad="18650, Dúrcal" lat="36.9921" lng="-3.57021"/>
-
<marker nombre="Sala Who" direccion="C/ Dr. Guirao Gea" localidad="18012, Granada" lat="37.186401" lng="-3.604975"/>
-
</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.
