{"id":9360,"date":"2025-08-30T11:43:08","date_gmt":"2025-08-30T06:13:08","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=9360"},"modified":"2025-08-30T11:58:40","modified_gmt":"2025-08-30T06:28:40","slug":"how-to-integrate-a-google-map-into-a-react-application","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/how-to-integrate-a-google-map-into-a-react-application\/","title":{"rendered":"How to Integrate a Google Map into a React application"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Google Maps integration into a React application is simple once your Google Cloud project is set up and the required APIs are enabled.Below is a step-by-step guide.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 1: Create a Google Cloud Project<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open&nbsp; the<a href=\"https:\/\/console.cloud.google.com\/\" target=\"_blank\" rel=\"noopener\"> <strong>Google Cloud Console<\/strong><\/a>.<br><\/li>\n\n\n\n<li>Select &#8220;New Project.&#8221;<br><\/li>\n\n\n\n<li>Create your project by entering its name.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-14.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"719\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-14-1024x719.png\" alt=\"\" class=\"wp-image-9361\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-14-1024x719.png 1024w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-14-300x211.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-14-768x539.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-14-1536x1078.png 1536w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-14-427x300.png 427w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-14.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 2: Enable Google Maps APIs<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After the project is created:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>From the project dropdown menu, choose your project.<br><\/li>\n\n\n\n<li>Go to <strong>API Library<\/strong> and search for <strong>Maps<\/strong>.<br><\/li>\n\n\n\n<li>You&#8217;ll notice various APIs:<br>\n<ul class=\"wp-block-list\">\n<li><strong>Maps JavaScript API<\/strong> \u2192 for web app<br><\/li>\n\n\n\n<li><strong>Maps SDK for Android<\/strong> \u2192 for Android apps<br><\/li>\n\n\n\n<li><strong>Maps SDK for iOS<\/strong> \u2192 for iOS apps<br><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Enable the Maps JavaScript API since we are creating a React web application.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-15.png\"><img decoding=\"async\" width=\"1024\" height=\"564\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-15-1024x564.png\" alt=\"\" class=\"wp-image-9362\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-15-1024x564.png 1024w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-15-300x165.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-15-768x423.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-15-1536x846.png 1536w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-15-545x300.png 545w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-15.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 3: Get an API Key<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to APIs &amp; Services \u2192 Credentials in the Google Cloud Console.<br><\/li>\n\n\n\n<li>Select Create Credentials \u2192 API Key.<br><\/li>\n\n\n\n<li>Copy the generated API key.<br><\/li>\n\n\n\n<li>For security, limit the key to the domain of your application<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 4: Install the necessary packages.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Install the wrapper library for Google Ma<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Using npm:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">npm install @react-google-maps\/api<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Using Yarn:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">yarn add @react-google-maps\/api<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 5: Store the API Key in <\/strong><strong>.env<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create a .env file in your project root and add your API key:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">REACT_APP_GOOGLE_MAPS_API_KEY=AIzaSyCXXXXXXXXXXXXJJJJJV0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 6: Add Google Maps to React<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create a new component GoogleMapExample.tsx:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">import React from &#8220;react&#8221;;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">import { GoogleMap, LoadScript, Marker } from &#8220;@react-google-maps\/api&#8221;;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">const containerStyle = { width: &#8220;100%&#8221;, height: &#8220;400px&#8221; };<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">const center = {<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">lat: 20.5937,<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">lng: 78.9629<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">};<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">export default function GoogleMapExample() {<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">return (<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY ?? &#8220;&#8221;}&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10}&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;Marker position={center} \/&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;\/GoogleMap&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;\/LoadScript&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">);<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 7: Use the Component in App<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">import React from &#8220;react&#8221;;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">import GoogleMapExample from &#8220;.\/GoogleMapExample&#8221;;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">function App() {<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;return (<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Google Map Integration&lt;\/h1&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;GoogleMapExample \/&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;);<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">export default App;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 8: Run the Application<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Start your React app:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">npm start<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">or<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">yarn start<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can now see Google Maps with a marker centered on India.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-16.png\"><img decoding=\"async\" width=\"1024\" height=\"399\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-16-1024x399.png\" alt=\"\" class=\"wp-image-9365\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-16-1024x399.png 1024w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-16-300x117.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-16-768x299.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-16-1536x599.png 1536w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-16-770x300.png 770w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/08\/image-16.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Google Maps integration into a React application is simple once your Google Cloud project is set up and the required [&hellip;]<\/p>\n","protected":false},"author":507,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[],"class_list":["post-9360","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-2qY","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/507"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=9360"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9360\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=9360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=9360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=9360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}