WordPress : Need to set zoom level in google embedded map iframe

1 Views

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 looks
enter image description here

Read More

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>

then I am getting this
enter image description here

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.

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. I resolved my problem , here i am adding some screen-shots,

    I opened the page ,and
    enter image description here

    then it opened like this

    enter image description here

    Now go to address bar i.e

    enter image description here
    and find out lat long and Z associated with lat long
    you may change this Z as you want and refresh the page

    or

    enter image description here

    After this go to cog button on top left side i.e

    enter image description here

    after this it will open a side bar like this

    enter image description here
    then look for share or embed map and click on that it will open

    enter image description here

    then
    enter image description here

    now copy iframe code from here and use.
    enter image description here

    Thats it. It will work for every one.

  2. <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>

  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>

  4. I did it just by changing “pointer-events: all”
    and then you have the same functions as in google map, zoom in-out, make a route and etc.

    .map iframe {
  pointer-events: all;
  height: 100%;
  width: 100%;
  border: 0;
}