google map react js code example

Example 1: 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;

Example 2: react google maps

npm i -S @react-google-maps/api

Example 3: @react-google-maps/api npm

npm i -S @react-google-maps/api

Example 4: 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
*/