https://github.com/MicheleBertoli/react-gmaps

A Google Maps component for React.js
https://github.com/MicheleBertoli/react-gmaps

Last synced: about 1 month ago
JSON representation

A Google Maps component for React.js

• Host: GitHub
• URL: https://github.com/MicheleBertoli/react-gmaps
• Owner: MicheleBertoli
• License: mit
• Created: 2015-01-31T16:39:42.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2023-09-12T09:23:08.000Z (over 1 year ago)
• Last Synced: 2024-09-18T09:10:38.805Z (7 months ago)
• Language: JavaScript
• Homepage: http://react-gmaps.herokuapp.com/
• Size: 16.7 MB
• Stars: 317
• Watchers: 8
• Forks: 68
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-cn - react-gmaps - A Google Maps component for React.js (Uncategorized / Uncategorized)
• awesome-react-components-all - react-gmaps - A Google Maps component for React.js. (Uncategorized / Uncategorized)
• awesome-react - react-gmaps - A Google Maps component for React.js
• awesome-learning-resources - react-gmaps - A Google Maps component for React.js (Uncategorized / Uncategorized)
• awesome-list - react-gmaps - A Google Maps component for React.js. (Demos / Map)
• awesome-react-components - react-gmaps - A Google Maps component for React.js. (UI Components / Map)
• awesome-react-components - react-gmaps - A Google Maps component for React.js. (UI Components / Map)
• awesome-react - react-gmaps - A Google Maps component for React.js ` 📝 3 years ago` (React [🔝](#readme))

README

        
[![Build Status](https://travis-ci.org/MicheleBertoli/react-gmaps.svg?branch=master)](https://travis-ci.org/MicheleBertoli/react-gmaps)

React Gmaps

===========

A [Google Maps](https://developers.google.com/maps/documentation/javascript/) component for [React.js](http://facebook.github.io/react/)

Features

--------

- Lazy Google Maps loading

- Easy to use

Installation

------------

```sh

$ npm install react-gmaps --save

```

Demo

------------

[http://react-gmaps.herokuapp.com/](http://react-gmaps.herokuapp.com/)

Usage

-----

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import {Gmaps, Marker, InfoWindow, Circle} from 'react-gmaps';

const coords = {

  lat: 51.5258541,

  lng: -0.08040660000006028

};

const params = {v: '3.exp', key: 'YOUR_API_KEY'};

class App extends React.Component {

  onMapCreated(map) {

    map.setOptions({

      disableDefaultUI: true

    });

  }

  onDragEnd(e) {

    console.log('onDragEnd', e);

  }

  onCloseClick() {

    console.log('onCloseClick');

  }

  onClick(e) {

    console.log('onClick', e);

  }

  render() {

    return (

      

        

        

        

      

    );

  }

};

ReactDOM.render(, document.getElementById('gmaps'));

```

Test

----

```sh

$ npm test

```