react js google map code example
Example 1: google maps react
/* Answer to: "google maps react" */
/*
"google-map-react" is a component written over a small set of the
Google Maps API. It allows you to render any React component on
the Google Map. It is fully isomorphic and can render on a server
Additionally, it can render map components in the browser even if
the Google Maps API is not loaded. It uses an internal, tweakable
hover algorithm - every object on the map can be hovered.
Install it here:
https://www.npmjs.com/package/google-maps-react
Don't forget it's also open-source! Here's the github page:
https://github.com/google-map-react/google-map-react
*/
Example 2: how to add google map in react js
import React, { Component } from 'react';import GoogleMapReact from 'google-map-react'; const AnyReactComponent = ({ text }) => <div>{text}</div>; class SimpleMap extends Component { static defaultProps = { center: { lat: 59.95, lng: 30.33 }, zoom: 11 }; render() { return ( // Important! Always set the container height explicitly <div style={{ height: '100vh', width: '100%' }}> <GoogleMapReact bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }} defaultCenter={this.props.center} defaultZoom={this.props.zoom} > <AnyReactComponent lat={59.955413} lng={30.337844} text="My Marker" /> </GoogleMapReact> </div> ); }} export default SimpleMap;