Custom Google Maps Markers and Infowindow - google-maps

Question

I want to create a google map in which the markers I want to show are coming from database and the infowindow data comes from database as well which is different for each marker obviously. Code that I am using now is:
<script type="text/javascript">
var delay = 100;
var infowindow = new google.maps.InfoWindow();
var latlng = new google.maps.LatLng(21.0000, 78.0000);
var mapOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var bounds = new google.maps.LatLngBounds();
function geocodeAddress(address, next) {
geocoder.geocode({address:address}, function (results,status){
if (status == google.maps.GeocoderStatus.OK) {
var p = results[0].geometry.location;
var lat=p.lat();
var lng=p.lng();
createMarker(address,lat,lng);
}else {
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
nextAddress--;
delay++;
} else {}
}
next();
});
}
function createMarker(add,lat,lng) {
var contentString = add;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
bounds.extend(marker.position);
}
<?php
global $wpdb;
$results = $wpdb->get_results("select * from $wpdb->postmeta where meta_value = 'Canada'");
$num_rows = $wpdb->num_rows;
?>
var locations = [
<?php foreach ($results as $doc_meta_data) {
echo "'";// . $doc_meta_data->meta_id;
echo get_post_meta($doc_meta_data->post_id, 'address', true).",";
echo get_post_meta($doc_meta_data->post_id, 'state', true).",";
echo get_post_meta($doc_meta_data->post_id, 'country', true);
echo "',";
}?>
];
var nextAddress = 0;
function theNext() {
if (nextAddress < locations.length) {
setTimeout('geocodeAddress("'+locations[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
map.fitBounds(bounds);
}
}
theNext();
</script>
How can I add make each markers info dynamic ie, it should come from the admin panel.
URL:http://intigateqatar.com/ozone/find-a-doc/

Answer 1

You need to create infowindow in createMarker() function in order infowindows to be unique for each marker:
function createMarker(add,lat,lng) {
var contentString = add;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
bounds.extend(marker.position);
}

Answer 2

The InfoWindow's on the linked page have dynamic content(currently the address), I guess you don't need the address as content.
Currently the locations-array has the following structure.
[address1,address2,address3,....]
Request the infos and create an array with this structure:
[[address1,info1],[address2,info2],[address3,info3],....]
Change geocodeAddress() into the following:
function geocodeAddress(details, next) {
//details[0] is the address, pass it as address-property to geocode
geocoder.geocode({address:details[0]}, function (results,status){
if (status == google.maps.GeocoderStatus.OK) {
var p = results[0].geometry.location;
var lat=p.lat();
var lng=p.lng();
//details[1] is the info fetched from the DB,
//pass it as add-argument to createMarker()
createMarker(details[1],lat,lng);
}else {
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
nextAddress--;
delay++;
} else {}
}
next();
});
}
Note: echoing the single variables is not a good idea , a single-quote in either address(or the info) will result in a script-error(and there are more critical characters, e.g. linebreaks).
Populate a PHP-array with the values and use json_encode() to print the array.