Google maps infowindow JSON problem - json

Question

I have recently set up a mobile version of my site and am having a little trouble with the Google Maps V3 infowindows on the mobile version.
I am trying to add some data from my JSON file to appear in the infowindows. I am totally new to JSON and javascript as well really.
Here is the content string that I have for the infowindows on my main desktop site which is working perfectly.
var contentString = '<div align="left"><p style="color:#000000;"><a href="http://publicaccessgolf.com.au/' + data.course[i].slug + '" >' + data.course[i].name + '</a><br />' + data.course[i].address + '<br />' + data.course[i].contact + '</p></div>';
I want to add this to my mobile site but it will not work, the map either doesn’t display at all or there are no markers displayed.
Here is part of the code for my mobile site
function addMarker(map, position){
var marker = $('#map_canvas').gmap('addMarker', { 'position': position });
var contentString = 'Need to add info in here...' ;
var infoWindow = $('#map_canvas').gmap('addInfoWindow', { 'position':marker.get(0).getPosition(), 'content': contentString });
marker.click(function() {
infoWindow.get(0).open(map, marker.get(0));
map.panTo(marker.get(0).getPosition());
});
}
Any ideas why the code from the normal site would not be working??

Answer 1

Could there be problems with the content, e.g. an apostrophe in data.course[i].name?
Have you tried just doing this (to replace your marker.click() function):
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(contentString);
infoWindow.open(map, this);
map.panTo(marker.get(0).getPosition());
});

Answer 2

You can access the data of a google.maps.data layer added as geoJson just by calling event.feature.getProperty('nameofproperty'). Where 'nameofproperty' could be numer or string (the name of property in your geoJson-file).
Here a simple example I'm using that works fine:
//Load mapdata via geoJson
myDataLayer = new google.maps.Data();
myDataLayer.loadGeoJson("myData.geojson");
var featureStyle = {
icon: "mm_purple.png"
};
myDataLayer.setStyle(featureStyle);
myDataLayer.setMap(map);
//listen for click events and show infowindow
var infoWindow = new google.maps.InfoWindow();
myDataLayer.addListener('click', function(event) {
infoWindow.setContent('first property: '+ event.feature.getProperty('myfirstproperty') +'<br /> second proporty: '+ event.feature.getProperty('mysecondproperty') +
'<br /> last property: '+ event.feature.getProperty('mylastproperty'));
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
});