Les marqueurs n'apparaissent pas sur GeoChart, mais la carte affiche très bien

Question

Je n'arrive pas à charger les marqueurs Geochart sur une carte. Le script fourni par Google rend une carte vierge sur mon site Web, mais les marqueurs et la carte apparaissent comme ils le devraient sur jsfiddle. Toute aide serait très appréciée.

Voici le code:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

<script type="text/javascript"> 

google.charts.load('current', {'packages': ['geochart']}); 
google.charts.setOnLoadCallback(drawMarkersMap); 

    function drawMarkersMap() { 
    var data = google.visualization.arrayToDataTable([ 
    ['City', 'Collaborator'], 
    ['Detroit', "text here"], 
    ['Cleveland', "text here"], 
    ['Joondalup', "text here"], 
    ['Wanaka', "text here"] 
    ['Liverpool', "text here"], 
    ['Styria', "text here"], 
    ['Edwardsville', "text here"], 
    ['Austin', "text here"], 
    ['Houston', "text here"], 
    ['Stockholm', "text here"], 
    ]); 

    var options = { 
    region: 'world', 
    displayMode: 'markers', 
    backgroundColor: '#252426', 
    colorAxis: {colors: ['blue']}, 
    magnifyingGlass: {enable: false}, 
    defaultColor: '#f1910e', 
    enableRegionInteractivity: 'true', 
    }; 

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
}; 
</script> 

Answer 1

Je l'ai compris! Apparemment, google nécessite maintenant une clé API pour afficher les marqueurs sur les géocartes. Voici le script modifié, fonctionnel. La deuxième ligne est le seul changement.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_GOES_HERE" async="" defer="defer"></script> 

<script type="text/javascript"> 

google.charts.load('current', {'packages': ['geochart']}); 
google.charts.setOnLoadCallback(drawMarkersMap); 

function drawMarkersMap() { 
var data = google.visualization.arrayToDataTable([ 
['City', 'Collaborator'], 
['Detroit', "text here"], 
['Cleveland', "text here"], 
['Joondalup', "text here"], 
['Wanaka', "text here"] 
['Liverpool', "text here"], 
['Styria', "text here"], 
['Edwardsville', "text here"], 
['Austin', "text here"], 
['Houston', "text here"], 
['Stockholm', "text here"], 
]); 

var options = { 
region: 'world', 
displayMode: 'markers', 
backgroundColor: '#252426', 
colorAxis: {colors: ['blue']}, 
magnifyingGlass: {enable: false}, 
defaultColor: '#f1910e', 
enableRegionInteractivity: 'true', 
}; 

var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); 
chart.draw(data, options); 
}; 
</script> 

Les clés API sont gratuites via google, à condition que votre site ne reçoive pas trop de trafic. Vous devrez enregistrer une "clé de navigateur". Voici un lien pour le mettre en place: https://developers.google.com/maps/documentation/javascript/get-api-key

Answer 2

Sur la base de cette forum, il semble que votre réseau bloque peut-être le géocodage. Le GeoChart doit géocoder les marqueurs afin de savoir où les dessiner.

Cochez cette case associée SO thread et example from GitHub.

function drawVisualization() { 
    var data = google.visualization.arrayToDataTable([ 
    ['State', 'Foo Factor'], 
    ['US-IL', 200], 
    ['US-IN', 300], 
    ['US-IA', 20], 
    ['US-RI', 150] 
    ]); 

    var geochart = new google.visualization.GeoChart(
     document.getElementById('visualization')); 
    geochart.draw(data, {width: 556, height: 347, region: "US", resolution: "provinces"}); 
} 

Espérons que cela aide!