4 ways to add responsive Google Maps to your website

September 13, 2024
0 minute read

Maps are more than just pieces of information, they’re design pieces just like any other element of a website. They attract visitor attention, increase engagement, and, ideally, drive conversions for your clients. The best maps do all of this beautifully on every device by being responsive and customizable.


On our own platform, we use Mapbox to provide the beautiful, responsive map experience that clients expect. We love Mapbox because their flexible platform provides tons of customization options, like grayscale and darkmode maps. It has great global coverage too.


That being said, we know other brands—particularly Google Maps—have much greater name recognition. Hundreds of millions of people depend on Google Maps to get them from point A to point B each and every day, a staggering figure that may have piqued your clients’ interest. If that’s the case, don’t worry! Duda’s flexible platform enables you to add nearly any kind of map you and your customers would like to use.


This in-depth guide breaks down four methods you can use to navigate the (sometimes tricky) world of Google Maps with ease. 


Table of Contents

Why would I want to integrate Google Maps into my website?

One of the first questions you may have is: why would you want to integrate Google Maps into your website in the first place? Well, there are actually many reasons. Maps can increase credibility, improve conversion rates, and so much more.


Enhancing your contact page


Most websites use Google Maps on their contact page to highlight their physical locations. This provides additional context for visitors who may want to visit, with roads, routes, and local landmarks all visible.


Highlighting routes


You may want to highlight a particular route on Google Maps for various reasons, such as hiking or running paths, or to illustrate a specific journey. This is especially useful for travel sites and blogs.


Store locators


In addition to showing your physical location, eCommerce businesses can effectively integrate Google Maps into store locator pages to highlight the nearest availability of a particular product.


There are, of course, many other reasons to integrate Google Maps. The goal is simple: to provide a visual overlay of the information you’re trying to convey. With Google increasingly prioritizing in-depth and useful features in its rankings, this can be an excellent way to meet a user’s search intent.

Why do I need to make Google Maps responsive

The tried and tested way to add a Google Maps element to a website is via their convenient “Embed a Map” button, visible on desktop after clicking “Share.” While this does, in theory, work, it isn’t responsive. In fact, Google even allows you to select a size for the embeddable maps element within the share window.


Responsive elements are extremely important for modern websites. They offer far greater design flexibility while simultaneously contorting to fit well on screens of every size, from large monitors to small phones.


Take a look at the responsive map element below. If you drag the lower right corner, you’ll be able to see firsthand what a responsive element is capable of. The map can shrink and grow seamlessly to fit any container.



So, how do you make something like this for your own website? Unsurprisingly, there are quite a few options.


A screenshot of a google maps integration window

Use your Google Maps API key within Duda natively

Duda’s platform offers the ability to swap Mapbox with Google Maps account-wide. This is a super seamless way to offer your clients Google Maps functionality without having to fiddle around with code. After you enter your API key, Google Maps will become the default in all location search and maps for the Content Library and other applicable widgets.


To enable Google Maps account-wide:


  1. Generate an API key within your Google Maps account. To see how to generate an API key, take a look at Google’s documentation. You should review Google's Usage and Billing policy first, though.
  2. If your Google account is configured in such a way that the API key only functions on certain websites, you will need to add duda.co, your site domain, and if applicable, any white label domains to the list of allowed websites in your Google Account.
  3. In the Duda dashboard, click on your avatar in the upper right corner and select Account
  4. On the Account Settings page, scroll down to the Google Map Integration section and click Set Up
  5. Paste your API key in the field, then click Apply to All Sites


You can switch back to Mapbox at any time—no data will be lost. Keep in mind that, while Google does offer a very generous free tier, their API is not free. At the time of publication, developers could expect to make a little over 28,000 API calls per month before accruing any charges. 


If you anticipate a significant number of monthly views across all of your client sites, this may not be the best option for your agency. Luckily, there are other ways to add Google Maps to your clients’ sites.



A person is looking at a map on a computer screen.

Embed Google Maps via a responsive iFrame

Conveniently located within the Share menu on Google Maps’ desktop website is a handy “embed code.” If you were to copy this code then paste it into an html widget on your client’s site, you would see a lovely Google Maps element with very little effort.



Unlike the account-wide integration, this somewhat manual process can be done per-client, perfect when you have other customers who are happy to use the native Mapbox widget. More importantly, embedding Google Maps in this way does not require the use of their API—meaning no fees.


However, this element isn’t responsive. Luckily, that’s an easy fix. To start, we’ll need the embed code:


  • Visit Google Maps’ website
  • Enter the business address in the search bar, then click the search button
  • Click on the Share icon
  • Choose "Embed map"
  • Select and copy the HTML iframe embed code


