Foros del Web » Creando para Internet » Herramientas y Software »

Cómo definir el ZOOM en GoggleMaps ???

Estas en el tema de Cómo definir el ZOOM en GoggleMaps ??? en el foro de Herramientas y Software en Foros del Web. Hola amigos, les cuento que he podido crear el mapa de una ubicación en GoogleMaps y lo he podido insertar correctamente en mi pagina web, ...
  #1 (permalink)  
Antiguo 11/01/2015, 00:51
Avatar de julia2021  
Fecha de Ingreso: diciembre-2014
Ubicación: Mexico
Mensajes: 152
Antigüedad: 7 años, 5 meses
Puntos: 11
Sonrisa Cómo definir el ZOOM en GoggleMaps ???

Hola amigos, les cuento que he podido crear el mapa de una ubicación en GoogleMaps y lo he podido insertar correctamente en mi pagina web, SIN EMBARGO, no sé como definir el ZOOM del mapa, pues en googlemaps se ve perfecto, pero al insertarlo en mi web aparece muyyyyyy muyyyy muyy cerca y deseo poder manipular el zoom con el que aparecería en mi pagina web por default.

En mi pagina web la inserto utilizando el código suministrado por GoogleMaps, el cual es:
<iframe src="https://mapsengine.google.com/map/u/1/embed?mid=zfIVM33NORxA.k4-GgAyK-CtM" width="640" height="480"></iframe>

Gracias a quien me pueda ayudar. Besos !!!

Última edición por julia2021; 11/01/2015 a las 01:08 Razón: me falto agregar las palabras claves
  #2 (permalink)  
Antiguo 11/01/2015, 03:25
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 19 años, 9 meses
Puntos: 2114
Respuesta: Cómo definir el ZOOM en GoggleMaps ???

