- \n
- Open the Google Cloud Console<\/strong><\/a>.
<\/li>\n\n\n\n- Select “New Project.”
<\/li>\n\n\n\n- Create your project by entering its name.<\/li>\n<\/ol>\n\n\n\n
![\"\"](\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-14-1024x719.png\")
<\/a><\/figure>\n\n\n\nStep 2: Enable Google Maps APIs<\/strong><\/h2>\n\n\n\n
After the project is created:<\/p>\n\n\n\n
- \n
- From the project dropdown menu, choose your project.
<\/li>\n\n\n\n - Go to API Library<\/strong> and search for Maps<\/strong>.
<\/li>\n\n\n\n- You’ll notice various APIs:
\n- \n
- Maps JavaScript API<\/strong> \u2192 for web app
<\/li>\n\n\n\n- Maps SDK for Android<\/strong> \u2192 for Android apps
<\/li>\n\n\n\n- Maps SDK for iOS<\/strong> \u2192 for iOS apps
<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\nEnable the Maps JavaScript API since we are creating a React web application.<\/p>\n\n\n\n
![\"\"](\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-15-1024x564.png\")
<\/a><\/figure>\n\n\n\n<\/h2>\n\n\n\n
Step 3: Get an API Key<\/strong><\/h2>\n\n\n\n
- \n
- Navigate to APIs & Services \u2192 Credentials in the Google Cloud Console.
<\/li>\n\n\n\n - Select Create Credentials \u2192 API Key.
<\/li>\n\n\n\n - Copy the generated API key.
<\/li>\n\n\n\n - For security, limit the key to the domain of your application<\/li>\n<\/ol>\n\n\n\n
Step 4: Install the necessary packages.<\/strong><\/p>\n\n\n\n
Install the wrapper library for Google Ma<\/p>\n\n\n\n
Using npm:<\/strong><\/p>\n\n\n\n
npm install @react-google-maps\/api<\/p>\n\n\n\n
Using Yarn:<\/strong><\/p>\n\n\n\n
yarn add @react-google-maps\/api<\/p>\n\n\n\n
Step 5: Store the API Key in <\/strong>.env<\/strong><\/h2>\n\n\n\n
Create a .env file in your project root and add your API key:<\/p>\n\n\n\n
REACT_APP_GOOGLE_MAPS_API_KEY=AIzaSyCXXXXXXXXXXXXJJJJJV0<\/p>\n\n\n\n
Step 6: Add Google Maps to React<\/strong><\/h2>\n\n\n\n
Create a new component GoogleMapExample.tsx:<\/p>\n\n\n\n
import React from “react”;<\/p>\n\n\n\n
import { GoogleMap, LoadScript, Marker } from “@react-google-maps\/api”;<\/p>\n\n\n\n
const containerStyle = { width: “100%”, height: “400px” };<\/p>\n\n\n\n
const center = {<\/p>\n\n\n\n
lat: 20.5937,<\/p>\n\n\n\n
lng: 78.9629<\/p>\n\n\n\n
};<\/p>\n\n\n\n
export default function GoogleMapExample() {<\/p>\n\n\n\n
return (<\/p>\n\n\n\n
<LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY ?? “”}><\/p>\n\n\n\n
<GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10}><\/p>\n\n\n\n
<Marker position={center} \/><\/p>\n\n\n\n
<\/GoogleMap><\/p>\n\n\n\n
<\/LoadScript><\/p>\n\n\n\n
);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
Step 7: Use the Component in App<\/strong><\/p>\n\n\n\n
import React from “react”;<\/p>\n\n\n\n
import GoogleMapExample from “.\/GoogleMapExample”;<\/p>\n\n\n\n
function App() {<\/p>\n\n\n\n
return (<\/p>\n\n\n\n
<div><\/p>\n\n\n\n
<h1>Google Map Integration<\/h1><\/p>\n\n\n\n
<GoogleMapExample \/><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
export default App;<\/p>\n\n\n\n
Step 8: Run the Application<\/strong><\/p>\n\n\n\n
Start your React app:<\/p>\n\n\n\n
npm start<\/p>\n\n\n\n
or<\/p>\n\n\n\n
yarn start<\/p>\n\n\n\n
We can now see Google Maps with a marker centered on India.<\/p>\n\n\n\n
![\"\"](\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-16-1024x399.png\")
<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"
- Maps SDK for Android<\/strong> \u2192 for Android apps
- You’ll notice various APIs:
- Select “New Project.”