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 being 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.
With this in mind, we decided to produce this in-depth guide to help you navigate the sometimes tricky world of Google Maps with ease, offering up all the options available as well as details as to why you may use them.
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.
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, and while it will increase credibility, as we’ve already stated, it can also boost your site in many other areas too. This could include:
For the most part, websites will use Google Maps on their contact page in order to highlight where their physical locations are. This adds a little more context for those who potentially want to visit the location, with roads, routes and local landmarks all visible.
It may be that you want to highlight a particular route on Google Maps. There are many reasons for this, from hiking or running routes to telling a story of a particular journey, which is especially useful for travel sites and blogs.
Alongside highlighting your physical location, eCommerce businesses can effectively integrate Google Maps into their site on store locator pages, which highlights the nearest stock of a particular product.
There are of course many other reasons too. Their aim is simple, to provide a visual overlay of the information you’re trying to get across, and with Google looking more and more for in-depth and useful features within the pages it ranks, it can be an excellent way to meet a user’s search intent.
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.
One of the best ways to integrate Maps into your site is with an Iframe code. It’s the simplest way, especially if you aren’t too clued up on website building. Below you’ll find full information on how to copy the Google embed code from Google Maps into a site’s HTML code. No other code of formatting is applied or required.
The code should look like the block below. You should paste this code directly into a website's HTML or, if using Duda, into the HTML Widget.
The resulting map has a static width and height of "600" and "450" pixels respectively. The size may be adjusted by changing the width and height attributes, but this map is not a responsive Google Map element, so it won't automatically resize on various devices. To make a responsive map, we need to dive a bit deeper.
There are other ways though, and some people prefer to take them and move away from iframes. It’s entirely possible to embed a responsive Google Map into a website without using a Google Map API. Here’s how you do it.
Add a CSS class called map-responsive around the iframe as follows:
Add the following CSS to your site's .css file:
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.
Although this type of responsive Google Maps integration may be required for older platforms like WordPress, 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 template. There are only a couple of things to do.
Changing the width and height of the iframe to 100% will allow the Google Maps embed 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.
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 Maps libraries.
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 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!
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’s Expert Program.
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.
