Está en la página 1de 29

Mapas y Marcadores

Ing. Mayenka Fernndez Chambi


Universidad Nacional del Altiplano Maestra en Informtica. Mencin: Ingeniera de Software
02/07/2011

mayenkaf@gmail.com

02/07/2011

Agenda
El Reto Tomado Decisiones Soluciones Crear Tabla. Crear XML. Crear Mapa. Conclusiones

02/07/2011

El reto:
Utilizar el API de Google Maps para generar mapas en los que se pueda mostrar informacin turstica; pudiendo esta ser referentes a:
Lugares Tursticos. Restaurantes. Hoteles.

Aplicar un marco de Trabajo gil, SCRUM para el desarrollo del mismo.

02/07/2011

Tomando Decisiones:
Generar un primer Mapa, con informacin de Hoteles. Objetivo del Primer Spring de SCRUM:
x Liberar una Pgina Web con un Mapa de la ciudad de Puno, donde se marquen los hoteles registrados en una Base de Datos y que adems permita una bsqueda por categoras.

02/07/2011

Primer Problema:
Y cmo se generan Mapas en Google?
x Parece complicado.

Y cmo se enlazan con una Base de Datos?


x Parece complicado.

Habr informacin en espaol?


x Parece complicado.

02/07/2011

Primera Solucin:
Google Maps tiene tutoriales en Espaol, el que nos serva titulaba: Uso de PHP/MySQL con Google Maps
Pamela Fox, equipo de Google Geo Con contribuciones de Lary Stucker, desarrollador del API de Google Maps Abril de 2007

Se desarrolla un mapa con ubicaciones de bares y restaurantes en la ciudad de Seatle, WA que se encuentran en una tabla.

02/07/2011

Salida del Tutorial:

02/07/2011

Pasos Principales del tutorial:


1. Crear una BD y una Tabla en MySQL. 2. Mapear la Tabla en XML con PHP. 3. Crear la pgina con el Mapa.

02/07/2011

Aplicando el Tutorial a Puno


Una vez que se comprendi y analiz todo el cdigo del tutorial, se gener cdigo con los datos del problema de los hoteles para la ciudad de Puno.

02/07/2011

02/07/2011

1. Crear la Base de Datos y Tabla


CREATE TABLE `hotel` ( `id` int( 11 ) NOT NULL AUTO_INCREMENT , `name` varchar( 60 ) NOT NULL , `address` varchar( 80 ) NOT NULL , `telephone` varchar( 10 ) NOT NULL , `url` varchar( 50 ) NOT NULL DEFAULT 'www.direccion.com.pe', `lat` float( 10, 6 ) NOT NULL , `lng` float( 10, 6 ) NOT NULL , `type` varchar( 30 ) NOT NULL , PRIMARY KEY ( `id` ) ) ENGINE = MYISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT =7;

La Tabla tiene la siguiente estructura:

02/07/2011

2. Mapear la Tabla en XML con PHP


Por qu XML? Google Maps recupera a travs de llamadas Asncronas de JavaScript (AJAX) los datos que va mapear el Mapa. Ojo. Los datos en XML pueden ser estticos (un archivo .xml) o dinmicos que los genera un CGI.

02/07/2011

Cmo debe quedar el XML?


<hoteles> <hotel name=Sonesta Posada Del Inca address=Sesquicentenario 610, Sector Huaje telephone=051-364111 url=http://www.sonesta.com/LakeTiticaca lat=-15.824111 lng=-70.005142 type=Estrellas4/> </hoteles>

02/07/2011

2. Mapear la Tabla en XML con PHP


$dom=new DOMDocument("1.0"); $node=$dom->createElement("hoteles"); $parnode=$dom->appendChild($node); Abrir la Base de Datos, realizar la consulta y while($row=@mysql_fetch_assoc($result)){ $node=$dom->createElement("hotel"); $newnode=$parnode->appendChild($node); $newnode->setAttribute("name",$row['name']); $newnode->setAttribute("address",$row['address']); $newnode->setAttribute("telephone",$row['telephone']); $newnode->setAttribute("url",$row['url']); $newnode->setAttribute("lat",$row['lat']); $newnode->setAttribute("lng",$row['lng']); $newnode->setAttribute("type",$row['type']); } echo $dom->saveXML();

02/07/2011

3. Crear la pgina con el Mapa


