Create Responsive Google Maps on Any Website

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.
Getting the share link for Google Maps
  1. Choose “Embed map”.
  2. Select the iframe code.
  3. Right click and copy the embed code.
Getting Google Maps share code

Step #2. Use the Google Maps Embed Code

Paste the embed code in your website. It will look similar to this:

<iframe src="!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="!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>

Step #3. Add your Google Maps CSS

Now add some CSS properties inside one of your stylesheet files:

.map-responsive iframe{

Your maps now will be responsive. Try resizing your browser to see it in action.


  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Notify of
Newest Most Voted
Inline Feedbacks
View all comments
Virginie Loche

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=]…[/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


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


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=]…[/url]
Foundation too: [url=]…[/url]

Jason Johnson

Great. I’m surprised Google hasn’t improved their embed code but this will work.

Sastro J.

Thank you , very helpful.. 🙂


very good, thanks

Carlos Vega

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 ????

Nagendra Adabala

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

Thanoopas T.

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.

Mustaffa Yasin

Thank’s a lot..

Eric Rasolofonirina

Thanks 🙂


Thanks Eric

Lucian Tartea

Wow, it worked for me! Thank you Valentin for sharing this info.


You’re welcome, thanks Lucian

Alfin Fauzano

great, but how to customize zoom value?

Amulike Kennedy Favoured

Thanx alot. This was very helpful. It works well.


Glad it helped, Amulike! 🙂

Ami Soni

Its not working in Html website..

Luis Alberto Hernandez Monroy

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.

var ref=$(‘iframe:first’).attr(‘src’);


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.

Tarun Sharma

Working great but can i use it in retina ready page ?


I see no reason why you wouldn’t be able to.

Andreas Belivanakis

Thank you, Valentín, for beautiful and extremely helpful code.


Glad to hear it was helpful, Andreas

Andreas Belivanakis

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

Jaygiri Y. Gauswami

Thanks man.

It’s working properly.

Keo Lor

thank you!

Humberto Buitrago

Working on wp, thanks! pretty simples steps! great job!

Somewhere Saigon

Thank you!! Just tried on Squarespace. Worked like a charm.

Khalid Naseer

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 man!

Samantha V

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

mohamed mohamed haadi

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

Darren Starr

Thank you Valentin, that was very helpful

sayed jamil

just write the embed width:100% then your maps turn to responsive




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?

Simon S

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?

zeeshan salam

how to change the location in google map

Henry Hu

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! 🙂

Edgar Mendoza Gonzales

Gracias por la información me fue de mucha ayuda


Worked like a charm. Thanks, Valentín.


Thank you very much!!!!:D

Would love your thoughts, please comment.x