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.