Introducing Places UI Kit :A ready-to-use, low-cost component library that lets you bring the familiar Google Maps UI for Places to any map of your choice. Try it out, and share your input to help shape the future of GMP!

React Google Maps Library - Basic Map

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 
 ; 
   index 
 . 
 tsx

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 
 ; 
   index 
 . 
 jsx

CSS

 body 
  
 { 
  
 margin 
 : 
  
 0 
 ; 
  
 font-family 
 : 
  
 sans-serif 
 ; 
 } 
 # 
 app 
  
 { 
  
 width 
 : 
  
 100 
 vw 
 ; 
  
 height 
 : 
  
 100 
 vh 
 ; 
 } 
   style 
 . 
 css

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>  index.html

Try Sample

Google Cloud Shell

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