Create Responsive Google Maps on Any Website
Google Maps makes it easy to embed a map in your own website. However, by default, Google Maps doesn’t provide responsive support.
In this short tutorial, I’m going to show you how to make your maps responsive, using just a few lines of CSS. This technique will work on any website platform.
Step #1. Get the Google Maps Embed Code
- Go to Google Maps.
- Find the map area you want to use on your website.
- Click on the “Share” link.
- Choose “Embed map”.
- Select the iframe code.
- Right click and copy the embed code.
Step #2. Use the Google Maps Embed Code
Paste the embed code in your website. It will look similar to this:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>#3.Modify the Embed Code
Add a div tag around the embed code. Use the CSS class map-responsive so that your code now looks like this:
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>Step #3. Add your Google Maps CSS
Now add some CSS properties inside one of your stylesheet files:
.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}Your maps now will be responsive. Try resizing your browser to see it in action.
Thank’s a lot Valentin…. it work on joomla!
I’m glad it worked, @virginieloche !
How did you do in Joomla? I have inserted the html code in a module and the CSS code in template settings “Custom Code CSS”. But the map is not responsive.I use Helix 3 Template.
Try the OSEmbed plugin if this is proving difficult [url=https://www.joomlashack.com/joomla-extensions/osembed/]https://www.joomlashack.com…[/url]
Hi, I inserted the HTML code in Joomla –>backoffice –> composant –> Fiche contact –> “your-contact-site-name” –>information diverse … then insert HTML code in Toggle editor and the CSS in the style.css.
Good luck
It’s better to put code in custom.css. Code will disappear from style.css when template is updated.
Nice and useful tip!
PS: Although I do not understand the first rule set. How does one find out such values? ??
Hi @pepperstreet ,
May you be more specific, please
Regards
Everything’s o.k. I was referring to the “56.25%” Hence the 😉 at the end.
Comes from the aspect ratio 16:9.
9/16×100 = 56.25
Regards
Nerdy-Awesomeness 😉
This is a great tutorial!
What about the usage of using other frameworks classes like Bootstrap or Foundation to automate the responsiveness?
Hi @toad78 ,
I’m glad you like the tutorial!
Bootstrap already include it’s own support for any iframe element: [url=http://getbootstrap.com/components/#responsive-embed]http://getbootstrap.com/com…[/url]
Foundation too: [url=http://foundation.zurb.com/docs/components/flex_video.html]http://foundation.zurb.com/…[/url]
Regards
Great. I’m surprised Google hasn’t improved their embed code but this will work.
Thank you , very helpful.. 🙂
very good, thanks
Now my works website is perfect. I would have never thought of this ! Thank you very much !
How to add our location in this map ????
Add your LatLang. 🙂
Terimakasih banyak, Thank you very much.
So easy and great, like it!!
Thank you, it workson my plain html site!
Very useful, thanks
Great. Very useful, thank you.
Thank you…worked well.
Would just like to add that if the map is to be added to a column underneath another element….like text…it will cover whatever else is in the column. But this can be fixed by changing the frame position to relative.
Thanks again.
Thank’s a lot..
Thanks 🙂
Thanks Eric
Wow, it worked for me! Thank you Valentin for sharing this info.
You’re welcome, thanks Lucian
great, but how to customize zoom value?
Thanx alot. This was very helpful. It works well.
Glad it helped, Amulike! 🙂
Its not working in Html website..
Thank you.. it´s very useful
Dude !!! Thanks !!!! Awesome !!!!!
term responsive have two options in terms of embedded google map one is css which will adjust maps width and hight when browser window will resize another term is whenever browser window is resize you want your map marker into center which is not possible by just using css to move your marker into center i come with following solution.
$(window).resize(function(){
var ref=$(‘iframe:first’).attr(‘src’);
$(‘iframe:first’).attr(‘src’,ref);
});
whenever browser window will resize the above code will take map url from iframe tag and again load it into iframe this will move your map into center because it fetch new map every time window size is change.
hope this will help!!!!!
Thank you for this tip. I worked for me where as the above did not centre the map but it was what I was originally searching for oh to make the iframe responsive.
I cannot understand why when responsive websites are something that Google wants you to have they themselves do not supply a workaround. Plus their guidance on embedding maps is not for an amateur designer.
Working great but can i use it in retina ready page ?
I see no reason why you wouldn’t be able to.
Thank you, Valentín, for beautiful and extremely helpful code.
Glad to hear it was helpful, Andreas
Yes, and I, too, believe it is ironic that Google issues me a warning in the SERPs that my website is not mobile-friendly, while they haven’t bothered to make their own maps responsive (or correct, for that matter).
Thanks man.
It’s working properly.
thank you!
Working on wp, thanks! pretty simples steps! great job!
Thank you!! Just tried on Squarespace. Worked like a charm.
how to make google map responsive to your location? i have classified ads website which serve different countries. i would like open as where the user opening the website. as if some body open website in usa then it move map location to usa and if someone open it in uk then the uk map open up with user location.
Hi Khalid,
You would need to add some geolocation information so that you can create location points.
Thanks
Daniel
Thanks man!
Any idea how I would go about making the map display one size on a PC and a different size proportion mobile devices? – like when the responsiveness sets in.
Thank you Valentin!
Thanks Valentin, It worked straight away.
Thanks, It work smartly
THANK YOU! I’ve been looking to see how to do this.
many thanx. I used it on wordpress and it’s work very well. simply and usefull. thanx
i wanna the map of my city what can i do pleas?
my map disapears if i use this code, can anybody help?
Hello it work nice. How to do to have it work in Contact >> Miscellaneous Information?
Thank you
Thank you Valentin, that was very helpful
just write the embed width:100% then your maps turn to responsive
THANKS SO EASY!
Thanks, It works great.
Thank you Valentín! This works perfectly. However, when viewed in mobile, the map is very squished and can’t be used. How could I modify the code, so that the Google Map (on Mobile) is longer?
Really great little work around, however, as someone else has stated the map cannot be enlarged or moved around when viewed on mobile. It’s basically a static image. Any ideas on how to change this?
how to change the location in google map
Thank you, Valentin. Nice and clear tutorial.
Was wondering why my page had suddenly stopped being non-responsive. ‘Twas the freakin’ map being stubborn af.
Thanks a lot, it really helped me! 🙂
Gracias por la información me fue de mucha ayuda
Worked like a charm. Thanks, Valentín.
Thank you very much!!!!:D