Then, we’ll need to paste that code into an HTML widget. It should look something like this:


HTML

 

<iframe src="YOUR GOOGLE MAPS URL" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>


If you take a peek at that code, you’ll notice that the width and height properties are clearly defined with fixed values, 600 and 450 respectively. We can substitute both of these numbers with a more flexible value, like 100%, to create code that looks like this:



HTML

 

allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>


Now, the embedded Google Maps element will expand to completely encompass the HTML widget container, making it responsive and easy to resize on any device. No further CSS styling or media query usage is necessary when using this method.fill the container it is placed in, a fully responsive experience.

Embed Google Maps via a responsive iFrame with CSS

While the above method does work, it isn’t the ideal way to do things. Most browsers understand what you mean by the code width="100%" height="100%," but that isn’t technically correct syntax. Instead, your code should look a little more like the following:



HTML

 

<div class="map-responsive">

<iframe src="YOUR GOOGLE MAPS URL" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

</div>


What we’ve done here is we’ve taken the embed that Google Maps gives us within their share menu, and we've wrapped it in a container. In this case, the container is named “map-responsive.” This allows us to apply CSS code to the container and the iframe in a more compliant way. The CSS should look something like this:



CSS

 

.map-responsive{

    overflow:hidden;

    padding-bottom:56.25%;

    position:relative;

    height:0;

}


.map-responsive iframe{

    left:0;

    top:0;

    height:100%;

    width:100%;

    position:absolute;

}


You can adjust the height of the map by tweaking the padding-bottom value to your liking. This method of embedding and CSS styling should work for any HTML based website.

A computer screen is open to a google maps page.

Create a map dynamically with Google’s JavaScript API

If you’re feeling exceptionally technical, you can render your own Google Maps element using their JavaScript API. This option enables quite a bit of customization, at the cost of more effort and technical experience. You can draw map markers, calculate distance and areas, display prominent points of interest, overlay heatmaps, and more. However, you also need an API key, which means there may be a cost. Google’s developer documentation provides quite a bit more information.


Our example below is fairly simple compared to what’s possible.


First, you’ll need to create an API key. To do so, go to Google’s Cloud Platform Console, create a new project, then generate the credentials. It’s important to restrict the API key before you put it to use. Restrictions provide security and ensure that only authorized requests are made with your API key.


Next, you’ll need to add the scripts to your site. Here is some sample code showing what that could look like, starting with the CSS.


CSS

 

<style>

 #map {

    width: 100%;

    height: 400px;

    background-color: grey;

}

</style>


Next, JavaScript.



JavaScript

 

<script>

    function initMap() {

      var macc = {lat: 42.1382114, lng: -71.5212585};

      var map = new google.maps.Map(

          document.getElementById('map'), {zoom: 15, center: macc});

      var marker = new google.maps.Marker({position: macc, map: map});

    }

 </script>


Then, the library itself. See how your API key is visible here? That’s why you want to restrict it.



JavaScript

 

<script 

   async

   defer

   src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

</script>


That’s it! Now you have a responsive map created using Google Maps JavaScript API.

Which option is right for you?

If you’re prepared to accept the risk that there may be some charge associated with using Google Maps, or are happy to pass those charges along to your clients, then Duda’s native Google Maps solution is absolutely your best bet. Although, keep in mind, there’s nothing wrong with using the default Mapbox offering!


For cost-conscious agencies, embedding a Google Maps element is a great alternative. This eliminates the risk of any charges, and is very easy to implement for simple websites.


Of course, for more bespoke agencies, a super-custom solution may be the right choice. Google Maps offers APIs, SDKs and many step-by-step tutorials and code samples to help users create simple responsive Google Maps or highly customized maps which can do all sorts of cool stuff. With just a few steps, you can augment your site with an array of functionality from a simple map view through highly complex and interactive mapping tools.



Headshot of Shawn Davis

Content Writer, Duda

Denver-based writer with a passion for creating engaging, informative content. Loves running, cycling, coffee, and the New York Times' minigames.


Did you find this article interesting?


