Center Google Map Shortcode

loneworldtraveler · Member · Feb 20, 2018 at 4:34 pm
Copy link

Add topic to favorites
Hello everyone,

I would like to ask if there is a way to center a google map created with shortcode (especially in tablet view). I have tried placing it between div brackets but it didn’t seem to work. Is there a special shortcode attribute? Thanks very much in advance.

The blog I need help with is: (visible only to logged in users)
epoolman · Staff · Feb 20, 2018 at 5:43 pm
Copy link
Hi loneworldtraveler!

I’m not sure if you would be able to center the map, but a work around is to set the width in the shortcode to 100%. That will enlarge the map to take up 100% of the width of the content area, regardless of the screen size.

If this is your shortcode, you will notice at the end two numbers, the first one is the width and the second one is the height. If you change the w=640 to w=100% it should be better.

[googlemaps https://www.google.com/maps/d/embed?mid=1IdiMDJKoVpN9YvrfeRp7zwAbJzwhqLa7&w=640&h=480]

And this is how it will look like after you changed it:

[googlemaps https://www.google.com/maps/d/embed?mid=1IdiMDJKoVpN9YvrfeRp7zwAbJzwhqLa7&w=100%&h=480]

Let me know if this works for you!
epoolman · Staff · Feb 20, 2018 at 5:46 pm
Copy link
Sorry, this should center the Google Map,
```
<div style="text-align:center;">
GOOGLE MAP SHORTCODE HERE
</div>
```
loneworldtraveler · Member · Feb 20, 2018 at 6:01 pm
Copy link
Hello epoolman! Thank you very much for your replies! The first solution actually worked out. I set the width to 100% and the result was excellent. The second solution doesn’t work and I cannot find the reason why. Thank again!
epoolman · Staff · Feb 20, 2018 at 6:28 pm
Copy link
Glad that worked!

I tested the div method on another theme and it worked there, but when I tried it on your theme, Plane, it strips the divs, just leaving the shortcode. Not sure why that is happening.

But at least the 100% worked!
loneworldtraveler · Member · Feb 20, 2018 at 6:46 pm
Copy link
It is actually weird that the div doesn’t work. But the 100% width saved me! Thank you and keep up the good work!

No items found.