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="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.

Author

  • Valentin Garcia

    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
Article Rating
Subscribe
Notify of
131 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Virginie Loche
Virginie Loche
8 years ago

Thank’s a lot Valentin…. it work on joomla!

htmgarcia
8 years ago
Reply to  Virginie Loche

I’m glad it worked, @virginieloche !

andrei
andrei
7 years ago
Reply to  Virginie Loche

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.

steve
steve
7 years ago
Reply to  andrei

Try the OSEmbed plugin if this is proving difficult [url=https://www.joomlashack.com/joomla-extensions/osembed/]https://www.joomlashack.com…[/url]

Loche
Loche
7 years ago
Reply to  andrei

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

felix-rimfrostgmail-com
Reply to  Loche

It’s better to put code in custom.css. Code will disappear from style.css when template is updated.

pepperstreet
8 years ago

Nice and useful tip!

PS: Although I do not understand the first rule set. How does one find out such values? ??

htmgarcia
8 years ago
Reply to  pepperstreet

Hi @pepperstreet ,

May you be more specific, please
Regards

pepperstreet
8 years ago

Everything’s o.k. I was referring to the “56.25%” Hence the 😉 at the end.

htmgarcia
8 years ago
Reply to  pepperstreet

Comes from the aspect ratio 16:9.

9/16×100 = 56.25
Regards

pepperstreet
8 years ago

Nerdy-Awesomeness 😉

toad78
toad78
8 years ago

This is a great tutorial!
What about the usage of using other frameworks classes like Bootstrap or Foundation to automate the responsiveness?

htmgarcia
8 years ago
Reply to  toad78

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

Jason Johnson
Jason Johnson
8 years ago

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

Sastro J.
Sastro J.
8 years ago

Thank you , very helpful.. 🙂

Eduardo
Eduardo
8 years ago

very good, thanks

Carlos Vega
Carlos Vega
8 years ago

Now my works website is perfect. I would have never thought of this ! Thank you very much !

Haris
Haris
7 years ago

How to add our location in this map ????

Nagendra Adabala
Nagendra Adabala
7 years ago
Reply to  Haris

Add your LatLang. 🙂

Fazuky
Fazuky
7 years ago

Terimakasih banyak, Thank you very much.

So easy and great, like it!!

Antonino
Antonino
7 years ago

Thank you, it workson my plain html site!

siamnaulak
siamnaulak
7 years ago

Very useful, thanks

Thanoopas T.
Thanoopas T.
7 years ago

Great. Very useful, thank you.

Hockey_Talkie
Hockey_Talkie
7 years ago

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
Mustaffa Yasin
7 years ago

Thank’s a lot..

Eric Rasolofonirina
Eric Rasolofonirina
7 years ago

Thanks 🙂

steve
steve
7 years ago

Thanks Eric

Lucian Tartea
Lucian Tartea
7 years ago

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

steve
steve
7 years ago
Reply to  Lucian Tartea

You’re welcome, thanks Lucian

Alfin Fauzano
Alfin Fauzano
7 years ago

great, but how to customize zoom value?

Amulike Kennedy Favoured
Amulike Kennedy Favoured
7 years ago

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

Nick
7 years ago

Glad it helped, Amulike! 🙂

Ami Soni
Ami Soni
7 years ago

Its not working in Html website..

Luis Alberto Hernandez Monroy
Luis Alberto Hernandez Monroy
7 years ago

Thank you.. it´s very useful

Christian
Christian
7 years ago

Dude !!! Thanks !!!! Awesome !!!!!

Deepak
Deepak
7 years ago

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

Joe_Pubic
Joe_Pubic
7 years ago
Reply to  Deepak

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
Tarun Sharma
7 years ago

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

daniel-pickering
7 years ago
Reply to  Tarun Sharma

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

Andreas Belivanakis
Andreas Belivanakis
7 years ago

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

steve
steve
7 years ago

Glad to hear it was helpful, Andreas

Andreas Belivanakis
Andreas Belivanakis
7 years ago
Reply to  steve

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
Jaygiri Y. Gauswami
7 years ago

Thanks man.

It’s working properly.

Keo Lor
Keo Lor
7 years ago

thank you!

Humberto Buitrago
Humberto Buitrago
7 years ago

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

Somewhere Saigon
Somewhere Saigon
7 years ago

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

Khalid Naseer
Khalid Naseer
6 years ago

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.

danielpickering
6 years ago
Reply to  Khalid Naseer

Hi Khalid,
You would need to add some geolocation information so that you can create location points.
Thanks

Daniel

juean
juean
6 years ago

Thanks man!

Samantha V
Samantha V
6 years ago

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.

Anonymous
Anonymous
6 years ago

Thank you Valentin!

Parma
Parma
6 years ago

Thanks Valentin, It worked straight away.

Vishal
Vishal
6 years ago

Thanks, It work smartly

Carla
Carla
6 years ago

THANK YOU! I’ve been looking to see how to do this.

alex
alex
6 years ago

many thanx. I used it on wordpress and it’s work very well. simply and usefull. thanx

mohamed mohamed haadi
mohamed mohamed haadi
6 years ago

i wanna the map of my city what can i do pleas?

123kl
123kl
5 years ago

my map disapears if i use this code, can anybody help?

Cstech
Cstech
5 years ago

Hello it work nice. How to do to have it work in Contact >> Miscellaneous Information?
Thank you

Darren Starr
Darren Starr
5 years ago

Thank you Valentin, that was very helpful

sayed jamil
sayed jamil
5 years ago

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

Antonia
Antonia
5 years ago
Reply to  sayed jamil

THANKS SO EASY!

Rob
Rob
5 years ago

Thanks, It works great.

Sabrina
Sabrina
5 years ago

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
Simon S
5 years ago

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
zeeshan salam
5 years ago

how to change the location in google map

Henry Hu
Henry Hu
5 years ago

Thank you, Valentin. Nice and clear tutorial.

Sahil
Sahil
5 years ago

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
Edgar Mendoza Gonzales
5 years ago

Gracias por la información me fue de mucha ayuda

Dan
Dan
5 years ago

Worked like a charm. Thanks, Valentín.

Nat
Nat
5 years ago

Thank you very much!!!!:D

131
0
Would love your thoughts, please comment.x
()
x