npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@syncromatics/react-google-maps

v9.8.0

Published

React.js Google Maps integration component

Downloads

37

Readme

@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

Travis npm devDependency Status

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 logo GMV Syncromatics Engineering

license GitHub contributors

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