Ronnie Atuhaire's Blog ๐Ÿ˜Ž

Ronnie Atuhaire's Blog ๐Ÿ˜Ž

How To Embed Google Maps In Your Website

How To Embed Google Maps In Your Website

Subscribe to my newsletter and never miss my upcoming articles

Hey there ๐Ÿ‘‹ , well be back to my blog. Do you own a website or working on one and you easily want to add a real-time navigation element to it that is graphical & web-based?

Sit tight and we learn more about Google Maps and how to embed maps online. image.png Well, today we are going to see the easiest way to add it.

Wait, What Is Google Maps?

Google Maps is a web mapping platform and consumer application offered by Google.

image.png

It offers satellite imagery, aerial photography, street maps, 360ยฐ interactive panoramic views of streets (Street View), real-time traffic conditions, and route planning for travelling by foot, car, air (in beta) and public transportation.
Wikipedia Article

Fact: More than 150 million users access Google Maps monthly.

Responsiveness ๐Ÿ“ฑ

Google Maps are interactive by default, and Google makes it easy to integrate them into websites. However, Google Maps are not responsive by default, which means it doesnโ€™t automatically resize based on the device screen size.

Is it Free?

Yes and no. Basic embedding is free and includes a simple view, a map pin, and your business information.

For more complex functions, however, a fee is attached. For example, in order to display multiple locations or implement more advanced features like Google Street View, finding routes, and searching places, Google starts charging once usage quotas are reached.

How To Add Google Maps - Steps ๐Ÿ“Œ

๐Ÿš€ Go to Google Maps
๐Ÿš€ Enter the business address in the search bar, then click the search button
๐Ÿš€Click on the Share icon
image.png ๐Ÿš€Choose "Embed map"
๐Ÿš€Select the size of the map from the drop-down

image.png ๐Ÿš€Select and copy the HTML iframe embed code

<iframe src="https://www.google.com/maps/embed?xxxxxxx" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

๐Ÿš€Where xxxxxxx is your Location Google-Code Details
--------------You Can Stop Here---------------
๐Ÿš€But If you want you can modify the embed code to make it more responsive because the default size is width="600" and height="450"
๐Ÿš€Add a CSS class called map in a div wrapped around the iframe as follows:

<div class="map">
      <!-- our iframe code -->
</div>

Edit the site CSS Add the Google Maps CSS code as follows:

.map{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Conclusion

Google Maps also offers APIs, SDKs and many step-by-step tutorials and code samples to help users create simple responsive Google Maps or highly customized maps that can do all sorts of cool stuff.

Read the docs here:

Alternatively, check out 1Map for their solution.

And of course, if you enjoyed this article, consider subscribing, sharing and reacting to it.

Ronnie Atuhaire ๐Ÿ˜Ž

ย 
Share this