<h2 id="heading-work-on-google">Work on Google</h2>
<h3 id="heading-choose-the-location-you-want-to-implement-into-your-app">Choose the location you want to implement into your app</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1690154972695/f599e08c-0cf0-4fd8-bb1d-061d120d7c29.png" alt class="image--center mx-auto" /></p>
<h3 id="heading-share">Share</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1690155031820/756297eb-57e5-4bd5-9b8e-dd2c225e3d3a.png" alt class="image--center mx-auto" /></p>
<h3 id="heading-embed-a-map">Embed a map</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1690155066074/cc5da8b2-f22b-44b7-a07a-a1f7cae53635.png" alt class="image--center mx-auto" /></p>
<p>Now, when you copy the HTML, just paste it into your component, and that's it! To style the map, place it inside a div and apply styles to that div.</p>
<h2 id="heading-example-in-code">Example in code</h2>
<pre><code class="lang-javascript">        &lt;div className=<span class="hljs-string">"w-full rounded-md overflow-hidden"</span>&gt;
          <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">iframe</span>
            <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d90567.5103257972!2d20.365943012636272!3d44.81678309583739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x475a7163a682044d%3A0x2a07a073e49f36ae!2sStridon%20group!5e0!3m2!1sen!2snl!4v1682522248790!5m2!1sen!2snl"</span>
            <span class="hljs-attr">loading</span>=<span class="hljs-string">"lazy"</span>
            <span class="hljs-attr">height</span>=<span class="hljs-string">"100%"</span>
            <span class="hljs-attr">width</span>=<span class="hljs-string">"100%"</span>
          &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span></span>
        &lt;/div&gt;
</code></pre>


## Work on Google

### Choose the location you want to implement into your app

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690154972695/f599e08c-0cf0-4fd8-bb1d-061d120d7c29.png align="center")

### Share

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690155031820/756297eb-57e5-4bd5-9b8e-dd2c225e3d3a.png align="center")

### Embed a map

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690155066074/cc5da8b2-f22b-44b7-a07a-a1f7cae53635.png align="center")

Now, when you copy the HTML, just paste it into your component, and that's it! To style the map, place it inside a div and apply styles to that div.

## Example in code

```javascript
        <div className="w-full rounded-md overflow-hidden">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d90567.5103257972!2d20.365943012636272!3d44.81678309583739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x475a7163a682044d%3A0x2a07a073e49f36ae!2sStridon%20group!5e0!3m2!1sen!2snl!4v1682522248790!5m2!1sen!2snl"
            loading="lazy"
            height="100%"
            width="100%"
          ></iframe>
        </div>
```

A step-by-step guide to integrating Google Maps into your React or Next.js application, enhancing user experience, and displaying your location to customers

How to integrate Google Maps into a React or Next app

A step-by-step guide to integrating Google Maps into your React or Next.js application.

How to integrate Google Maps into a React or Next.js app?

Work on Google

Choose the location you want to implement into your app

Share

Embed a map

Example in code

Talking about Next.js, JavaScript, React.js, Node.js, MERN stack, C, Python, Artificial Intelligence, and Machine Learning. Stay up to date.


Next.js, React, MERN stack blog where you will learn to use these technologies to its full potential easily, with the best industry practices.✅