visgl / visgl/react-google-maps

[Feat] Improve documentation for development purposes

Open
#509 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.9k
Forks
193
Avg merge
3d 16h
Merged PRs (30d)
13

Description

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>
);
  1. 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.

  2. 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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Getting Started guide and the APIProvider and Map usage shown in the issue. Document the empty-api-key development setup, explain its appropriate use and caveats, and decide whether an example project or link is needed; done means the guide covers setup, troubleshooting, and the proposed example path.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.