Responsive Google Maps
Author: Spiros F.
Visited 3680,
Followers 3,
Shared 0
When I use the object Google Maps, the created Google map in the web page is not responsible.
Any suggestions would be much appreciated
Posted on the
You may follow these instructions and it should work.
https://www.labnol.org/internet/embed-responsive-google-maps/28333/
Author
Thank you
At this page, I see parts of code between the: A) <style> and </style> and B) <div class="google-maps"> and </div>.
I think the part B is CSS code.
Where do I have to insert this code?
Do I have to change something at this example code or its ready to use?
When I use this example code for testing (with copy paste) the creating map is not responsible.
Consider this the respondive?
http://giancarlob.altervista.org/working-wmm/
Author
The site is nice and good for advertising but the Google map at the bottom of the page is not responsible
Thank you, please show me an example of responsive map?
Author
The Google map is responsible and I apologise for my mistake
exact and you can easily do with the object of the program map
Map to full screen prevents scrolling up and down and very uncomfortable when you get it.
it is true, the limit does not just extend it to 100% but 85% leaving some on the right for scrolling space
Author
Ok, with object Google Maps.
With instructions from the recommended, at the top of the thread site, can hide the white border with information’s at the left top of google map, if it is necessary.
With the link I sent you. There are two ways you can do it. I tested both ways and the map is responsive and shrinks according to the screen size.
First you need to copy the iframe code of the map location you want. You then replace the iframe code in the link I sent you with your own.
The <style></style> part and the code within is the CSS. You need the <div class="google-maps"></div> part too. As you are wrapping the iframe within the google-maps div. The style is the CSS for the google-maps div hence you see it referencing it in the style css.
1) First Way - Go to Settings > Advanced > Statistics, SEO and Code > Expert Tab > Copy and Paste the entire <style></style> part only in there. Then go to Pages > Drag HTML Code Object onto the page you want the Google Map. Now paste the <div class="google-maps"></div> including the iframe code inside the div into the HTML Code Tab not the Expert Tab. The Expert Tab is for CSS and it is for the Second Way of making Google Maps Responsive.
2) Second Way - Go to Pages > Pick the page you want the Google Map to be on > Drag HTML Code Object onto the Page > Paste the Div and Iframe code inside the HTML Code Tab. Now go to the Expert Tab of the HTML Code Object and Paste the CSS in the <style></style> except this time, you remove the <style></style> tags. Only paste the code within the style tags only. You don't need the <style></style> part for this method.
The difference between the two methods is the first way basically repeats the CSS in the head tag on all your pages. So on any page you can use the HTML Code Object and paste in the Div and Iframe code part and it will work. The Second Method is only for 1 page only, if you delete the HTML Code Object...all of it is gone. You would have to redo it. Unless you only need it on 1 page if not, the first way is probably the best.
ps. remember to adjust the settings for the HTML Code like whether or not you want scrollbar. Or automatic height etc.
Author
Everything is very clear now.
Thank you