Wordpress : Need to set zoom level in google embedded map iframe
Solution 1
<html>
<head>
<title>Google map</title>
</head>
<body>
<iframe style="height:100%; width:100%;" src="https://www.google.com/maps/embed/v1/place?q=27+Eddisbury+Dr,+Newcastle,+Staffordshire+ST5+7SL,+UK&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU&zoom=15"></iframe></div>
</body>
</html>
you can use zoom
variable for zoom level like bellow.
<iframe style="height:100%; width:100%;" src="https://www.google.com/maps/embed/v1/place?q=27+Eddisbury+Dr,+Newcastle,+Staffordshire+ST5+7SL,+UK&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU&zoom=15"></iframe></div>
Solution 2
I resolved my problem , here i am adding some screen-shots,
then it opened like this
Now go to address bar i.e
and find out lat long and Z associated with lat long you may change this Z as you want and refresh the page
or
After this go to cog button on top left side i.e
after this it will open a side bar like this
then look for share or embed map and click on that it will open
now copy iframe code from here and use.
Thats it. It will work for every one.
Solution 3
You can try with the &z=nn Some value parameter. It works fine for me. Here is a reference code for you.
<iframe width="640" height="480" src="https://www.google.com/maps/d/embed?mid=1I8s3COxd2tY0wGKPiBxra1gkE6wpAEx1&z=19"></iframe>
Harshita
Updated on October 12, 2020Comments
-
Harshita over 3 years
I am using Map embed iframe with this code in my Website
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4911422.152107185!2d-6.743420312530421!3d53.05351610420746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487a5d16d99dac79%3A0xbd0539007f0aea54!2s27+Eddisbury+Dr%2C+Newcastle%2C+Staffordshire+ST5+7SL%2C+UK!5e0!3m2!1sen!2sin!4v1465471022612" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
It works good, But i want to set zoom level in this iframe, is it possible? Guide me how do i set this. Thanks!!
when i am adding this
<iframe style="height:100%; width:100%;" src="https://www.google.com/maps/embed/v1/place?q=27+Eddisbury+Dr,+Newcastle,+Staffordshire+ST5+7SL,+UK&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU&zoom=15"></iframe></div>
i mean it works , but disturb all page contents and div too.. And when i tried to set its height and width it remains same, means no change. Back to my question i just want to set zoom level, no need to change height and width or map style.
-
Hirendrasinh S. Rathod almost 8 yearssorry my mistake i had place wrong code. please review edits
-
Hirendrasinh S. Rathod almost 8 yearsand if it's helpful hit green tick :)
-
Hirendrasinh S. Rathod almost 8 yearshow did you generate this src which is mention in your question ?
-
Harshita almost 8 yearsVisit Google maps google.com/maps to create map (Step by step: 1) Find location 2) Click the cog symbol in the top left corner and select "Share or embed map" 3) On modal window select "Embed map" 4) Copy iframe code and paste it).
-
Harshita almost 8 yearssee my question again i added screens-shots
-
dh47 over 6 yearsThanks this worked for me and this should be accepted answer instead of above answer.
-
Trevor over 6 yearsThanks worked for me and I agree should be the accepted answer as its relevant to the latest version of Google Maps
-
mMoovs over 6 yearsGreat to know this!