logicaleak-react-google-maps v0.0.1
react-google-maps
Google maps for react
This is a google-maps react component that provides simple means to integrate google maps into your reactjs site. It removes the hustle of initialization and boilerplate code.
##How to install##
npm install logicaleak-react-google-maps
##How to use##
GoogleMaps component has a lot of components to utilise. They are typically passed by the state variables of the wrapping component. When a state variables is changed, the present elements in the map will be deleted, and the new elements will be inserted. The map will not be refreshed or loaded again.
<GoogleMaps
richMarkers={this.state.markers}
polygons={this.state.polygons}
polylines={this.state.polylines}
arrows={this.state.arrows}
center={this.state.center}
zoom={this.state.zoom}
mapTypeControl={this.state.mapTypeControl}
elId="mapId"
googleMapsClassName="googleMaps"
direction={this.state.direction}
onDirectionCalculatedPolylineMode={this._onDirectionCalculated}
onClick={this._onClick}
onRightClick={this._onRightClick}
/>
Rich Markers
GoogleMaps component internally uses an open source marker project which can be found in github at the following link :
https://github.com/googlemaps/js-rich-marker
As this component was created while developing tools for GIS operations, dynamic markers which can clearly indicate its purpose was very necessary, hence rich-markers were integrated into it.
Rich markers can be used with property "richMarkers". The typical object that should be passed into it is like :
[
{
content: '<div class="markerTextDiv">Start</div>',
coordinates : {lat:40.0, lng:40.0}
}
]
You can use anything for content. Each marker in the list will be inserted to the map. But beware, existing ones will be removed forever.
8 years ago