Estoy trabajando sobre la API de google maps para lograr obtener en un mapa los locales mas cercanos a una dirección especifica.
Tengo 2 archivos los cuales necesito unir, por lo menos para mostrar en el mapa las marcas que tengo guardadas en una BD MySQL.
El primero es este: Que levanta un archivo PHP y me muestra las marcas de los locales
Código HTML:
<script type="text/javascript"> //<![CDATA[ function onLoad() { map = new GMap(document.getElementById("div_map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(-38.00252047431972,-57.548789978027344), 12); getMarkers(); GEvent.addListener(map, "click", function(overlay, point) { if (overlay){ // marker clicked overlay.openInfoWindowHtml(overlay.infowindow); // open InfoWindow } else if (point) { // background clicked } }); } function getMarkers(){ var urlstr="mardel.php"; var request = GXmlHttp.create(); request.open('GET', urlstr , true); // request XML from PHP with AJAX call request.onreadystatechange = function () { if (request.readyState == 4) { var xmlDoc = request.responseXML; locations = xmlDoc.documentElement.getElementsByTagName("location"); markers = []; if (locations.length){ for (var i = 0; i < locations.length; i++) { // cycle thru locations markers[i] = new GMarker(new GLatLng(locations[i].getAttribute("lat"),locations[i].getAttribute("lng"))); // Add attributes to the marker so we can poll them later. // When clicked, an overlay will have these properties. markers[i].infowindow = locations[i].getAttribute("name"); // Useful things to store on a marker (Not needed for this example, could be removed) // Tells you what index in the markers[] array an overlay is markers[i].markerindex = i; // Store the location_id of the location the marker represents. // Very useful to know the true id of a marker, you could then make // AJAX calls to the database to update the information if you had it's location_id markers[i].db_id = locations[i].getAttribute("id"); map.addOverlay(markers[i]); } } } } request.send(null); } //]]> </script>
y el Segundo archivo, el cual saqué de aca de FDW es este :
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> <script type="text/javascript"> function copiar(frm) { frm.address.value = frm.provinciaList.value+' '+frm.localidadList.value+' '+frm.t3.value; } </script> <script src="http://maps.google.com/maps?file=api&v=2&sensor=true &key=ABQIAAAA8gk0hwIezlE4Mn3qRTySDhRDenltlsPu3NYhbY395MMDhCUItBQJ2hqC4ArFSPuYFwI8jNh3EyTJog" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ // Inicialización de variables. var map = null; var geocoder = null; function load() { // Abre LLAVE 1. if (GBrowserIsCompatible()) { // Abre LLAVE 2. map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(-38.00252047431972,-57.548789978027344), 12); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GScaleControl()); geocoder = new GClientGeocoder(); //---------------------------------// // MARCADOR AL HACER CLICK //---------------------------------// GEvent.addListener(map, "click", function(marker, point) { if (marker) { null; } else { map.clearOverlays(); var marcador = new GMarker(point); map.addOverlay(marcador); //marcador.openInfoWindowHtml("<b><br>Coordenadas:<br></b>Latitud : "+point.y+"<br>Longitud : "+point.x+"<a href=http://www.mundivideo.com/fotos_pano.htm?lat="+point.y+"&lon="+point.x+"&mapa=3 TARGET=fijo><br><br>Fotografias</a>"); //marcador.openInfoWindowHtml("<b>Coordenadas:</b> "+point.y+","+point.x); document.form_mapa.coordenadas.value = point.y+","+point.x; } } ); //---------------------------------// // FIN MARCADOR AL HACER CLICK //---------------------------------// } // Cierra LLAVE 1. } // Cierra LLAVE 2. //---------------------------------// // GEOCODER //---------------------------------// function showAddress(address, zoom) { if (geocoder) { geocoder.getLatLng(address, function(point) { if (!point) { alert(address + " no se ha encontrado, si esta dirección existe y no aparece en el mapa situa manualmente el punto en el mapa haciendo click donde este la ubicación dejando los campos del formulario correctamente"); } else { map.setCenter(point, zoom); var marker = new GMarker(point); map.addOverlay(marker); //marker.openInfoWindowHtml("<b>"+address+"</b><br>Coordenadas:<br>Latitud : "+point.y+"<br>Longitud : "+point.x+"<a href=http://www.mundivideo.com/fotos_pano.htm?lat="+point.y+"&lon="+point.x+"&mapa=3 TARGET=fijo><br><br>Fotografias</a>"); // marker.openInfoWindowHtml("<b>Coordenadas:</b> "+point.y+","+point.x); document.form_mapa.coordenadas.value = point.y+","+point.x; } } ); }} //---------------------------------// // FIN DE GEOCODER //---------------------------------// //]]> </script> <script type="text/javascript" src="http://www.diariothc.com/wp-content/codes/animatedcollapse.js"></script> <script src="http://maps.google.com/maps?file=api&v=2&sensor=true &key=ABQIAAAA8gk0hwIezlE4Mn3qRTySDhRDenltlsPu3NYhbY395MMDhCUItBQJ2hqC4ArFSPuYFwI8jNh3EyTJog" type="text/javascript"></script> </head> <body onLoad="load();" onunload="GUnload();"> <form name="form_mapa" action="#" onsubmit=" showAddress(this.address.value, this.zoom.value=parseFloat(this.zoom.value)); return false"> <input id="provinciaList" type="hidden" name="provinciaList" onkeyup="copiar(this.form)" /> <select name="localidadList" id="localidadList" onclick="copiar(this.form)" /> <option>Seleccione una localidad...</option> <option>Mar del Plata</option> <option>Mar de las Pampas</option> <option>Ciudad Autonoma de Buenos Aires</option> </select> <input id="t3" type=text name="t3" onkeyup="copiar(this.form)" /> <input class="situar" type="submit" value="Situar en mapa" /> <input type="hidden" name="address" /> <input type="hidden" size="1" name="zoom" value=12 /> <div id="map" style="width: 432px; height: 300px"></div> </form> </body> </html>
El problema viene cuando en el segundo archivo, quiero meter los datos del primero, osea la función getmarkers. El mapa no se ve. sin embargo, si saco esta partesita
Código HTML:
GEvent.addListener(map, "click", function(overlay, point) {
if (overlay){ // marker clicked
overlay.openInfoWindowHtml(overlay.infowindow); // open InfoWindow
} else if (point) { // background clicked
}
});
}
Necesito que me ayuden por favor, estoy mas que atrasado con esto :(
Muchas gracias!!!!!!!!
