in ,

Free Google Maps Embed Code Generator [No API Key Needed]

SPECIFY THE SIZE OF THE MAP


MAP DEFAULT VIEW AND ZOOM


MAP EMBED PREVIEW

NOTE: FOR MAPS WITH TOO LARGE WIDTH, A SCROLL BAR WILL BE ADDED IN THE PREVIEW, TO KEEP THE PAGE RESPONSIVE. BUT THAT WON’T AFFECT THE EMBED CODE IN ANY WAY. THE GENERATED EMBED CODE WILL PRODUCE THE MAP OF WIDTH AS SPECIFIED BY YOU.



MAP EMBED CODE

ENTER AN ADDRESS TO GET THE EMBED CODE

Steps To Embed Google Maps On Your Website Using The Embed Code Generator

1. Type The Address Or The Latitude/Longitude (Coordinates) Of The Place That You Want To Show On The Map, In The Address Box

Type The Address That You Want To Show On The Map

First of all, you need to type in the address or the coordinates of the place that you want to show on the map, inside the address box as shown in the above image. You may leave just a single blank space inside the address box in case you want to show the entire world map.

The embed code will update automatically when you change/update the address inside the address box.

2. Adjust The Size Of The Map That You Want To Embed

Now it’s time to adjust how long and wide you want your embedded map to be on your website.

First, choose the units of width and height as shown in the image below. I have provided a chart below the image to help decide which unit would be perfect for you.

Adjust the size of the map that you want to embed on your site.

Units And Their Description

autoautomatically adjust based on body size
cmcentimeters
mmmillimetres
ininches (1in = 96px = 2.54cm)
pxpixels
ptpoints
pcpicas
emRelative to the font-size (2em means 2 times the size of the current font)
exRelative to the x-height of the current font (rarely used)
chRelative to the width of the “0” (zero)
remRelative to font-size of the root element
vwRelative to 1% of the width of the viewport
vhRelative to 1% of the height of the viewport
vminRelative to 1% of viewport’s smaller dimension
vmaxRelative to 1% of viewport’s larger dimension
%Relative to the parent element

Now provide the values of the length and the width in the proper units that you’ve chosen.

If you’re finding it difficult to choose the units of width and height, you may use the default values, i.e. width: 100% and height: 500px, as they work well on most websites.

3. Set The Zoom Level And The Type Of The Map

Use the slider to set the zoom level of the map.

Use the drop-down option below it to choose whether you want to show the street view of the place or its satellite imagery.

4. Copy The Embed Code And Paste It On Your Website

Once the embed code is generated, click on the Copy button to copy the code in your clipboard.

Copy the generated embed code

Now, you can paste this code inside the HTML body of your website or webpage to make it appear wherever you want to.

If you have any questions regarding this or if you’re stuck at any step, feel free to comment down below and I’ll surely help you out!

Have a great day ahead! 😊

Frequently Asked Questions

Do I Need An API Key To Generate The Google Maps Embed Code?

No, you do not need any API key to use this Google Maps Embed Code Generator.

Can I Embed The Google Map On My Website For Free?

Yes, it’s completely free.

What do you think?

106 Points
Upvote Downvote

Written by Anirban Roy

Anirban is a full-stack developer and an SEO expert. He has 6 years of experience in web development and software engineering. With a passion for writing, he has been blogging since 2017.

Leave a Reply

Your email address will not be published. Required fields are marked *

5 Comments