Maps

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?

Habr informacin en espaol?

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` ( ìd` int( 11 ) NOT NULL AUTO_INCREMENT , `name` varchar( 60 ) NOT NULL , àddress` varchar( 80 ) NOT NULL , `telephone` varchar( 10 ) NOT NULL , ùrl` 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 ( ìd` ) ) 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

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

MARCADOR Y LISTENER
function createHotel(point, name, address, telephone, url, type) {
var marker = new GMarker(point, customIcons[type]); var html = "" + name + " " + address + " Telefono: "+telephone + " <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

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

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 = "" + name + " " + address + " Telefono: "+telephone + " <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

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?

Maps

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Maps

Caricato da

Copyright:

Formati disponibili

Mapas y Marcadores

Ing. Mayenka Fernndez Chambi

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

Y cmo se enlazan con una Base de Datos?

Habr informacin en espaol?

Salida del Tutorial:

Pasos Principales del tutorial:

Aplicando el Tutorial a Puno

1. Crear la Base de Datos y Tabla

La Tabla tiene la siguiente estructura:

2. Mapear la Tabla en XML con PHP

Cmo debe quedar el XML?

2. Mapear la Tabla en XML con PHP

3. Crear la pgina con el Mapa

3. Crear la pgina con el Mapa V2

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

3. Crear la pgina con el Mapa V2

3. Crear la pgina con el Mapa V2

3. Crear la pgina con el Mapa V3

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

3. Crear la pgina con el Mapa V3

3. Crear la pgina con el Mapa V3

Incluyendo el buscador al Mapa

Potrebbero piacerti anche