Hola amigos, no soy de postear en el foro de Javascript, ya que mucho no entiendo, pero tengo un trabajo y la verdad no se como resolverlo.
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> funciona perfecto.
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> funciona perfecto
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
}
});
}
(Que es la que se encargar de generar las marcas en el mapa, vuelve a funcionar...)
Necesito que me ayuden por favor, estoy mas que atrasado con esto :(
Muchas gracias!!!!!!!!