Google Maps

OverviewOfficial Website

A declarative Google Map React component using React, lazy-loading dependencies and current-location finder.

Import package

import { GoogleMap, LoadScript, Marker, InfoWindow, } from "@react-google-maps/api";

Add Package

npm install @react-google-maps/api --save

Remove Package

npm remove @react-google-maps/api / you can remove package by removing specific package from package.json

Examples

Title	Javascript
Required Code	`const containerStyle = { width: "100%", height: "300px", }; const center = { lat: 37.778519, lng: -122.40564, }; const second = { lat: 54.526, lng: 15.2551, }; const third = { lat: 8.7832, lng: 34.5085 }; const fourth = { lat: 19.076, lng: 72.8777 };`
Markers	`<LoadScript googleMapsApiKey="AIzaSyAbvyBxmMbFhrzP9Z8moyYr6dCr-pzjhBE"> <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={14} > <Marker position={center} onClick={() => onSelect(center)} /> {selected && ( <InfoWindow position={selected} onCloseClick={() => setSelected(null)} ></InfoWindow> )} </GoogleMap> </LoadScript>`
Overlays	`<LoadScript googleMapsApiKey="AIzaSyAbvyBxmMbFhrzP9Z8moyYr6dCr-pzjhBE"> <GoogleMap mapContainerStyle={containerStyle} center={second} zoom={14} > <Marker position={second} onClick={() => onSelect(second)} /> {selected && ( <InfoWindow position={selected} onCloseClick={() => setSelected(null)} ></InfoWindow> )} </GoogleMap> </LoadScript>`
Street View Panoramas	`<LoadScript googleMapsApiKey="AIzaSyAbvyBxmMbFhrzP9Z8moyYr6dCr-pzjhBE"> <GoogleMap mapContainerStyle={containerStyle} center={third} zoom={8} > <Marker position={third} onClick={() => onSelect(third)} /> {selected && ( <InfoWindow position={selected} onCloseClick={() => setSelected(null)} ></InfoWindow> )} </GoogleMap> </LoadScript>`
Map Types	`<LoadScript googleMapsApiKey="AIzaSyAbvyBxmMbFhrzP9Z8moyYr6dCr-pzjhBE"> <GoogleMap mapContainerStyle={containerStyle} center={fourth} zoom={8} > <Marker position={fourth} onClick={() => onSelect(fourth)} /> {selected && ( <InfoWindow position={selected} onCloseClick={() => setSelected(null)} ></InfoWindow> )} </GoogleMap> </LoadScript>`