Las llamadas a la API se realizan con JavaScript y se cargan a una funcin de carga o respuesta a un click de un elemento HTML. <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 800px; height: 600px"></div> </body>

02/07/2011

3. Crear la pgina con el Mapa V2


function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(-15.840564,-70.028143), 14); GDownloadUrl("phpsqlajax_xml.php", function(data) { var xml = GXml.parse(data); var hoteles = xml.documentElement.getElementsByTagName("hotel"); for (var i = 0; i < hoteles.length; i++) { var name = hoteles[i].getAttribute("name"); var address = hoteles[i].getAttribute("address"); var telephone=hoteles[i].getAttribute("telephone"); var url=hoteles[i].getAttribute("url"); var type = hoteles[i].getAttribute("type"); var point = new GLatLng(parseFloat(hoteles[i].getAttribute("lat")), parseFloat(hoteles[i].getAttribute("lng"))); var hotel = createHotel(point, name, address, telephone, url, type); map.addOverlay(hotel); } }); } }

02/07/2011

CENTER : Coordenadas de la Plaza de Armas Puno ciudad. (-15.840564,-70.028143)

02/07/2011

3. Crear la pgina con el Mapa V2


ICONO MARCADOR: var iconBlue = new GIcon(); iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; iconBlue.iconSize = new GSize(12, 20); iconBlue.shadowSize = new GSize(22, 20); iconBlue.iconAnchor = new GPoint(6, 20); iconBlue.infoWindowAnchor = new GPoint(5, 1); ENLACE ICONO CON EL ATRIBUTO XML var customIcons = []; customIcons["Estrellas4"] = iconBlue;

02/07/2011

3. Crear la pgina con el Mapa V2


MARCADOR Y LISTENER
function createHotel(point, name, address, telephone, url, type) {

var marker = new GMarker(point, customIcons[type]); var html = "<b>" + name + "</b> <br/>" + address + "<br/> Telefono: "+telephone + "<br/><a href='" + url+ "'>" + url + "</a>"; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; }

02/07/2011

02/07/2011

Diferencias V2 y la V3
La versin 2 del API para JavaScript proporcionaba una funcin GDownloadUrl incorporada que inclua esta funcin, sin embargo, la versin 3 del API, que se ha diseado para ser compacta, no ofrece una funcin envoltorio equivalente. Por lo tanto hay que generar cada funcin necesaria para las escuchas de los eventos AJAX y llamadas XML.

02/07/2011

3. Crear la pgina con el Mapa V3


function load() { var map = new
google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-15.840564,-70.028143),

zoom: 14, mapTypeId: 'roadmap' });

02/07/2011

3. Crear la pgina con el Mapa V3


downloadUrl("phpsqlajax_xml.php", function(data) { var xml = parseXml(data); var hoteles = xml.documentElement.getElementsByTagName("hotel"); for (var i = 0; i < hoteles.length; i++) { var name = hoteles[i].getAttribute("name"); var address = hoteles[i].getAttribute("address"); var telephone=hoteles[i].getAttribute("telephone"); var url=hoteles[i].getAttribute("url"); var type = hoteles[i].getAttribute("type"); var point = new google.maps.LatLng( parseFloat(hoteles[i].getAttribute("lat")), parseFloat(hoteles[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address + "<br/> Telefono: "+telephone + "<br/><a href='" + url+ "'>" + url + "</a>";

var icon = customIcons[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); bindInfoWindow(marker, map, infoWindow, html);

});

02/07/2011

3. Crear la pgina con el Mapa V3


ICONOS MARCADORES: var customIcons = { Estrellas4: { icon:'http://labs.google.com/ridefinder/images/mm_20_blue.png', shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' }, {}; FUNCION LISTENER: function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); }

02/07/2011

02/07/2011

Incluyendo el buscador al Mapa


Se ha incluido un combobox con alternativas de bsqueda por categora y un botn que llama a un evento loadMapa, quien volver a generar un mapa con los marcadores adecuados. loadMapa, recupera un archivo XML segn la categora buscada.

02/07/2011

02/07/2011

Conclusiones:
API de Google Maps es una biblioteca sencilla de usar, hay que aprender a utilizar cada una de sus bondades. Es una oportunidad importante para desarrollos con mayor dinamismo en la web. Tendencias a los Web Services.

02/07/2011

Gracias

Preguntas?