How To Embed Google Maps In Your Website

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. 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.

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
🚀Choose "Embed map"
🚀Select the size of the map from the drop-down

🚀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 😎