I have a simple Google map v3 code. It creates the map and adds a marker to the markerCluster. It is all working fine, except for setting content to the infoWindow and opening it.
The function getSupplierDetails() simply returns a short string (i.e. “Red Supply”).
Here is the problem: If I hard code the text “Red Supply” to the setContent line like infoWindow.setContent("Red Supply"); then the infowindow open fine with the content.
But if I leave it as it is as in the code below the infowindow does not open at all, although the getSupplierDetails() function returns “Red Supply”.
getSupplierDetails() function returns this JSON string: {"popupContent": "Red Suppplier"} from Firebug.
Spent so long on it without any solution. Any help appreciated.
Thanks
var map;
var markerCluster;
var infoWindow;
$(document).ready(function() {
if (mapElem != null) {
var latlng = new google.maps.LatLng(54.664936, -2.706299);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(mapElem, myOptions);
markerCluster = new MarkerClusterer(map);
infoWindow = new google.maps.InfoWindow();
AddMarkers();
}
});
function AddMarkers(){
markerCluster.clearMarkers();
var marker = new google.maps.marker({position:latLng, map:map, title:"title"});
google.maps.event.addListener(marker, 'click', function() {
var res = getSupplierDetails();
infoWindow.setContent(res);
infoWindow.open(map, this);
});
markers.push(marker);
markerCluster.addMarkers(markers);
}
function getSupplierDetails() { //returns {"popupContent": "Red Suppplier"}
$.ajax({
type: 'POST',
url: "sitedetail.aspx",
dataType: 'json',
timeout: 30000,
success: function(data) {
return data.popupContent;
},
error: function(xhr, textStatus, thrownError) {
var resp = JSON.parse(xhr.responseText);
alert(resp.message);
}
});
}
1 Answer