WebSite X5Help Center

 
Spiros F.
Spiros F.
User

Responsive Google Maps  en

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
13 ANSWERS
Spiros F.
Spiros F.
User
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.

Read more
Posted on the from Spiros F.
Spiros F.
Spiros F.
User
Author

The site is nice and good for advertising but the Google map at the bottom of the page is not responsible

Read more
Posted on the from Spiros F.
Giancarlo B.
Giancarlo B.
User

Thank you, please show me an example of responsive map?

Read more
Posted on the from Giancarlo B.
Spiros F.
Spiros F.
User
Author

The Google map is responsible and I apologise for my mistake

Read more
Posted on the from Spiros F.
Giancarlo B.
Giancarlo B.
User

exact and you can easily do with the object of the program map

Read more
Posted on the from Giancarlo B.
Pavel M.
Pavel M.
User

Map to full screen prevents scrolling up and down and very uncomfortable when you get it.

Read more
Posted on the from Pavel M.
Giancarlo B.
Giancarlo B.
User

it is true, the limit does not just extend it to 100% but 85% leaving some on the right for scrolling space

Read more
Posted on the from Giancarlo B.
Spiros F.
Spiros F.
User
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.

Read more
Posted on the from Spiros F.
Alvin C.
Alvin C.
User

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.

Read more
Posted on the from Alvin C.
Alvin C.
Alvin C.
User

ps. remember to adjust the settings for the HTML Code like whether or not you want scrollbar. Or automatic height etc.

Read more
Posted on the from Alvin C.
Spiros F.
Spiros F.
User
Author

Everything is very clear now.

Thank you

Read more
Posted on the from Spiros F.