Download - Maps
Mapas y MarcadoresIng. Mayenka Fernández Chambi
Universidad Nacional del AltiplanoMaestría en Informática.Mención: Ingeniería de Software
09/04/2023
09/04/2023
Agenda
•El Reto•Tomado Decisiones•Soluciones•Crear Tabla.•Crear XML.•Crear Mapa.•Conclusiones
09/04/2023
El reto:
•Utilizar el API de Google Maps para generar mapas en los que se pueda mostrar información turística; pudiendo esta ser referentes a:
▫Lugares Turísticos.▫Restaurantes.▫Hoteles.
•Aplicar un marco de Trabajo Ágil, SCRUM para el desarrollo del mismo.
09/04/2023
Tomando Decisiones:
•Generar un primer Mapa, con información de Hoteles.
•Objetivo del Primer Spring de SCRUM: Liberar una Página Web con un Mapa de la
ciudad de Puno, donde se marquen los hoteles registrados en una Base de Datos y que además permita una búsqueda por categorías.
09/04/2023
Primer Problema:
•Y cómo se generan Mapas en Google? Parece complicado.
•Y cómo se enlazan con una Base de Datos?
Parece complicado.
•Habrá información en español? Parece complicado.
09/04/2023
Primera Solución:
•Google Maps tiene tutoriales en Español, el que nos servía titulaba:
Uso de PHP/MySQL con Google MapsPamela 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.
09/04/2023
Salida del Tutorial:
09/04/2023
Pasos Principales del tutorial:
1. Crear una BD y una Tabla en MySQL.
2. Mapear la Tabla en XML con PHP.
3. Crear la página con el Mapa.
09/04/2023
Aplicando el Tutorial a Puno
•Una vez que se comprendió y analizó todo el código del tutorial, se generó código con los datos del problema de los hoteles para la ciudad de Puno.
09/04/2023
09/04/2023
1. Crear la Base de Datos y Tabla• La Tabla tiene la siguiente estructura: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;
09/04/2023
2. Mapear la Tabla en XML con PHP•Por qué XML?
Google Maps recupera a través de llamadas Asíncronas de JavaScript (AJAX) los datos que va mapear el Mapa.
Ojo. Los datos en XML pueden ser estáticos (un archivo .xml) o dinámicos que los genera un CGI.
09/04/2023
Cómo 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>
09/04/2023
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 ywhile($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();
09/04/2023
3. Crear la página con el Mapa
•Las llamadas a la API se realizan con JavaScript y se cargan a una función 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>
09/04/2023
3. Crear la página 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); } }); } }
09/04/2023
(-15.840564,-70.028143)
CENTER : Coordenadas de la Plaza de Armas –
Puno ciudad.
09/04/2023
3. Crear la página con el Mapa V2ICONO 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;
09/04/2023
3. Crear la página con el Mapa V2MARCADOR 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; }
09/04/2023
09/04/2023
Diferencias V2 y la V3
•La versión 2 del API para JavaScript proporcionaba una función GDownloadUrl incorporada que incluía esta función, sin embargo, la versión 3 del API, que se ha diseñado para ser compacta, no ofrece una función envoltorio equivalente. Por lo tanto hay que generar cada función necesaria para las escuchas de los eventos AJAX y llamadas XML.
09/04/2023
3. Crear la página con el Mapa V3function load() { var map = new
google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-15.840564,-
70.028143), zoom: 14, mapTypeId: 'roadmap' });
09/04/2023
3. Crear la página 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); } }); }
09/04/2023
3. Crear la página con el Mapa V3ICONOS 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); }); }
09/04/2023
09/04/2023
Incluyendo el buscador al Mapa•Se ha incluido un combobox con
alternativas de búsqueda por categoría y un botón que llama a un evento loadMapa, quien volverá a generar un mapa con los marcadores adecuados.
• loadMapa, recupera un archivo XML según la categoría buscada.
09/04/2023
09/04/2023
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.
09/04/2023
Gracias
¿ Preguntas?