Google Maps™ can drive business right to your front door by providing your address, directions and landmarks for your customers to find you. In today's mobile-driven world, we need directional maps that are responsive to the devices our customers are using. Currently, Google Maps™ are inserted using a non-responsive iframe which when viewed on a mobile phone is difficult to use. Another problem is most map sites do not offer responsive based maps as they all come with fixed height and widths in their markup.

In this article, we will walk you through how to modify the Google Maps™ markup provided and customize it to become responsive within your project!

Adding a responsive map with Responsive Site Designer

If you wish to have a separate CSS file, follow the steps outlined in the RLM section below. However, there is a much easier way to accomplish this in RSD without having to create an extra file.

Step 1:

To get started, you first add an HTML Element to your page and then go to the Design pane and paste in the following markup in the HTML input box:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='embed-container'> ---INSERT IFRAME CODE HERE--- </div>
Adding Code to HTML input
Step 2:

Once you have pasted the markup into your HTML Element, copy the iframe code for your map provided by Google, and replace the ---INSERT IFRAME CODE HERE--- with the iframe code you want to use.

 

This works with iframes, objects, and embed code!

Yep, that is right, not only can you use it with any iframe (maps, videos, etc), you can also use it for any embeddable, or object code! Did we not say Responsive Site Designer makes it easier? :)

 

Don't forget to Pad your Map!

When getting into the lower breakpoints it is best practice to ensure the user has enough room between the sides of the screen and the iframed content. As with our Map, the user will start scrolling through the map rather than your page.

Adding a responsive Google Map with Responsive Layout Maker

Using the Milky-Way-Contact layout, we will insert a Google Map into your exported website from RLM.

Step 1:

Download and open the project file found here:

Milky-Way-Contact.rlmp
Step 2:

We need to add a custom.css file as we will be adding custom CSS in Step 9 of the article.

Click the Layouts Toolbar icon and then Manage Projects and select the contact file and paste in the link to the custom.css file

<link rel="stylesheet" href="css/custom.css" type="text/css">
Custom Header Window
Step 3:

Retrieve the embed code from whichever service you are using (e.g. Google, Yahoo, etc.). We will be using Google Maps™ for this tutorial.

Here is the test code we will be using:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d212270.5451230493!2d-84.42060395!3d33.7677129!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f5045d6993098d%3A0x66fede2f990b630b!2sAtlanta%2C+GA!5e0!3m2!1sen!2sus!4v1396981185525" width="600" height="450" frameborder="0" style="border:0"></iframe>
 

Where should you place the Map in your layout?

It is easier to manipulate an iframed map that is contained within its own column. Having the map inline with other content can cause positioning issues.

Step 4:

We are going to be replacing the map image which we are using as a placeholder for our Google Map, with the embed code above. To accomplish this we, need to export the project by going to the File Menu > Export and export your project to the desired location.

Step 5:

Open your project in your favorite HTML Editor but you can use whatever program you like.

Step 6:

Open the contact.html file and locate the “google-map” image in the code.

<img class="map google-map" src="img/map-5x1.svg" alt="Map"> 
Step 7:

Delete the image’s code and replace it with your Google Map’s embed code.

We also need to wrap the iframe code in a <div> so that we can manipulate it. When finished it should look something like this:

<div class="cc-map-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d212270.5451230493!2d-84.42060395!3d33.7677129!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f5045d6993098d%3A0x66fede2f990b630b!2sAtlanta%2C+GA!5e0!3m2!1sen!2sus!4v1396981185525" width="600" height="450" frameborder="0" style="border:0"></iframe></div> 

That is all that is needed to embed the Google Map into your website. However, the map is not responsive, so we need to add some custom CSS to make the magic happen.

 

The marker does not stay centered! Why not?

When you scroll the page down in size the marker will not stay centered on the map, however you should not worry about that, because as when the page loads to the screensize that is being used, the marker will be centered for that screensize. Resize the page, refresh it and try for yourself.

Step 8:

Next, create a new CSS file and save it as custom.css file inside the css folder that was exported from RLM.

Step 9:

Now for the fun part. ;) We need to define the cc-map-wrapper class we set in Step 7 and apply a few simple CSS rules to allow the map to be positioned within the cc-map-wrapper <div> allowing for a fluid width rather than a fixed width which adapts to the shrinking screen size.

Setting the cc-map-wrapper class to relative declares that all elements in that wrapper will position relatively to the wrapper it is contained inside of. The padding-bottom and height rule sets the dimensions of the box.

Finally, we need to set some rules for the <iframe> itself. By setting an absolute position we are telling the <iframe> that it can "take up" the space of its parents padding and height. To position the <iframe> within the parent element (cc-map-wrapper), we use top and left properties. Lastly, by adding width and height we obtain the responsive look we are after.

.cc-map-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.cc-map-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
 

Do you have Multiple Maps?

That is perfect! Simply repeat Step 7 for each of the maps you add to your page. If the map is on a separate page do not forget to link in the custom.css file as we did in Step 2!

Now that you have the steps and know-how try applying this to your own project!

Responsive Google Maps™ Example

 
 

Missing some settings?

This is because Responsive Layout Maker Pro was used for the creation of this article. One or more of the settings used here might not be available in Responsive Layout Maker. For the most part however, you can continue through the article adjusting the settings that are available to you.