Notus NextJS React Google Maps
react-google-maps provides a set of React components wrapping the underlying Google Maps JavaScript API v3 instances.
DEPRECATED
Please use instead the simple Google Maps API
Usage
Install all of the necessary react-google-maps
dependencies:
npm i -E [email protected] @types/[email protected] @types/[email protected] @types/[email protected]
After that, you will need to import all of the necessary components and configure them with your own options:
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
} from "react-google-maps";
const MapExample = withScriptjs(
withGoogleMap((props) => (
<GoogleMap
defaultZoom={...}
defaultCenter={...}
defaultOptions={...}
>
<Marker position={...} />
</GoogleMap>
))
);
export default MapExample;
Get your API key
In order to get your Google Maps API key navigate to the following page: Google Maps.
After you’ve got your api key, you will need to replace in the above script, the YOUR_API_KEY_HERE
with that key.
Example
import React from "react";
// react plugin used to create google maps
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
} from "react-google-maps";
const position = { lat: 40.748817, lng: -73.985428 };
const defaultOptions = {
scrollwheel: false,
styles: [
{
featureType: "administrative",
elementType: "labels.text.fill",
stylers: [{ color: "#444444" }],
},
{
featureType: "landscape",
elementType: "all",
stylers: [{ color: "#f2f2f2" }],
},
{
featureType: "poi",
elementType: "all",
stylers: [{ visibility: "off" }],
},
{
featureType: "road",
elementType: "all",
stylers: [{ saturation: -100 }, { lightness: 45 }],
},
{
featureType: "road.highway",
elementType: "all",
stylers: [{ visibility: "simplified" }],
},
{
featureType: "road.arterial",
elementType: "labels.icon",
stylers: [{ visibility: "off" }],
},
{
featureType: "transit",
elementType: "all",
stylers: [{ visibility: "off" }],
},
{
featureType: "water",
elementType: "all",
stylers: [{ color: "#4299e1" }, { visibility: "on" }],
},
],
}
const MapExample = withScriptjs(
withGoogleMap((props) => (
<GoogleMap
defaultZoom={12}
defaultCenter={position}
defaultOptions={defaultOptions}
>
<Marker position={position} />
</GoogleMap>
))
);
export default function Maps() {
return (
<>
<MapExample
googleMapURL="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"
loadingElement={<div className="h-full" />}
containerElement={
<div className="relative w-full rounded h-600-px" />
}
mapElement={<div className="rounded h-full" />}
/>
</>
);
}
This component is already defined inside components/Maps/MapExample.js
. Check it out.
Props
If you want to see more examples and properties please check the official react-google-maps Documentation.
You can also check the Official Github Repository.
You can also check the official Google Maps API Documentation.