@syncromatics/react-google-maps

A fork of react-google-maps for displaying and interacting with Google Maps in React applications

Quickstart

Add the @syncromatics/react-google-maps package to your project:

With yarn:

yarn add @syncromatics/react-google-maps

With npm:

npm install --save @syncromatics/react-google-maps

Then use it to display maps:

import { GoogleMap, Marker } from "@syncromatics/react-google-maps"

const MyMapComponent = (props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
  </GoogleMap>

// Uses of MyMapComponent
<MyMapComponent isMarkerShown />// Map with a Marker
<MyMapComponent isMarkerShown={false} />// Just only Map

Continue reading the documentation for more interactive examples of interactions with Google Maps.

Getting Help

The documentation has examples of how to use each component. Many people have asked and answered questions on StackOverflow. (Some things may be general Google Maps issues, for which there are lots of questions and answers as well.)

Building

Install dependencies:

yarn

Run React Styleguidist, a hot-reloading interactive local website:

yarn styleguide

Once the styleguide is running, visit http://localhost:6060 and start coding! (Note, you should probably get an API key with the Google Maps API enabled, then update constants.js.)

Learn more in our contributor's guide.

Code of Conduct

We are committed to fostering an open and welcoming environment. Please read our code of conduct before participating in or contributing to this project.

Contributing

We welcome contributions and collaboration on this project. Please read our contributor's guide to understand how best to work with us.

License and Authors

GMV Syncromatics Engineering

This software is made available by Tom Chen under the MIT license and this fork is maintained by GMV Syncromatics Engineering.