react-simple-google-maps

Simple components for rendering Google Maps via the Google Maps JavaScript API

Installation

npm install react react-addons-shallow-compare react-simple-google-maps

Usage

Ensure the Google Maps JS API script is already loaded. react-simple-google-maps will use a global named google.maps.

To create a new map, just render a <Map> component. Markers and Polylines are children of the Map, and an InfoWindow can be a child of a Marker. An InfoWindow's children will be rendered into the InfoWindow when it is displayed.

Coordinates are passed using the native Google Maps coordinates or bounds objects.

1bounds = new google.maps.LatLngBounds();
2position = new google.map.LatLng(65, -100);
3bounds.extend(position);
4position = new google.map.LatLng(40, -125);
5bounds.extend(position);
6
7markerPosition = new google.map.LatLng(50, -115);
8
9<Map
10  bounds={bounds}
11  panControlOptions={position: google.maps.ControlPosition.LEFT_BOTTOM}
12  ref="map"
13  scrollwheel={true}
14  streetViewControl={false}
15  style={height: 500}
16  zoomControlOptions={position: google.maps.ControlPosition.LEFT_BOTTOM} >
17  <Marker
18    position={markerPosition}
19    title='Start'
20    zIndex=1
21    <InfoWindow>
22      <h1>I am a marker!</h1>
23    </InfoWindow>
24  </Marker>
25</Map>