Google maps

import React, { useState } from 'react'
import { Map, Marker, GoogleApiWrapper, InfoWindow } from "google-maps-react";

const GoogleMap = () => {
    const [activeMarker, setActiveMarker] = useState({});
    const [selectedPlace, setSelectedPlace] = useState({});
    const [showingInfoWindow, setShowingInfoWindow] = useState(false);

    const onMarkerClick = (props, marker) => {
        setActiveMarker(marker);
        setSelectedPlace(props);
        setShowingInfoWindow(true);
    }


    const onInfoWindowClose = () => {
        setActiveMarker(null);
        setShowingInfoWindow(false);
    }


    const onMapClicked = () => {

        if (showingInfoWindow) {
            setActiveMarker(null);
            setShowingInfoWindow(false);
        }
    };

    const containerStyle = {
        position: 'relative',
        width: '100%',
        height: '100%'
    }

  return (
        <div id="map_canvas" className="gmap h-450p">
            <Map
                google={props.google}
                className="map"
                initialCenter={{
                    lat: -37.8136,
                    lng: 144.9631
                }}
                zoom={10}
                containerStyle={containerStyle}
                onClick={onMapClicked}
            >
                <Marker
                    name={<div className="infowindow-wrap">
                        <h5 className="infowindow-header">Envato Pvt Ltd</h5>
                        <div className="infowindow-body"><p className="txt-dark mb-15">Bellevue Ave, <br />Doncaster East, Australia</p><a href="envato.com/" target=" _blank">www.envato.com</a></div>
                    </div>}
                    position={{ lat: -37.7830, lng: 145.1660 }}
                    onClick={onMarkerClick}
                />
                <Marker />
                <Marker
                    name={<div className="infowindow-wrap">
                        <h5 className="infowindow-header">Envato Pvt Ltd</h5>
                        <div className="infowindow-body"><p className="txt-dark mb-15">121 King Street, <br />Melbourne VIC 3000, Australia</p><a href="envato.com/" target=" _blank">www.envato.com</a></div>
                    </div>}
                    position={{ lat: -37.8136, lng: 144.9631 }}
                    onClick={onMarkerClick}
                />


                <InfoWindow
                    marker={activeMarker}
                    onClose={onInfoWindowClose}
                    visible={showingInfoWindow}
                >
                    <div>
                        <h3>{selectedPlace.name}</h3>
                    </div>
                </InfoWindow>
            </Map>
        </div>
    )
}

export default GoogleApiWrapper({
    apiKey: "here your own google_apiKey"
})(GoogleMap);