How to Add a Google Map to Your Website

A Google map is a great feature to have in a website as it enhances the user experience. It is a convenient feature from an end customer perspective, and hence, many people prefer having a map on their website. Embedding a Google map in a website is easy, but for those who have a hard time with this process, our quick and thorough guide on how to insert a Google map will surely provide the help.

Why Integrate a Google Map Into a Website?

Before proceeding to add a Google map, it can be helpful to understand what benefits it has and why you should consider having it on your website. Usually, this is something that website builder reviews while developing the website.

Having a Google map on your website makes it much more convenient for the customer to locate your business and adds reliability. Plus, a Google map has a design that can be easily embedded in a website. The basic integration offers a simple view, map pin, and business or company information.

Indeed, adding Google Maps on a website is not absolutely free, especially when you want to access its complete library of features such as showing several locations and Google Street View. Unlocking its advanced features need you to pay a specific payment amount.

How to Insert a Google Map Into Website

There are several methods to go about this. Learn about a few of them, decide which one is suitable, and proceed with it.

Using simple iFrame

This method means adding a Google Map to a website by copying the embedded code from Google Maps and pasting it in the site’s HTML code. Hence, the first step is acquiring the embedded code from Google Maps that can be achieved by following the below steps:

Visit Google Maps via app or website
Find the location you want to add using the search option
Click on the Share button
Select the Embed a map option
Choose the map’s size using the drop-down feature on the left (small, medium, large, and custom size)
Copy the HTML code

Now, you can paste this code into the HTML page. The code will have specific attributes representing the height, width, and location code. These attributes can be modified by changing their values. Note that this is not a responsive Google map that implies it is incapable of resizing according to the screen size automatically.

Developing a responsive Google map without the Google API key

Users can access your site using a PC, smartphone, or tablet, all with varying display sizes. Hence, you can’t rely on an unresponsive Google map if you want all their users to have the best user experience.

If you wish to add a map to a website and make it responsive without utilizing the Google API key, you can achieve it using CSS editing. Given below are the steps that can be followed to do so.

In this method, the first step remains the same: you need to acquire the embedded code from Google Maps. Then, paste the copied code to the HTML page. If you want to make it responsive without introducing a CSS class, you can change height and width attributes to 100 percent. This way, Google Maps will fill up the entire HTML container. Thus, enabling Google maps to resize according to display size.

To make it responsive, you can also change the embedded code by adding a map responsive CSS class in the code. Refer to the below example:

Original embedded code:

Embedded code with modified CSS class:

</div>

Now, add the Google Map CSS code as illustrated below:

.map-responsive{

overflow:hidden;

padding-bottom:40%;

position:relative;

height:0;

}

.map-responsive iframe{

left:0;

top:0;

height:100%;

width:100%;

position:absolute;

}

If the above instructions are followed precisely, you will have a responsive Google Map that will function smoothly with major HTML-based websites.

Making a responsive Google Map using Google API keys

A Google map can be made responsive by using API keys. Although, for this, having proper HTML and Javascript knowledge is a prerequisite. But look at a simple example:

The first step in this method is to create an API key. This can be done by following the given steps:

Visit the Google Cloud Platform Console
Pick or create the project for which the API key is needed
Choose APIs & Services > Credentials
Click on Create credentials > API Key

Remember to restrict the APIs for additional security so that the only permitted user requests are made.

The next step involves putting together the script and the API code. First, put in the map styling code which may look as follows:

<style>

#map {

width: 100%;

height: 400px;

background-color: grey;

}

</style>

Now add the map script and modify the coordinates as needed as given below:

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>

The last step is adding the Google API code that should look similar as follows:

<script async defer

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

</script>

With the final step complete, you now have a responsive Google Map ready for integration into a website.

Utilizing third-party services

Often changing and modifying codes may seem beyond your level of expertise, or you are willing to do it on your own because it is not always so straightforward. In such instances, you have plenty of third-party services to choose from. This is an efficient solution when you have business at several locations, and you require complex features such as a street view, a map view, themes, and more to be a part of it.

Conclusion

There are multiple ways you can deploy to get an effective and responsive Google map on your website. These methods can be utilized to insert simple maps or maps with advanced attributes and proper responsiveness.

Note that if you feel at any point that you do not want to modify the code or there are too many locations to add, taking help from an expert is always the best option in this case.