Google Maps Infowindow JSON проблема

Question

Я недавно настроил мобильную версию своего сайта, и у меня возникли небольшие проблемы с информационными окнами Google Maps V3 для мобильной версии. Я пытаюсь добавить некоторые данные из моего файла JSON для отображения в информационных окнах. Я совершенно новичок в JSON и Javascript, а на самом деле. Вот строка содержимого для информационных окон на моем главном рабочем столе, которая отлично работает.

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>';

Я хочу добавить это на свой мобильный сайт, но он не будет работать, карта либо вообще не отображается, либо не отображаются маркеры. Вот часть кода для моего мобильного сайта

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());
    });
}

Есть идеи, почему код с нормального сайта не будет работать?

Answer 1

Вы можете получить доступ к данным слоя google.maps.data, добавленного как geoJson, просто вызвав event.feature.getProperty ('nameofproperty').Где nameofproperty может быть числом или строкой (имя свойства в вашем файле geoJson).

Вот простой пример, который я использую, который отлично работает:

//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);
    });

Answer 2

Могут ли быть проблемы с контентом, например, апостроф в data.course [i] .name?

Вы пытались просто сделать это (чтобы заменить функцию marker.click ()):

google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(contentString);
        infoWindow.open(map, this);
        map.panTo(marker.get(0).getPosition());
});