Display pod list from markers on Google Map (from XML)
Hi everyone, I've been playing around with pods a lot lately to build a German directory for E-Bike/Pedelec shops & rentals. So far I like it a lot!
Following <a href="http://code.google.com/intl/en/apis/maps/articles/phpsqlsearch_v3.html">this tutorial by Google</a> I managed to build a simple store locator (here it is, try typing in "koeln" right above the google map) that shows pods by distance from a given address.
Below the map you see a list of all pod entries that right now has nothing to do with the results above. Their layout is determined by a pod template, so I don't want to rebuild that by expanding Google's Java Script.
Now here's the question that's been bugging me for days now: As Google compiles the "id"s of database/pod entries matching the search query to display the markers, would it be possible to have a pod listing based on those ids at the same time?
The search form (which is not a form field, just a div with input types) utilizes Google's "searchLocations()" via onclick:
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 + ' brachte leider kein Ergebnis. Versuchen Sie es mit einer anderen Ortsangabe.');
}
});
}
I tried to simply grab the "addressInput" value to have respective pods listed but that doesn't seem to work since I'm not using a form. WHen I do the entry results in a page reload which causes the map script to mess up...
Thanks for any suggestions, links etc.
Piet
2 Answers
Yes, you can do it. To make it happen, you'll need to enclose your results area in a div, then add code to your JavaScript function SearchLocactionsNear() that rewrites the data in that DIV using the results from your search.
In my mind, the easiest way would be to create a new php ajax handler file that queries pods, and returns your information as a single string of HTML formatted text. You can then use the Javascript DOM methods to replace the contents of your div from the page load with the results of this search.
Thanks a lot for giving me hints & hope. ;) I will try to realize the div solution. I might be working together with someone who knows more about ajax to bring your second - more elegant - solution to life at a later stage of the project.
thx a million.
