4 Ways To Make Google Maps Responsive On Your Website

When you are creating a website for business you may need to implement Google Maps. That’s easy. But what if you need it to be responsive? In this article, I will show 4 ways to make Google Maps responsive.

What Is Google Maps?

Millions of users access Google Maps monthly. Adding Google Maps to your website can help visitors locate your or your customer’s business and provide a better user experience. Embedding a map on your site can also reduce the bounce rate and help with your search engine optimization efforts.

Google Maps by default is interactive and very easy to integrate, but Google Maps are not responsive by default which means that it does not automatically resize based on device screen size. You have to add responsiveness yourself.

Although basic embedding is free and includes a simple view, a map pin, and your business information for more complex functions you have to pay.

How To Embed Google Maps Into Your Website?

Well, embedding Google Maps in any website can be done in multiple ways. Although not necessary some HTML, CSS, and JavaScript knowledge is helpful. Google provides the code and there are several ways to embed responsive Google Maps into any website using Iframes. In this post, I will address several methods giving you step-by-step procedures on how to embed responsive maps in any website.

Google Maps Integration Using Iframe Code Embed From Google

This section will cover copying the Google embed code from Google Maps into a site’s HTML code.  No other code of formatting is applied.

• 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 menu
• Select and copy the HTML iframe embed code

Paste the embed code into your HTML page or widget

The code should look like this. The “xxxxxxxxxx” represents the location Google code.

<iframe src=”https://xxxxxxxxxx” width=”600” height=”450” frameborder=”0” style=”border:0;” allowfullscreen=”" aria-hidden="false" tabindex="0"></iframe>

This resulting map has a static width and height of 600 and 450 pixels respectively.  The size may be adjusted by changing these size attributes, but this map is not a responsive Google map that will automatically resize on various devices. To make a responsive map, so you need to dive a bit deeper.

Create Responsive Google Maps Without API key

It’s possible to embed a responsive Google Map into a website without using a Google Map API.  Here’s how you do it.  

• 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 menu
• Select and copy the HTML iframe embed code

Paste the embed code into your HTML page or widget

<iframe src=" https://xxxxxxxxxx " width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

Modify the embed code

Add a CSS class called map-responsive around the iframe like this:

<div class="responsive-map">

<iframe src="xxx" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

Edit the CSS

.responsive-map{

    overflow:hidden;

    padding-bottom:56.25%;

    position:relative;

    height:0;

}

.responsive-map iframe{

    left:0;

    top:0;

    height:100%;

    width:100%;

    position:absolute;

}

You can change the height of the map by adjusting the padding-bottom value for example – padding-bottom:30%;

And now you have a responsive Google Map without using an API key. This method of embedding and CSS styling should work for any HTML-based website.

How To Embed A Responsive Google Map Without Google APIS

This type of responsive Google Maps integration is required to make this work in older platforms like WordPress and other website builders but implementation of responsive Google Maps is very simple and fast. There are only a couple of things to do.

Obtain a Google Embed Code

• 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 menu
• Select and copy the HTML iframe embed code

Paste the embed code into your HTML page or widget

<iframe src=”xxxxxxxx” width=”100%” height=”100%” frameborder=”0” style=”border:0” allowfullscreen></iframe>

Changing the width and height of the iframe to 100 percent will allow the Google Map to completely encompass the HTML widget container, making the Google Map responsive and easy to resize on any device.  No further CSS styling or media query usage is necessary when using this embed method.

Embed a Google Map Using JavaScript Via Google Maps APIS

Google Maps can be integrated into a website via APIs. Here is the method where you will need JavaScript knowledge. Although this example is quite simple the Google Maps platform provides complex features including drawing map markers, calculating distance and areas, displaying prominent points of interest, heatmaps, and more.

Create an API key

• Go to the Google Cloud Platform Console
• Select or create the project for which you want to add an API key
• Select APIs & Services > Credentials
• Click Create credentials > API Key

It’s important to restrict the API key before using it in production. Restrictions provide added security and help ensure that only authorized requests are made with your API key.

Add the scripts and API code

Add the map styling code to your page:

<style>

 #map {

    width: 100%;

    height: 400px;

    background-color: grey;

}

</style>

Add the map script that propagates the map element, and edit coordinates:

<script>

    function initMap() {

      var macc = {lat: -54.53514, lng: 95.57413};

      var map = new google.maps.Map(

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

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

    }

 </script>

Add Google Maps API script:

<script async defer

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

</script>

Now you have a responsive map created using Google Maps JavaScript API.