Cómo definir el ZOOM en GoggleMaps ???

[julia2021]

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

[pzin]

Añade &zoom=X a la URL donde X es el nivel de zoom (de 1 a 20 creo).

[txemaarbulo]

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.

[lauser]

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

Código Javascript:

</script> <script type="text/javascript">
          google_api_map_init();
          function google_api_map_init(){
            var map;
            var coordData = new google.maps.LatLng(parseFloat(41.9136499), parseFloat(0.1942828,17));
            var styleArray = [
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#193341"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#2c5a71"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#29768a"
            },
            {
                "lightness": -37
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#406d80"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#406d80"
            }
        ]
    },
    {
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#3e606f"
            },
            {
                "weight": 2
            },
            {
                "gamma": 0.84
            }
        ]
    },
    {
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#ffffff"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry",
        "stylers": [
            {
                "weight": 0.6
            },
            {
                "color": "#1a3541"
            }
        ]
    },
    {
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "yes"
            }
        ]
    },
    {
        "featureType": "poi.park",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#2c5a71"
            }
        ]
    }
]
            function initialize() {
              var mapOptions = {
                zoom: 17,
                center: coordData,
                scrollwheel: false,
                styles: styleArray
              }
              var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
            google.maps.event.addDomListener(window, 'resize', function() {
              map.setCenter(coordData);
              var center = map.getCenter();
            });
          }
            google.maps.event.addDomListener(window, "load", initialize);
          }
      </script>
 

[txemaarbulo]

Iniciado por lauser

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:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
 

(Lo aclaro, ya que en vez del <iframe> debe ir <div id="map-canvas"></div>)

[lauser]

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.

[Blasgo]

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

[txemaarbulo]

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