Alex B Alex B - 5 months ago 141
Javascript Question

Markers won't appear on GeoChart, but the map displays just fine

I'm having trouble getting Geochart Markers to load onto a map. The script provided by Google renders a blank map on my website, but the markers and map appear as they should on jsfiddle. Any help would be much appreciated.

Here's the 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

I figured it out! Apparently google now requires an API key to display markers on geocharts. Here's the modified, functional, script. The second line is the only change.

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

API keys are free through google, provided your website isn't receiving too much traffic. You'll need to register a "browser key". Here's a link to get it set up: https://developers.google.com/maps/documentation/javascript/get-api-key