Home » Javascript » Use Marker GeoCharts in Angularjs

Use Marker GeoCharts in Angularjs

Posted by: admin August 19, 2018 Leave a comment

Questions:

I want to display the markers on GeoChart like this https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=it#marker-geocharts, How can i inject mapsApiKey in Google GeoChart using ng-google-chart directive.
Example code

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;

In the HTML

<div google-chart chart="chartInfo" id="chart"></div>

I am passing mapsApiKey along with all other properties.
It always shows Google Maps API error: MissingKeyMapError. Where i need to exactly inject the mapsApiKey?

Answers: