1

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: Marker GeoChart output (Italy)

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!

ecoplaneteer
  • 1,918
  • 1
  • 8
  • 29
cassenav
  • 113
  • 2
  • 4
  • Yeah I have noticed the same thing today. When I looked at it earlier it was working so I think this issue is caused by a recent google update of their map API. – Ziyak Oct 19 '20 at 14:23

1 Answers1

0

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

Ziyak
  • 191
  • 4
  • 11
  • Thanks for this tip! How do I go about enabling these two things? – cassenav Oct 22 '20 at 00:22
  • Go to your project on GCP -> menu on top left -> APIs & Services -> Dashboard -> ENABLE APIS AND SERVICES. Then search for the APIs and enable them. – Ziyak Oct 22 '20 at 10:28
  • I've added both of them and generated a key. Placed it in mapsApiKey and still no markers are showing. @Ziyak – Jens Panis Mar 16 '22 at 15:34