react-google-charts Marker GeoChart markers not functional

Question

I have been trying to use the <Chart /> react component from the react-google-charts API, however, I can't seem to get the markers to show up on the map.

I noticed that even the examples of Marker GeoCharts on the React Google Charts site do not have functional markers.

Here is a code snippet from the site:

<Chart
  width={'500px'}
  height={'300px'}
  chartType="GeoChart"
  data={[
    ['City', 'Population', 'Area'],
    ['Rome', 2761477, 1285.31],
    ['Milan', 1324110, 181.76],
    ['Naples', 959574, 117.27],
  ]}
  options={{
    region: 'IT',
    displayMode: 'markers',
    colorAxis: { colors: ['green', 'blue'] },
  }}
  // Note: you will need to get a mapsApiKey for your project.
  // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
  mapsApiKey="YOUR_KEY_HERE"
  rootProps={{ 'data-testid': '2' }}
/>

Here's a screenshot of the output:

I also generated my own API key, and I have also tried using the "columns" prop in the Chart component. I still can't seem to get the markers to work.

Even if you do not know how to solve this error, if you have any recommendations for interactive maps that can be used with react (and that I can add interactive markers to), please let me know!

Answer 1

You have to enable the Geolocation API and Geocoding API for markers to work.