How to add google map to your site?

Anton Lytvynov
2 min readApr 17, 2021

--

Google embed iframe

It’s pretty simple to add the Google Maps embed iframe to your site

There are a lot of free Google Maps iframe generators. But pay attention, the most of them add theirs logo to iframe, that’s not cool.

In my case, I used this site.

Google Maps Embed iframe

You can enter your city or full address and click on “Get HTML-Code”.

A few lines of HTML code

And this code you can enter wherever you want.

<div class="mapouter">
<div class="gmap_canvas">
<iframe width="100%" height="400" id="gmap_canvas"
src="https://maps.google.com/maps?q=Dnipro&t=&z=4&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
<br>
<style>.mapouter {
position: relative;
text-align: right;
height: 400px;
width: 100%;
}</style>
<a href="https://www.embedgooglemap.net"></a>
<style>.gmap_canvas {
overflow: hidden;
background: none !important;
height: 400px;
width: 100%;
}</style>
</div>
</div>

By the way, I recommend you change your width to 100%.

In this case the iframe will take all the screen width.

Thank you for your attention.

Thank you for your attention.

Do you need help with web or mobile development? Feel free to contact me here.

P.S. I really appreciate your like or share 🙏.

--

--

Anton Lytvynov

CEO & Founder of Lytvynov Production, Senior web developer, architect, cryptocurrencies trader, https://lytvynov-production.com