https://github.com/fourlabsldn/fl-google-maps-react

Wrapper around google maps to work with react
https://github.com/fourlabsldn/fl-google-maps-react

Last synced: 5 days ago
JSON representation

Wrapper around google maps to work with react

• Host: GitHub
• URL: https://github.com/fourlabsldn/fl-google-maps-react
• Owner: fourlabsldn
• Created: 2016-09-19T08:41:49.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-09-19T09:21:02.000Z (about 8 years ago)
• Last Synced: 2024-04-26T17:22:48.552Z (7 months ago)
• Language: JavaScript
• Size: 336 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Wrapper for Google Maps

Based on this tutorial: [How to Write a Google Maps React Component](https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/)

We wrote our own version because you just couldn't use Ari Lerner's version with AMD.

# Usage

Use it like this:

``` javascript

import ReactDOM from 'react-dom';

import React from 'react';

import { Map, Marker, InfoWindow } from 'fl-google-maps-react';

class MyComponent extends React.Component {

  constructor() {

    super();

    this.render = this.render.bind(this);

  }

  // Will open an info window on top of the clicked marker

  onMarkerClick(marker) {

    this.setState({

      selectedPlace: 'Info window content text',

      activeMarker: marker,

      showingInfoWindow: true,

    });

  }

  render() {

    const props = this.props;

    return (

      // MyComponent must have set dimensions

      


        


          

          

              


                
{this.state.selectedPlace}

              

          


        

      

    );

  }

}


export default function (container, google) {

  ReactDOM.render((), container);

}

```