CODEWITHSUNDEEP
google-mapsiframe
GuerillaRadio
GuerillaRadio

Reputation: 1297

Embedded Google Map zoomed out/not centred & generally buggy

I've embedded a Google Map into a page on my Wordpress website by switching the WYSIWYG from 'visual' to 'text' and copying and pasting the iframe code directly from Google.

The map should look like this, and this is the preview I'm getting on Google Maps:

enter image description here

But instead the output once the page is saved is this:

enter image description here

The size of the iframe is fine, but obviously the zoom is way out. I've tried setting the zoom manually by appending the iframe src attribute with &z=16 or &zoom=16 (suggested here - https://productforums.google.com/forum/#!topic/maps/kcjwmB5XFx8) but it makes no difference. I've also tried embedding the map in the HTML directly rather than through the WYSIWYG but again it makes no difference.

Here is the iframe I'm using (direct from Google with the addition of the &zoom=16:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2378.829376418671!2d-2.177285999999947!3d53.399992000000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bb3692bfd0239%3A0xa83c755a7500764!2sThe+Wycliffe+Hotel+Ltd!5e0!3m2!1sen!2suk!4v1413989769351&zoom=16" width="891" height="501" frameborder="0" style="border:0"></iframe>

There is no CSS being applied to the iframe, can't work it out at all. I know people have had issues with the embedding on the latest version of Google Maps, so I have also tried reverting to classic Google Maps and using the old embed code, I can get the zoom working using the following code but can't center the map on the marker (the marker is in the very top left corner).

<iframe width="891" height="501" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?sll=53.399992,-2.177286&amp;sspn=0.0049128,0.0109864&amp;cid=757668333021562724&amp;q=The+Wycliffe+Hotel+Ltd&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;t=m&amp;ll=53.399992,-2.177286&amp;spn=0.006295,0.006295&amp;output=embed&z=16"></iframe>

enter image description here

When did embedding a map become so difficult? And when did it become necessary to add your own attributes to get the thing to render like the preview? I've seen so many issues similar to this since the new Google Maps was introduced.

Upvotes: 3

Views: 1367

Answers (1)

Gaurav Manral
Gaurav Manral

Reputation: 600

<embed> instead of iframe works </embed>

Upvotes: 0

Related Questions