Al pulsar en el botón "buscar" del formulario, si la búsqueda por proximidad está activa:
Se hará una petición AJAX de tipo GET a la URL sitios.txt. La petición devolverá un String con un array de objetos en formato JSON que podéis asignar a una variable Javascript aplicando la función eval()
Después de aplicar eval() obtendréis un array de objetos. Cada objeto del array tiene las siguientes propiedades: id (identificador) lat (latitud), lon (longitud), nombre, tags (etiquetas), punGuia (puntuación de la guía), punUsuarios (puntuación dada por los usuarios).
Hay que representar gráficamente todos los sitios mediante marcadores (GMarkers), de un color o forma distinto al que representa el punto donde estamos. Al clicar en cada marcador aparecerá en un "globo" el nombre del sitio, las etiquetas que lo describen y las puntuaciones de los usuarios y de la guía, en forma de estrellas o similares. Además el nombre debe ser un enlace que lleve a "sitio.xhtml". El identificador lo ignoraremos por el momento, lo usaremos en la práctica de Java.
El mapa debe mostrarse a un nivel de zoom suficiente para que se vean todos los GMarkers, pero tampoco demasiado zoom. Echadle un vistado al método getBoundsZoomLevel de la clase GMap2. Necesitaréis calcular los límites (bounds) a partir de las coordenadas mínimas y máximas de los puntos.
sitios.txt -->
sitiosJSON = [
{id:1, lat: 38.38675, lon: -0.5115, nombre: "Bar Politécnica", tags: "bar,boinas,universidad", punGuia: 3, punUsuarios: 5},
{id:2, lat: 38.34066, lon: -0.47948, nombre: "Dársena", tags:"restaurante,arroces,caro", punGuia:4, punUsuarios:4},
{id:3, lat: 38.34602, lon: -0.48284, nombre: "El callejón", tags: "pub,clásico,barrio", punGuia:4, punUsuarios:5}
]
Por ahora tengo realizado la parte del AJAX, con este codigo saco la informacion que tengo en sitios.txt y los tengo en "arrayMap", lo que yo quiero ahora es, queda vez que yo le doy a un boton que tengo creado, que se llama "Buscar" me salga por defecto estos puntos en el mapa de Google, para echo debo pasarle los puntos y he intentado algo, pero no consigo pasarlo, este el codigo con el k estaba utilizando:
Código HTML:
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(38.384189,-0.513954), 13);
geocoder = new GClientGeocoder();
var marker = new GMarker(new GLatLng(38.384189,-0.513954),{draggable: true});
map.addOverlay(marker);
map.addControl(new GSmallZoomControl())
// Creates a marker at the given point
// Clicking the marker will hide it
function createMarker(latlng, number) {
var marker = new GMarker(latlng);
marker.value = number;
GEvent.addListener(marker,"click", function() {
var myHtml ='Nombre: '+arrayMap.nombre +'tags:'+ name.tags
+', Puntuacion Guia: '+name.punGuia +', Puntuacion Usuario: '+name.punUsuarios;
map.openInfoWindowHtml(latlng, myHtml);
});
return marker;
}
}
}
function descargaArchivo() {
// Obtener la instancia del objeto XMLHttpRequest
if(window.XMLHttpRequest) {
peticion = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
peticion = new ActiveXObject("Microsoft.XMLHTTP");
}
// Preparar la funcion de respuesta
peticion.onreadystatechange = muestraContenido;
// Realizar peticion
peticion.open('GET', 'sitios.txt', true);
peticion.send(null);//Preguntar esto
}
function muestraContenido() {
if(peticion.readyState == 4) {
if(peticion.status == 0) {//Mirar esto
arrayMap = eval(peticion.responseText);
for (i=0;i < arrayMap.length;i++) { var name = arrayMap[i];
alert( name.id+ " Latitud: " + name.lat +', longitud: ' + name.lon +', nombre:'+name.nombre +', \n\
tags:'+ name.tags +', Puntuacion Guia:'+name.punGuia +', Puntuacion Usuario:'+name.punUsuarios)};
for (var i = 0; i < arrayMap.length; i++) {
var latlng = new GLatLng((arrayMap[i].lat,arrayMap[i].log),13);
map.addOverlay(createMarker(latlng, i + 1));}
}
}
}
Código HTML:
<body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> <form name="BuquedaAvanzada" action="buscar.action" method="post" onsubmit="descargaArchivo(); return false"> <label for="kludge"></label> <input type="submit" value="Buscar" id="submit" tabindex="5" /> <input type="reset" id="reset" tabindex="6" /> </form> </body>
