I am trying to customize the markers on a GeoChart similar to the one shown in this example. Could you please guide me on how to add the mapsApiKey in Google GeoChart using the ng-google-chart directive?
Here's an example code snippet:
var chart = {};
chart.type = "GeoChart";
chart.mapsApiKey = 'Generated API Key';
chart.data = [
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76],
['Naples', 959574, 117.27],
['Turin', 907563, 130.17],
['Palermo', 655875, 158.9],
['Genoa', 607906, 243.60],
['Bologna', 380181, 140.7],
['Florence', 371282, 102.41],
['Fiumicino', 67370, 213.44],
['Anzio', 52192, 43.43],
['Ciampino', 38262, 11]
];
chart.options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
$scope.chartInfo = chart;
When embedding it in the HTML:
<div google-chart chart="chartInfo" id="chart"></div>
I have included the mapsApiKey along with other properties, but it keeps showing a Google Maps API error: MissingKeyMapError. Could you please advise me on the correct way to inject the mapsApiKey?