Hello folks!
If you want to integrate Google Maps into your web application, then this article is for you. I’ll try to explain each step in detail to make it understandable for developers of any age.
Firstly, you need to create a new React application. You can learn more about it here.
Secondly, decide which framework/library you want to use for Google Maps. I choose @vis.gl/react-google-maps. The Google Maps Platform team provided it, so I wanted to use it.
Install react-google-maps
To install this library, you can use these commands:
npm install @vis.gl/react-google-maps
or
yarn add @vis.gl/react-google-maps
Create Google Maps API Key
- Go to Google Developer Console, create a “New Project” and select a name for your project.
- From the left-side menu, go to “APIs and Services,” and then select the “Credentials” screen.
- Click on “Create Credentials” and select to generate the “API Key”.
- The API key will appear shortly on the screen. Copy it and paste it into your .env file.
Create a Map Component
Now create a new file named CustomMap.js and define the <Map/> component in it like this:
import "./App.css";
import React, { useState } from "react";
import { Map, Marker} from "@vis.gl/react-google-maps";
const CustomMap = () => {
// shows marker on London by default
const [markerLocation, setMarkerLocation] = useState({
lat: 51.509865,
lng: -0.118092,
});
return (
<div className="map-container">
<Map
style={{ borderRadius: "20px" }}
defaultZoom={13}
defaultCenter={markerLocation}
gestureHandling={"greedy"}
disableDefaultUI
>
<Marker position={markerLocation} />
</Map>
</div>
);
}
export default CustomMap;
And give styling to show the map in the centre of the screen:
.app {
display: flex;
padding: 5rem;
justify-content: space-evenly;
font-family: Verdana, Geneva, Tahoma, sans-serif
}
.map-container {
height: 500px;
width: 50%;
border: 2px solid black;
border-radius: 20px;
}
Set Context for Google Maps API
At last, set the context for Google Maps API key to provide access to our <CustomMap /> component.
import React from "react";
import CustomMap from "./CustomMap";
import { APIProvider } from "@vis.gl/react-google-maps";
import "./App.css";
const App = () => {
return (
<div className="app">
<APIProvider apiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
<CustomMap />
</APIProvider>
</div>
);
};
export default App;
This setup will render the map on your web app.
In the next article, I’ll share how to add a click function on the map.
Thank you for reading! Feel free to connect with me on LinkedIn or GitHub.
Top comments (8)
Nice one, Aneeqa! Super quick, straightforward, and helpful.
Also, lovin' that cover image!
Thank you, Michael!
For those who want to escape the bland advertising platform of google maps, there are open alternatives. Open source javascript map display libraries include LeafletJS and MapLibre GL JS, these typically then let you work with open licensed map data from OpenStreetMap with a lot of flexibility.
Looks like the equivalent react tutorials for these things would be: react-leaflet.js.org/ and docs.maptiler.com/react/maplibre-g...
Clean and simple, thanks for sharing!
Awesome!
Thanks!
To integrate Google Maps into your web app built with React, you can utilize the "react-google-maps" library, which simplifies the process. First, install the library using npm or yarn. Then, obtain a Google Maps API key from the Google Cloud Console. Next, import the necessary components from the library, including GoogleMap, Marker, etc. Use these components within your React components, passing the API key and any required props. Finally, customize and style the map as needed using CSS. Be sure to handle any error cases and follow Google's usage policies.
Regard,
alphaag.ru/
You need to obtain an API key from the Google Cloud Platform Console. Once you have your API key, install the @react-google-maps/api package, which provides a React-friendly wrapper for the Google Maps JavaScript API.In your React component, import the necessary modules from @react-google-maps/api and create a basic Google Map