How to Add Google Maps to Website Html

Once in a while, you may have a web design customer ask specifically about responsive Google maps. Now if you're already familiar with Duda's platform , you'll know its professional-grade website builder comes with a fantastic responsive map widget powered by Mapbox . We love Mapbox because it allows for easy integration into mobile and online applications, and is highly adaptable to new map designs and layouts. Not to mention, it has great global coverage.

That said, if a Google map is required for a project, you're still covered. Duda's flexible platform enables you to easily add nearly any kind of map you and your customers would like to use.

Here are five ways to add a responsive Google map to any website…

A little about Google Maps

More than 150 million users access Google Maps monthly .  Adding a responsive Google Maps widget can help consumers locate your customers' businesses, gives credibility to their organizations, and improves the overall user experience. Embedding a map on your site can also reduce the bounce rate and helps with your search engine optimization efforts.

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. Additional programming is needed to make automatic resizing possible.

Do you have to pay for Google Maps to put it on a website?  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.

If you're interested, click here to learn more about how Google API billing works. Otherwise, let's talk about working with responsive Google Maps.

How do I embed Google Maps into my website?

Embedding Google Maps in any website can be done in a variety of ways.  A novice can handle most of the code, although some knowledge of HTML, CSS, and JavaScript is helpful. Google provides the code and there are several ways to embed responsive Google Maps into any website using Iframes. In this post we will address several DIY methods by describing step-by step-procedures on how to embed responsive maps in any website platform, including Duda and others.

Google Maps Integration using simple 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.

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

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

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

Paste the embed code into your HTML page or widget

Modify the embed code

Add a CSS class called map-responsive around the iframe as follows:

Edit the site CSS

Add the Google Maps CSS code as follows:

You can change the height of the map by adjusting the padding-bottom value like this: padding-bottom:40%;

You now have a responsive Google Map without using an API key. This method of embedding and CSS styling should work for any HTML based website. Learn how to use media queries for standard devices here.

How to embed a responsive Google Map without Google APIs or further styling CSS

Although this type of responsive Google maps integration is required to make this work in older platforms like WordPress and other website builders, the Duda HTML widget makes the implementation of responsive Google maps very simple and fast if you want to embed one in a Duda website. 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
• Select and copy the HTML iframe embed code

Paste the embed code into your HTML page or widget

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. In addition to HTML and CSS, knowledge of JavaScript is required.  Although our 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.  You can find more details in the Google Map libraries .

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:

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

Add Google Maps' API script:

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

Google Map Embed using third-party widgets & plugins

Sometimes, you just don't feel like messing around with code and want a ready made widget. Well, good news! TheCamel.co , a long-time Duda partner, created a Google Map widget specifically for use on the Duda platform. This widget works great for local businesses that have multiple locations and has advanced features like theme and pin customizations, logo and business info display, and zooming for street and map view.

When it comes to Google Maps integration, there are multiple ways to get the job done. They range from DIY methods for a simple map integration and custom widgets to advanced JavaScript Google Map API implementation.

Remember: If you don't want to write code and you need multiple locations, a professional web design platform like Duda makes it very easy to intuitively add advanced code via widgets. And if you want to avoid coding altogether,  you can find the right developer through Duda'sfulfillment channel .

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.

How to Add Google Maps to Website Html

Source: https://blog.duda.co/responsive-google-maps-for-your-website

Share this post