Nextjs React Google Maps

-
Pro Component

React.js Google Maps integration component.

Deprecated

This component is deprecated and we no longer offer support for it. Please check our replacement of it.

Description

Our Map component uses the Google Maps API and it comes with a custom interface that matches the theme’s colours. Keep reading our Maps examples and learn how to use this plugin.

API Key

In order to use this plugin, you will need a valid Google Maps API Key.

For this, please refer to their documentation here: Get an API Key.

Example

import React from 'react';
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker
} from "react-google-maps";

const defaultCenter = { lat: 40.748817, lng: -73.985428 };

const defaultOptions = { scrollwheel: false };

const RegularMap = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultZoom={8}
      defaultCenter={ defaultCenter }
      defaultOptions={ defaultOptions }
    >
      <Marker position={ defaultCenter } />
    </GoogleMap>
  ))
);

const loadingElementStyle = { height: '100%' };
const containerElementStyle = { height: '280px' };
const mapElementStyle = { height: '100%' };

export default function GoogleMaps(){
  return (
    <RegularMap
      googleMapURL="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"
      loadingElement={<div style={ loadingElementStyle } />}
      containerElement={<div style={ containerElementStyle } />}
      mapElement={<div style={ mapElementStyle } />}
    />
  );
}

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.