Reactstrap React Google Maps

-
Pro Component

React.js Google Maps integration component.


Description

Our Bootstrap Map component uses the Google Maps API and it comes with a custom interface that matches the theme’s colours. Keep reading our Bootstrap 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";
// react plugin used to create google maps
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} from "react-google-maps";
// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components

let 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: "#C5CBF5",
        },
        {
          visibility: "on",
        },
      ],
    },
  ],
};

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

let position = { lat: 40.748817, lng: -73.985428 }

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

let loadingElementStyle = { height: `100%` };

let containerElementStyle = {
  width: "100%",
  height: "704px",
  display: "block",
  marginTop: "-80px",
};

function Example() {
  return (
    <>
    <MapComponent
      googleMapURL="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"
      loadingElement={<div style={loadingElementStyle} />}
      containerElement={
        <div
          style={containerElementStyle}
          className="map"
          id="map-contactus-1"
        />
      }
      mapElement={<div />}
    />
    </>
  );
}

export default Example;

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.