espero que alguien pueda ayudarme aqui siempre me han dado mucho la mano
mi problema es el siguiente
estoy siguiendo el ejemplo del api de google para crear un localizador de tiendas
https://developers.google.com/maps/a...hpsqlsearch_v3
lo implemente tal cual y funciona correctamente, el ejemplo premite hacer una busqueda en base a unos datos en mysql luego arroja esa consulta en el mapa marcando la posicion y tambien calcula las posiciones cercanas para mostrar las tiendas alrededor dentro de un rango especifico, imagino que ya sabran como va
el PROBLEMA es que deseo agregar algo mas al ejemplo y no logro hacerlo, quiero que asi como se pintan esos datos en el mapa marcando las tiendas tambien esa respuesta que arroja el ejemplo quiero representarla en HTML mas abajo de mapa, es decir que pueda tomar esos datos y pintarlos en html mas abajo en cuadros DIVs por separado cada tienda, y asi mostrarle al cliente no solo las ubicaciones del mapa sino tambien una pequeña vista de cada tienda que se consulto
no logro hacerlo hasta ahora lo unico que logro es imprimir la consulta de todasssssss las tiendas que salieron en un solo cuadro DIV y asi no me sirve, porfavor ayuda
encontre un ejemplo que pinta lo que quiero pero no en html sino en JS y pone las tiendas a un lado del mapa pero por mas que quiero coger esa informacion aparte me imprime todo junto otra vez, es decir todas las tiendas juntas
este es el otro ejemplo:
Código:
<script type="text/javascript">
//<![CDATA[
var map;
var markers = [];
var infoWindow;
var locationSelect;
function load() {
//dibujar el mapa
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none"){
google.maps.event.trigger(markers[markerNum], 'click');
}
};
}
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++)
{
var tiendas = document.getElementById("latienda");
tiendas.innerHTML = "";
var arrays = [];
var name = markerNodes[i].getAttribute("name");
var telefono = markerNodes[i].getAttribute("telefono");
var address = markerNodes[i].getAttribute("address");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
if (i == markerNodes.length)
{
var person = [];
person[i] = name;
document.getElementById("latienda").innerHTML = person;
}
distanse= distance.toFixed(1);
var dis= document.createTextNode(distanse);
var nametienda = document.createTextNode(name);
var br = document.createElement("br");
tiendas.appendChild(br);
//tiendas.appendChild(dis);
tiendas.appendChild(nametienda);
createOption(name, distance, i);
createMarker(latlng, name, address, telefono);
bounds.extend(latlng);
//var unamatriz = [name]
//alert("name"+unamatriz);
}
map.fitBounds(bounds);
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
function createMarker(latlng, name, address, telefono) {
var html = "<b>" + name + "</b> <br/>" + address +"<br/>"+telefono;
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
//]]>
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12846745-20']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<div class="col-md-12">
<h1>OUR STORES</h1>
<div id="panel"></div>
<div id="map-canvas"></div>
</div>
