GoogleCharts.Map Not Displaying

[gordonklarson]

When running the sample code for GoogleCharts.Map from https://fslab.org/XPlot/chart/google-map-chart.html I get a message saying "No data points to show on map"

[zyzhu]

By reading the error message in console. It seems related to the change of Google Map's API policy
https://cloud.google.com/maps-platform/user-guide/account-changes/#no-plan

You must have a valid API key and a billing account to access our APIs. When you enable billing, you will get $200 free usage every month for Maps, Routes, or Places. Based on the millions of users using our APIs today, most of them can continue to use Google Maps Platform for free with this credit. Having a billing account helps us understand our developers’ needs better and allows you to scale seamlessly.

To avoid a service interruption to your projects, please visit our Get Started page to create a project, generate an API key, and enable a billing account. Once you generate and obtain an API key, make sure to update your application with the new API key.

[zyzhu]

I gave it a shot today by creating a dummy project on Google. It requires billing information but first $200 every month is still free.

After you sign up, Google provides an API key. Pipe your map to |> Chart.WithApiKey "key" and it works fine afterwards.

let data =
    [
        "China", "China: 1,363,800,000"
        "India", "India: 1,242,620,000"
        "US", "US: 317,842,000"
        "Indonesia", "Indonesia: 247,424,598"
        "Brazil", "Brazil: 201,032,714"
        "Pakistan", "Pakistan: 186,134,000"
        "Nigeria", "Nigeria: 173,615,000"
        "Bangladesh", "Bangladesh: 152,518,015"
        "Russia", "Russia: 146,019,512"
        "Japan", "Japan: 127,120,000"
    ]

let options = Options(showTip = true)

data
|> Chart.Map
|> Chart.WithOptions options
|> Chart.WithHeight 420
|> Chart.WithApiKey "key"
|> Chart.Show