CODEWITHSUNDEEP
javascriptgoogle-mapsiframezoomingembed
MicroMachine
MicroMachine

Reputation: 183

Modify the zoom level of an embedded Google Map

I'm trying to embed a Google Map on a website using the "embed" function located in the little gear on the bottom right of Google Maps, but it doesn't work.

The code Google gives me is 

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2624.5858505793394!2d2.3871443!3d48.86610729999999!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66ded9ca48efd%3A0xa93530d75f2314da!2s39+Rue+Duris%2C+75020+Paris%2C+France!5e0!3m2!1sen!2sus!4v1423516102867" width="400" height="300" frameborder="0" style="border:0"></iframe>

And the resulting embedded map looks like poo poo:

http://ge.tt/7BYxCBA2/v/0

I searched on Gogol for help with this, but even their own tutorials provide codes that don't work anymore (!)

I've looked at similar questions here on Stack Overflow, but they all dated back to years ago when the embed code had a different structure, and you could add "&zoom=10" or "&z=10" and it would work, so I still tried that, but it didn't work.

I've also tried registering for an API key, which is what it seems Google wants you to do, but that didn't work out although the code looked different this time. So I added "&zoom=10" to this code, which closed the zoom into the address, but it didn't have the address in the middle of the map, but outside of the map, and also I would rather not have to use an API key.

Then I thought "stoopid Google!" and I tried embedding a Yahoo! Map. No succedd here either - just a blank frame!

The failed results are on the contact page here: http://www.h3ds.fr/v2/

Please help :)

EDIT: Obviously I had to move on with this topic since I couldn't get a simple way to make the Google code work within my workframe. My solution was to place a clickable screen grab of Google Maps where the map was, linking to the Google Maps website. Until Google makes codes that work, this works great!

Upvotes: 1

Views: 3474

Answers (1)

FlusterDesign
FlusterDesign

Reputation: 31

I worked this out: Partially. I'm working on a client update, and didn't want to go down the route of full API registration and integration for them (small budget), so I wanted to understand the Google embed?pb command more to see what I could change.

No luck changing the map centre, this remained on the pin in question, but I did change the default zoom.

Using the '!' as a separator, the 14th element was 4f13.1 - changing the 13 part changed the zoom... Bigger number, wider zoom...

<iframe src="https://www.google.com/maps/embed?pb=!
1m18!
1m12!
1m3!
1d2478.740851360751!
2d-0.04087238408799207!
3d51.59131277964901!
2m3!
f0!
2f0!
3f0!
3m2!
1i1024!
2i768!
4f13.1! <- this one!!
3m3!
1m2!
1s0x48761dce1151aaab%3A0xba9569f9da72e2c6!
2sBespokea!
5e0!
3m2!
1sen!
2suk!
4v1500822710038" width="800" height="516" frameborder="0" style="border:0" allowfullscreen></iframe>

Upvotes: 2

Related Questions