Thanks for the feedback!
A screenshot of a plumber's website with a
By Renana Dar May 5, 2025
Many SMBs still hesitate to embrace eCommerce. As the agency partner, you have the opportunity to tear down the perceived walls of eCommerce and show clients how eCommerce can make their business more efficient, accessible, and profitable. Read all about it!
A computer screen with a graph on it and a purple background.
By Santi Clarke April 24, 2025
Learn how platform ecosystems drive revenue and why they are essential for the growth of SaaS businesses.
By Santi Clarke April 24, 2025
One of the greatest challenges for SaaS platforms is keeping users engaged long-term. The term “stickiness” refers to a product's ability to retain users and make them want to return. In the context of SaaS platforms, creating a sticky product means that users consistently find value, experience seamless interactions, and continue using the product over time. The following are 7 practical strategies you can take to improve the stickiness of your SaaS solution. 1. Offer websites that help customers build their digital presence One of the most effective ways to make your SaaS platform sticky is by offering websites to your users. Many businesses today need an online presence, and by providing a platform where your customers can easily build and manage their websites, you increase their reliance on your product. When you offer users a website-building solution, you’re helping them create something foundational to their business. Websites, in this case, aren’t just a tool—they become a part of their identity and brand. This deepens their engagement with your platform, as they need your product to maintain and update their site, ultimately making them less likely to churn. Plus, websites naturally encourage frequent updates, content creation, and customer interactions, which means your users will return to your platform regularly. When you can give your users the tools to create something so essential to their business, you make them more dependent on your platform. This creates a higher barrier to exit, as migrating a fully built website to another service is no small task. In fact, websites are some of the stickiest products you can sell, so adding them to your product portfolio can be one of the best decisions you can to keep your customers using your technology for the long haul. 2. Deliver continuous value through product innovation The key to keeping users coming back to your SaaS platform is ensuring that they consistently see value in it. This means not only meeting their immediate needs but also evolving to address their growing demands. Constant product innovation is essential for keeping your users satisfied and invested in your platform. One way to achieve this is through regular updates that add new features or improvements based on user feedback. A SaaS platform that evolves with its users will keep them engaged longer, making it harder for competitors to steal their attention. Encourage user feedback and prioritize updates that create tangible improvements. This creates an ongoing relationship with your users, which boosts stickiness. 3. Offer a multi-product solution Another powerful way to increase your platform’s stickiness is by offering a suite of products or features that integrate well together. When your users adopt multiple products, they are more likely to stay because they become embedded in your ecosystem. The benefits of this strategy are clear. Research shows that once users adopt more than one product, especially when they integrate >4 tools into their workflow, their likelihood of churn decreases significantly. This happens because the more a user integrates into your suite of products, the harder it is for them to switch to a competitor. These users have invested time in learning your ecosystem and rely on it for their day-to-day operations, making it much harder for them to make the switch. 4. Create a personal connection with your users Human connection is one of the most powerful drivers of user retention. People don’t want to feel like they’re using a cold, faceless platform. By offering exceptional customer support, personalized communication, and community engagement, you build a relationship with your users that goes beyond the product itself. Make sure your support team is responsive, knowledgeable, and empathetic. You can also consider offering tailored onboarding experiences to ensure users understand how to make the most of your platform. When users feel like their success matters to you, they are more likely to remain loyal. 5. Leverage data to personalize the user experience Using data to drive personalization is another strategy that can significantly increase the stickiness of your platform. By tracking user behavior and usage patterns, you can tailor the experience to each individual user’s needs. This could mean recommending features they haven’t yet explored or sending them reminders about tools they may not be fully utilizing. Personalization gives users the feeling that the platform was designed specifically for them, making it harder to walk away from. By demonstrating that you understand their unique needs, you can build a stronger connection and ultimately increase retention rates. 6. Focus on seamless integrations and API capabilities To further increase stickiness, consider expanding your product’s ability to integrate with other tools your users already rely on. Whether it’s email marketing software, CRM systems, or social media management tools, seamless integrations add tremendous value by making it easier for users to incorporate your platform into their existing workflows. The more your product can work in tandem with other popular tools, the more indispensable it becomes. In fact, users who depend on integrations are less likely to churn since their entire ecosystem is tied to your platform’s functionality. 7. Encourage user advocacy and community building User advocacy is another powerful tool in building a sticky product. When users feel a sense of community or even ownership over the platform, they become your most passionate promoters. Encourage your users to share their success stories, join community forums, or contribute to product development through beta testing or feedback loops. A thriving user community not only increases user engagement but also creates a sense of loyalty. When users are part of something larger than themselves, they are more likely to remain committed to your platform, reducing churn and increasing lifetime value. Create deep, lasting customer relationships Making your SaaS platform sticky is all about creating a deep, lasting connection with your users. This requires building a platform that continuously delivers value, creating a seamless and personalized experience, and integrating features that keep users coming back. By focusing on product innovation, offering a multi-product ecosystem, and fostering strong user relationships, you’ll be well on your way to reducing churn and boosting user retention. Stickiness isn’t just a nice-to-have; it’s essential for long-term success. Focus on creating a platform that users can’t imagine living without, and you’ll see them stick around for the long haul.
Show More

Latest posts