Añade &zoom=X a la URL donde X es el nivel de zoom (de 1 a 20 creo).
__________________
(:
  #3 (permalink)  
Antiguo 11/01/2015, 04:40
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Cómo definir el ZOOM en GoggleMaps ???

En el src:

https://mapsengine.google.com/map/u/...gAyK-CtM&&z=10

Donde z=10 es el nivel de zoom, pudiendo ser cualquier otro valor entre 0 y 21 para este tipo de presentación del mapa. En vistas de satélite se reduce el z máximo a z=19.
  #4 (permalink)  
Antiguo 11/01/2015, 09:41
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 8 años, 10 meses
Puntos: 401
Respuesta: Cómo definir el ZOOM en GoggleMaps ???

En vez de usar el iframe que te da goodle maps, usa un script de este tipo.

Código Javascript:
Ver original
  1. </script> <script type="text/javascript">
  2.           google_api_map_init();
  3.           function google_api_map_init(){
  4.             var map;
  5.             var coordData = new google.maps.LatLng(parseFloat(41.9136499), parseFloat(0.1942828,17));
  6.             var styleArray = [
  7.     {
  8.         "featureType": "water",
  9.         "elementType": "geometry",
  10.         "stylers": [
  11.             {
  12.                 "color": "#193341"
  13.             }
  14.         ]
  15.     },
  16.     {
  17.         "featureType": "landscape",
  18.         "elementType": "geometry",
  19.         "stylers": [
  20.             {
  21.                 "color": "#2c5a71"
  22.             }
  23.         ]
  24.     },
  25.     {
  26.         "featureType": "road",
  27.         "elementType": "geometry",
  28.         "stylers": [
  29.             {
  30.                 "color": "#29768a"
  31.             },
  32.             {
  33.                 "lightness": -37
  34.             }
  35.         ]
  36.     },
  37.     {
  38.         "featureType": "poi",
  39.         "elementType": "geometry",
  40.         "stylers": [
  41.             {
  42.                 "color": "#406d80"
  43.             }
  44.         ]
  45.     },
  46.     {
  47.         "featureType": "transit",
  48.         "elementType": "geometry",
  49.         "stylers": [
  50.             {
  51.                 "color": "#406d80"
  52.             }
  53.         ]
  54.     },
  55.     {
  56.         "elementType": "labels.text.stroke",
  57.         "stylers": [
  58.             {
  59.                 "visibility": "on"
  60.             },
  61.             {
  62.                 "color": "#3e606f"
  63.             },
  64.             {
  65.                 "weight": 2
  66.             },
  67.             {
  68.                 "gamma": 0.84
  69.             }
  70.         ]
  71.     },
  72.     {
  73.         "elementType": "labels.text.fill",
  74.         "stylers": [
  75.             {
  76.                 "color": "#ffffff"
  77.             }
  78.         ]
  79.     },
  80.     {
  81.         "featureType": "administrative",
  82.         "elementType": "geometry",
  83.         "stylers": [
  84.             {
  85.                 "weight": 0.6
  86.             },
  87.             {
  88.                 "color": "#1a3541"
  89.             }
  90.         ]
  91.     },
  92.     {
  93.         "elementType": "labels.icon",
  94.         "stylers": [
  95.             {
  96.                 "visibility": "yes"
  97.             }
  98.         ]
  99.     },
  100.     {
  101.         "featureType": "poi.park",
  102.         "elementType": "geometry",
  103.         "stylers": [
  104.             {
  105.                 "color": "#2c5a71"
  106.             }
  107.         ]
  108.     }
  109. ]
  110.             function initialize() {
  111.               var mapOptions = {
  112.                 zoom: 17,
  113.                 center: coordData,
  114.                 scrollwheel: false,
  115.                 styles: styleArray
  116.               }
  117.               var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  118.             google.maps.event.addDomListener(window, 'resize', function() {
  119.               map.setCenter(coordData);
  120.               var center = map.getCenter();
  121.             });
  122.           }
  123.             google.maps.event.addDomListener(window, "load", initialize);
  124.           }
  125.       </script>
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-

Última edición por lauser; 11/01/2015 a las 10:09
  #5 (permalink)  
Antiguo 11/01/2015, 10:45
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Cómo definir el ZOOM en GoggleMaps ???

Cita:
Iniciado por lauser Ver Mensaje
En vez de usar el iframe que te da goodle maps, usa un script de este tipo ...
lauser
Sería lo recomendable. Pero ya que Google Maps permite insertar un mapa mediante <iframe>, le presentaba a julia2021 la opción de corrección de zoom.

A pzin no le fallaba la memoria ya que son 20 niveles de zoom en satélite (de 0 a 19, ambos incluídos) y 22 en relieve (0 a 21)

Sobre la recomendación de lauser, se puede reducir el código (simplificando los estilos del mapa ya que es todo un capítulo). El código completo sobre un mapa simple publicado por https://developers.google.com/maps/d...p-simple?hl=es sería:

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.   <head>
  3.     <title>Simple Map</title>
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  5.     <meta charset="utf-8">
  6.     <style>
  7.       html, body, #map-canvas {
  8.         height: 100%;
  9.         margin: 0px;
  10.         padding: 0px
  11.       }
  12.     </style>
  13.     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  14.     <script>
  15. var map;
  16. function initialize() {
  17.   var mapOptions = {
  18.     zoom: 8,
  19.     center: new google.maps.LatLng(-34.397, 150.644)
  20.   };
  21.   map = new google.maps.Map(document.getElementById('map-canvas'),
  22.       mapOptions);
  23. }
  24.  
  25. google.maps.event.addDomListener(window, 'load', initialize);
  26.  
  27.     </script>
  28.   </head>
  29.   <body>
  30.     <div id="map-canvas"></div>
  31.   </body>
  32. </html>

(Lo aclaro, ya que en vez del <iframe> debe ir <div id="map-canvas"></div>)
  #6 (permalink)  
Antiguo 11/01/2015, 10:52
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 8 años, 10 meses
Puntos: 401
Respuesta: Cómo definir el ZOOM en GoggleMaps ???

Cita:
Sobre la recomendación de lauser, se puede reducir el código (simplificando los estilos del mapa ya que es todo un capítulo). El código completo sobre un mapa simple publicado por https://developers.google.com/maps/d...p-simple?hl=es sería:
Totalmente de acuerdo contigo. El que yo puse es para tener control absoluto sobre los stilos.
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
  #7 (permalink)  
Antiguo 18/04/2015, 13:22
 
Fecha de Ingreso: abril-2010
Ubicación: Lima
Mensajes: 116
Antigüedad: 12 años
Puntos: 1
Respuesta: Cómo definir el ZOOM en GoggleMaps ???

Hola amigos, he probado lo del &zoom=2 en mi mapa y no se reduce o no varia el tamaño.
Este es el mapa
Este es el iframe:
https://mapsengine.google.com/map/em...OoqQCnQ&zoom=2
Espero puedan ayudarme
  #8 (permalink)  
Antiguo 18/04/2015, 13:55
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Cómo definir el ZOOM en GoggleMaps ???

Nunca he sido amigo de los iframe. Prefiero el código ya expuesto.

Blasgo: repasando los apuntes que ya dí en este tema. Prueba este enlace de iframe
https://www.google.com/maps/d/embed?...wJTOoqQCnQ&z=2

Si te fijas solamente he cambiado &zoom=2 por &z=2

Nos comentas

Etiquetas: definir, zoom
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:16.