react-google-maps

main.js

import React, { Component } from 'react';
import { withGoogleMap, GoogleMap, withScriptjs, InfoWindow, Marker } from "react-google-maps";
import Geocode from "react-geocode";
Geocode.setApiKey("*****");
Geocode.enableDebug();

class Map extends Component {

    constructor(props) {
        super(props);
        this.state = {
            mapPosition: {
                lat: this.props.lat,
                lng: this.props.lng
            },
            markerPosition: {
                lat: this.props.lat,
                lng: this.props.lng
            }
        }
    }

    shouldComponentUpdate() {
        return true
    }

    render() {
        const AsyncMap = withScriptjs(
            withGoogleMap(
                props => (
                    <GoogleMap
                        defaultClickableIcons={false}
                        google={this.props.google}
                        defaultZoom={this.props.zoom}
                        defaultCenter={{ lat: this.state.mapPosition.lat, lng: this.state.mapPosition.lng }}
                    >
                        <InfoWindow
                            onClose={this.onInfoWindowClose}
                            position={{ lat: (this.state.markerPosition.lat + 0.0010), lng: this.state.markerPosition.lng }}
                        >
                            <div style={{ background: 'linear-gradient(45deg, #5e35b1 30%, #bd28a0 90%)', color: 'white', borderRadius: 10, padding: 10 }} >
                                <span style={{ padding: 0, margin: 0, fontSize: 15 }}>{this.props.InfoText}</span>
                            </div>
                        </InfoWindow>

                        <Marker
                            draggable={false}
                            position={{ lat: this.state.markerPosition.lat, lng: this.state.markerPosition.lng }}
                            icon={{
                                url: '../../static/frontend/location.png',
                                anchor: new google.maps.Point(32, 32),
                                scaledSize: new google.maps.Size(60, 60)
                            }}
                        />

                    </GoogleMap>
                )
            )
        );
        return (
            <div>
                <AsyncMap
                    googleMapURL="https://maps.googleapis.com/maps/api/js?key=********&libraries=places"
                    loadingElement={
                        <div style={{ height: `100%` }} />
                    }
                    containerElement={
                        <div style={{ height: this.props.height, }} />
                    }
                    mapElement={
                        <div style={{ height: `100%` }} />
                    }
                />
            </div>
        )
    }
}

export default Map