This example uses the
vis.gl/react-google-maps
open
source library to render a Google map in a React app. The
vis.gl/react-google-maps
library
is a collection of React components and hooks for the Google Maps JavaScript
API.
TypeScript
import React from 'react';
import { createRoot } from 'react-dom/client';
import { APIProvider, Map } from '@vis.gl/react-google-maps';
const API_KEY =
globalThis.GOOGLE_MAPS_API_KEY ?? ("YOUR_API_KEY");
const App = () => (
<APIProvider
solutionChannel='GMP_devsite_samples_v3_rgmbasicmap'
apiKey={API_KEY}>
<Map
defaultZoom={8}
defaultCenter={{ lat: -34.397, lng: 150.644 }}
gestureHandling={'greedy'}
disableDefaultUI={true}
/>
</APIProvider>
);
const root = createRoot(document.getElementById('app')!);
root.render(<App />);
export default App;
JavaScript
import React from "react";
import { createRoot } from "react-dom/client";
import { APIProvider, Map } from "@vis.gl/react-google-maps";
const API_KEY = globalThis.GOOGLE_MAPS_API_KEY ?? "YOUR_API_KEY";
const App = () => (
<APIProvider
solutionChannel="GMP_devsite_samples_v3_rgmbasicmap"
apiKey={API_KEY}
>
<Map
defaultZoom={8}
defaultCenter={{ lat: -34.397, lng: 150.644 }}
gestureHandling={"greedy"}
disableDefaultUI={true}
/>
</APIProvider>
);
const root = createRoot(document.getElementById("app"));
root.render(<App />);
export default App;
CSS
body {
margin: 0;
font-family: sans-serif;
}
#app {
width: 100vw;
height: 100vh;
}
HTML
<html>
<head>
<title>React Google Maps - Basic Map</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<div id="app"></div>
<script type="module" src="./index"></script>
</body>
</html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow these
instructions
to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone -b sample-rgm-basic-map https://github.com/googlemaps/js-samples.git
cd js-samples
npm i
npm start
Other samples can be tried by switching to any branch beginning with
sample-
SAMPLE_NAME
.
git checkout sample-
SAMPLE_NAME
npm i
npm start