[Feat] Improve documentation for development purposes

[ealch]

Target Use Case

I am using @vis.gl/react-google-maps in a development environment to build and test features that require Google Maps integration. While the library works well, I believe the documentation could be improved to better support developers who are using it for development purposes. Specifically, more detailed guidance on setting up and configuring the library in a local development environment would be highly beneficial.

Improving the documentation for development purposes would help not only me but also other developers who are integrating Google Maps into their React projects. Clear and comprehensive documentation would reduce setup time, lower the learning curve, and prevent common issues that developers might face during the development phase.

Proposal

To enhance the documentation, I propose the following improvements:

1. Development Environment Configuration: Update the Getting Started guide to include a note that developers can set the apiKey to an empty string ("") during development to bypass the need for a specific API key. This allows for easier setup and testing without the concern of exceeding API key quotas.
   Example:

GOOGLE_MAPS_API_KEY=""

import React from 'react';
import {createRoot} from 'react-dom/client';
import {APIProvider, Map} from '@vis.gl/react-google-maps';

const App = () => (
  <APIProvider apiKey="">
    <Map
      style={{width: '100vw', height: '100vh'}}
      defaultCenter={{lat: 22.54992, lng: 0}}
      defaultZoom={3}
      gestureHandling={'greedy'}
      disableDefaultUI={true}
    />
  </APIProvider>
);

const root = createRoot(document.querySelector('#app'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. Additional Troubleshooting Tips: Provide guidance on when it's appropriate to use an empty string for the API key and the limitations or caveats of doing so.

3. Example Projects: Consider including or linking to an example project in the documentation that uses an empty API key for development purposes. This project could serve as a quick-start template for new developers.
   These improvements would streamline the setup process, making it easier for developers to start working with @vis.gl/react-google-maps in a development environment.

[usefulthink]

I appreciate the thoughts and the time you invested!

The documentation is certainly still in need of some more refinement and you point out an important topic we can do better at. We should definitely add some information on the topic of API keys, how to configure and use them and so on. While everything in that regard is covered in the official documentation by Google, I feel we could also have a condensed version of that in the getting started guide.

What I am a bit uneasy about is omitting the API key, since that is a violation of the Google Maps Platform ToS (Section 1.2), and we can't tell people to do that.

If your concern is about racking up costs for a map in your application while you are working on something different on the same page, you could also implement a placeholder that delays creating the map-instance until it's actually needed (or just in the dev environment or something like that). These are absolutely points we should mention in our documentation, add an example and so on.