WordPress: es necesario establecer el nivel de zoom en el iframe del mapa incrustado de Google

4 minutos de lectura

avatar de usuario
Harshita

Estoy usando Map incrustado iframe con este código en mi sitio web

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

parece
ingrese la descripción de la imagen aquí

Funciona bien, pero quiero establecer el nivel de zoom en este iframe, ¿es posible? Guíame, ¿cómo configuro esto? ¡¡Gracias!!

cuando estoy agregando esto

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

entonces estoy recibiendo esto
ingrese la descripción de la imagen aquí

Quiero decir que funciona, pero perturba todos los contenidos de la página y div también. Y cuando traté de establecer su alto y ancho, sigue siendo el mismo, significa que no hay cambios. Volviendo a mi pregunta, solo quiero establecer el nivel de zoom, no es necesario cambiar la altura y el ancho o el estilo del mapa.

Resolví mi problema, aquí estoy agregando algunas capturas de pantalla,

Abrí la página y
ingrese la descripción de la imagen aquí

entonces se abrió así

ingrese la descripción de la imagen aquí

Ahora ve a la barra de direcciones, es decir

ingrese la descripción de la imagen aquí

y averiguar lat long y Z asociado con lat long puede cambiar esto Z como quieras y refresca la página

o

ingrese la descripción de la imagen aquí

Después de esto, vaya al botón Cog en el lado superior izquierdo, es decir

ingrese la descripción de la imagen aquí

después de esto se abrirá una barra lateral como esta

ingrese la descripción de la imagen aquí

luego busque compartir o incrustar mapa y haga clic en eso se abrirá

ingrese la descripción de la imagen aquí

después
ingrese la descripción de la imagen aquí

ahora copie el código iframe desde aquí y utilícelo.
ingrese la descripción de la imagen aquí

Eso es todo. Funcionará para todos.

  • Gracias, esto funcionó para mí y esta debería ser una respuesta aceptada en lugar de la respuesta anterior.

    – dh47

    14 de noviembre de 2017 a las 9:44

  • Gracias funcionó para mí y acepto que debería ser la respuesta aceptada ya que es relevante para la última versión de Google Maps

    – Trevor

    26 de noviembre de 2017 a las 16:58

  • ¡Qué bueno saber esto!

    – mMoovs

    18 de enero de 2018 a las 7:43

avatar de usuario
Hirendrasinh S. Rathod

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

puedes usar zoom variable para el nivel de zoom como abajo.

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

  • Lo siento, mi error, tuve un código incorrecto. por favor revise las ediciones

    – Hirendrasinh S. Rathod

    10 de junio de 2016 a las 12:17

  • y si es útil, presione la marca verde 🙂

    – Hirendrasinh S. Rathod

    10 de junio de 2016 a las 12:18


  • ¿Cómo generó este src que se menciona en su pregunta?

    – Hirendrasinh S. Rathod

    10 de junio de 2016 a las 12:36

  • Visita los mapas de Google google.com/maps para crear un mapa (Paso a paso: 1) Encuentra la ubicación 2) Haz clic en el símbolo de la rueda dentada en la esquina superior izquierda y selecciona “Compartir o incrustar mapa” 3) En la ventana modal, selecciona “Incrustar mapa” 4) Copia el código iframe y pégalo) .

    – Harshita

    10 de junio de 2016 a las 12:38

  • ver mi pregunta de nuevo agregué capturas de pantalla

    – Harshita

    10 de junio de 2016 a las 13:19

Puede probar con el parámetro &z=nn Some value. Funciona bien para mí. Aquí hay un código de referencia para usted.

<iframe width="640" height="480" src="https://www.google.com/maps/d/embed?mid=1I8s3COxd2tY0wGKPiBxra1gkE6wpAEx1&z=19"></iframe>

Lo hice simplemente cambiando “pointer-events: all” y luego tiene las mismas funciones que en Google Map, acercar y alejar, hacer una ruta, etc.

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

¿Ha sido útil esta solución?