2011-09-20 5 views
0

J'ai récemment mis en place une version mobile de mon site et j'ai un peu de mal avec les infowindows Google Maps V3 sur la version mobile. J'essaie d'ajouter des données de mon fichier JSON pour apparaître dans les infowindows. Je suis totalement nouveau à JSON et javascript aussi bien. Voici la chaîne de contenu que j'ai pour les infowindows sur mon site de bureau principal qui fonctionne parfaitement.Google maps infowindow Problème JSON

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

Je veux ajouter à mon site mobile, mais il ne fonctionnera pas, la carte ne soit affiche pas du tout ou il n'y a pas de marqueurs affichés. Voici une partie du code pour mon site mobile

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

Toutes les idées pourquoi le code du site normal ne travaillerais pas ??

Répondre

0

Pourrait-il y avoir des problèmes avec le contenu, par ex. une apostrophe dans data.course [i] .name?

Avez-vous essayé de faire tout cela (pour remplacer votre fonction marker.click()):

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

Non, je ne le pense pas, parce qu'il travaille pour le site principal de bureau. Je pense que c'est juste un problème avec la syntaxe de la variable contentString pour le site mobile. Si ça a du sens? – user537137

+0

Ah désolé j'ai raté ce détail. Pas encore d'expérience avec des cartes sur mobile, donc pas d'idée. Je suggérerais peut-être d'abandonner le plugin gMap et juste de faire tout le JS vous-même. – duncan

+0

Ne peut pas faire, n'aurait pas la moindre idée par où commencer. Le plugin gMap fait du bon travail, je n'arrive pas à trouver comment obtenir le contenu dans l'infowindow – user537137

0

Vous pouvez accéder aux données d'une couche de google.maps.data ajoutée comme GeoJSON simplement en appelant événement. feature.getProperty ('nom de la propriété'). Où 'nameofproperty' pourrait être numer ou string (le nom de la propriété dans votre fichier geoJson).

Voici un exemple simple j'utilise cela fonctionne très bien:

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