Maps

Mapas y MarcadoresIng. Mayenka Fernández Chambi

Universidad Nacional del AltiplanoMaestría en Informática.Mención: Ingeniería de Software

[email protected]

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` (ì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;

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

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?

Maps

Documents

Transcript of Maps