Tengo una web con 1 mapa de google map. El como cargarlo y tal ya lo he mirado en el API de Google. Tengo un campo de búsqueda en el HTML que cuando hago "submit" le paso la dirección a la función "showAddress" y me muestra el punto que he buscado. Hasta aquí todo bien.
El problema es que después de esto tenemos que cargar otros sitios que vienen en 1 fichero de texto que tiene este contenido:
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}
]
Entonces tenemos que hacer 1 petición Ajax al fichero y con 1 array ir recorriendo el contenido y para cada sitio crear 1 nuevo GMarker con su latitud, longitud, etc... El caso, os pongo como lo he hecho yo, no sé porque pero no me funciona y cuando le doy a buscar solo me busca el sitio que he introducido en el campo de texto del "submit", pero los otros sitios que coge del fichero no los muestra en el mapa. Os explico el código:
------------------------------------------------------------------------
Cita:
------------------------------------------------------------------------<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAa2MmCbEEGF82 FVM1w7vTWRTwM0brOpm-All5BF6PoaKBxRWWERQ3DuQ56km_OevMUS6-vvBGsfMprA"
type="text/javascript"></script>
<script type="text/javascript" src="javascript.js" ></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
)
}
}
function httpObject() {
if (window.XMLHttpRequest)
{
pet = new XMLHttpRequest(); //MOZILLA, SAFARI..
}
else if (window.ActiveXObject)
{
{
pet = new ActiveXObject("Microsoft.XMLHTTP"); // IE
}
}
return pet;
}
function leerDatos()
{
if(pet.readyState == 4) //acabada
{
if (pet.status==200) //el servidor dice OK
{
return pet.responseText;
}
}
}
function setDatos(a)
{
var array = eval("("+ a +")");
for(var i=0;i<3;i++)
{
var point = new GLatLng(array[i].lat,array[i].lon);
map.addOverlay(new GMarker(point));
}
}
function llamadaProxG()
{
var pet = httpObject();
var a = pet.onreadystatechange = leerDatos;
pet.open('GET','sitios.txt',true);
pet.setDatos(a);
pet.send(null);
}
//]]>
</script>
type="text/javascript"></script>
<script type="text/javascript" src="javascript.js" ></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
)
}
}
function httpObject() {
if (window.XMLHttpRequest)
{
pet = new XMLHttpRequest(); //MOZILLA, SAFARI..
}
else if (window.ActiveXObject)
{
{
pet = new ActiveXObject("Microsoft.XMLHTTP"); // IE
}
}
return pet;
}
function leerDatos()
{
if(pet.readyState == 4) //acabada
{
if (pet.status==200) //el servidor dice OK
{
return pet.responseText;
}
}
}
function setDatos(a)
{
var array = eval("("+ a +")");
for(var i=0;i<3;i++)
{
var point = new GLatLng(array[i].lat,array[i].lon);
map.addOverlay(new GMarker(point));
}
}
function llamadaProxG()
{
var pet = httpObject();
var a = pet.onreadystatechange = leerDatos;
pet.open('GET','sitios.txt',true);
pet.setDatos(a);
pet.send(null);
}
//]]>
</script>
Ok, las funciones "initialize()" y "showAddress()" son para mostrar el mapa y un marcador con el lugar que hemos buscado en el campo de texto.
Ahora, desde el HTML llamo a la función "llamadaProxG()" que va creando el objeto httpObject ("httpObject()"), después lee los datos ("leerDatos()"), y realiza la petición. El fichero se llama "sitios.txt". Después llamo a "setDatos()" y ahí creo para cada sitio un nuevo GMarker con la sentencia "map.addOv..." ya que "map" es la variable asociada al mapa de Google.
Entonces ahí falla algo seguramente, soy bastante novato así que puede que hayan varias cosas mal
Y ya que estoy, tengo otra duda sobre cómo llamar a la función desde el HTML, lo tengo así:
<form action="#" onsubmit="showAddress(this.address.value) && llamadaProxG()">
¿esto es correcto? cuando pulse sobre el botón "Buscar" llamará a "showAddress" que muestra un GMarker con el sitio que hemos buscado, y después en teoría llamo a la otra función para que me muestre los otros sitios, pero esto no lo hace.
Pues ese es mi problema, a ver si alguien me echa 1 cable. Muchas gracias a todos! un saludo!
