Embedding a Responsive Google Map

[bphipps]

I've created a custom Google Map that I want to embed on the splash page of my site. In order for the map to not look horrible on the mobile version of the page, I need the Google map to be responsive. Since it's a custom Google Map, I can't use the Weebly Map feature and need to embed. If anyone has ideas on how to do this, it would be greatly appreciated.

[Robin12]

Hello!

Unfortunately, Google doesn't currently offer responsive code to make it an easy copy and paste. However, with some customizations, you can make your map responsive using the tutorial below. 

#1  

First get your embed code which will look like this

<iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387144.0075834208!2d-73.97800349999999!3d40.7056308!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1394298866288' width='600' height='450' frameborder='0' style='border:0'></iframe>

#2 

Modify the code by adding a div around the generated iframe.

I recommend using the CSS class GoogleMap-Responsive. Paste the code into an embed code element where you want the map to appear.

<div class="googlemap-responsive">
   <iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387144.0075834208!2d-73.97800349999999!3d40.7056308!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1394298866288' width='600' height='450' frameborder='0' style='border:0'></iframe>
</div>

#3 

Add the CSS. Go to the code editor by clicking Theme>Edit HTML/CSS on the lower left. Choose the main_style.css file. Scroll to the very bottom and add the following. Save the theme.

.googlemap-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.googlemap-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

#4 Publish and test your code. 

Please note: We do not support customizations of themes. But this should tackle the responsive issue with Google Maps. 

[Adam7]

Just to piggyback on Robin's comment, if you don't want to customize your theme you can do this, too:

1. Take the CSS (the last code block in her post) and put style tags around it like so:

<style>
.googlemap-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.googlemap-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
</style>

2. Add it to the either Settings > SEO > Header Code for your whole site, or select the Page on the pages tab, then "Advanced", and paste it in the Header Code field there for a single page.

These extra steps will mean you don't need to worry about customizing your theme if you don't want to. Good luck!

[gregbuk]

Is there a work-around for allowing Google to crawl your iframes that are embedded in a Weebly site?  I have never been able to get their crawlers to crawl thru an iframe on any weebly site...bad design feature for those who want to use weebly for SEO...

[Adam7]

I don't think so; I suspect this is deliberate on Google's part to prevent people from using it as a way to try and bump their ranking.

[loansbyash]

The iframe embeds just fine:

https://loansbyash.weebly.com/get-directions.html

But I can't get the input to work for the user to enter their address:

I tried adding the googlemap-responsive class as suggested but then removed it when it didn't seem to work.

Any ideas?

[cchoo99]

You can Actually go to the Google Maps website and after getting the embed-able code, just drag an "Insert embedded code" tile onto your web page.

[NJRFTF]

From Google...

"Google supports frames and iframes to the extent that it can. Frames can cause problems for search engines because they don't correspond to the conceptual model of the web. In this model, one page displays only one URL. Pages that use frames or iframes display several URLs (one for each frame) within a single page. Google tries to associate framed content with the page containing the frames, but we don't guarantee that we will.

If you're concerned with how your site appears in the Google search results, please read Search Engines and Frames This document describes the use of the "NoFrames" tag to provide alternate content. If you use wording such as "This site requires the use of frames," or "Upgrade your browser," instead of providing alternate content on your site, then you'll exclude both search engines and individuals who've disabled frames on their browsers. For example, audio web browsers, such as those used in automobiles and by the visually impaired, typically do not support frames. Read more about the "NoFrames" tag."

https://support.google.com/webmasters/answer/34445?hl=en

[AndrewWbly]

Why complicate things? Similarly, to the Google iframe, you can add the code to the right page, and you're done. I got the guide at https://elfsight.com/help/how-to-add-google-maps-builder-to-weebly (custom map, adaptive design, etc).

Or did I get you wrong?