Foros del Web » Creando para Internet » HTML »

aumentar Zoom google maps

Estas en el tema de aumentar Zoom google maps en el foro de HTML en Foros del Web. Hola Foreros, como puedo aumentar o reducir el zoom de google maps para insertar en mi web. El problema es q al crear el mapa ...
  #1 (permalink)  
Antiguo 17/03/2015, 18:13
 
Fecha de Ingreso: abril-2010
Ubicación: Lima
Mensajes: 116
Antigüedad: 14 años
Puntos: 1
aumentar Zoom google maps

Hola Foreros,
como puedo aumentar o reducir el zoom de google maps para insertar en mi web.
El problema es q al crear el mapa y lo inserto en mi pagina web, se ve muy amplio (mucho zoom) y no se como reducirlo.

Gracias por su ayuda
  #2 (permalink)  
Antiguo 18/03/2015, 03:35
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 10 años, 9 meses
Puntos: 401
Respuesta: aumentar Zoom google maps

Prueba este, que yo utilizo. Aparte del zoom, puedes insertar reseñas con un icono.
Código Javascript:
Ver original
  1. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  2.         <script type="text/javascript">
  3.             function initialize() {
  4.                 var latlng = new google.maps.LatLng(41.91365, 0.194283);
  5.                 var settings = {
  6.                     zoom: 16,
  7.                     center: latlng,
  8.                     mapTypeControl: true,
  9.                     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  10.                     navigationControl: true,
  11.                     navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
  12.                     mapTypeId: google.maps.MapTypeId.ROADMAP};
  13.                 var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
  14.                 var contentString = '<div id="content">'+
  15.                     '<div id="siteNotice">'+
  16.                     '</div>'+
  17.                     '<h1 id="firstHeading" class="firstHeading">Monzon</h1>'+
  18.                     '<div id="bodyContent">'+
  19.                     '<p>Escribe la descripcion.</p>'+
  20.                     '</div>'+
  21.                     '</div>';
  22.                 var infowindow = new google.maps.InfoWindow({
  23.                     content: contentString
  24.                 });
  25.                
  26.                 var companyImage = new google.maps.MarkerImage('images/logo.png',
  27.                     new google.maps.Size(100,50),
  28.                     new google.maps.Point(0,0),
  29.                     new google.maps.Point(50,50)
  30.                 );
  31.  
  32.                 var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png',
  33.                     new google.maps.Size(130,50),
  34.                     new google.maps.Point(0,0),
  35.                     new google.maps.Point(65, 50));
  36.  
  37.                 var companyPos = new google.maps.LatLng(41.913647, 0.194278);
  38.  
  39.                 var companyMarker = new google.maps.Marker({
  40.                     position: companyPos,
  41.                     map: map,
  42.                     icon: companyImage,
  43.                     shadow: companyShadow,
  44.                     title:"SoloLinux",
  45.                     zIndex: 3});
  46.                
  47.                 var trainImage = new google.maps.MarkerImage('images/train.png',
  48.                     new google.maps.Size(50,50),
  49.                     new google.maps.Point(0,0),
  50.                     new google.maps.Point(50,50)
  51.                 );
  52.  
  53.                 var trainShadow = new google.maps.MarkerImage('images/train_shadow.png',
  54.                     new google.maps.Size(70,50),
  55.                     new google.maps.Point(0,0),
  56.                     new google.maps.Point(60, 50)
  57.                 );
  58.  
  59.                 var trainPos = new google.maps.LatLng(41.91365, 0.194283);
  60.  
  61.                 var trainMarker = new google.maps.Marker({
  62.                     position: trainPos,
  63.                     map: map,
  64.                     icon: trainImage,
  65.                     shadow: trainShadow,
  66.                     title:"Train Station",
  67.                     zIndex: 2
  68.                 });
  69.  
  70.                 var parkingImage = new google.maps.MarkerImage('images/oficina.png',
  71.                     new google.maps.Size(50,50),
  72.                     new google.maps.Point(0,0),
  73.                     new google.maps.Point(50,50)
  74.                 );
  75.  
  76.                 var parkingShadow = new google.maps.MarkerImage('images/oficina_shadow.png',
  77.                     new google.maps.Size(70,50),
  78.                     new google.maps.Point(0,0),
  79.                     new google.maps.Point(60, 50)
  80.                 );
  81.  
  82.                 var parkingPos = new google.maps.LatLng(41.91365, 0.194283);
  83.  
  84.                 var parkingMarker = new google.maps.Marker({
  85.                     position: parkingPos,
  86.                     map: map,
  87.                     icon: parkingImage,
  88.                     shadow: parkingShadow,
  89.                     title:"Parking Lot",
  90.                     zIndex: 1
  91.                 });
  92.                
  93.                 google.maps.event.addListener(companyMarker, 'click', function() {
  94.                     infowindow.open(map,companyMarker);
  95.                 });
  96.             }
  97.         </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-
  #3 (permalink)  
Antiguo 18/03/2015, 10:29
 
Fecha de Ingreso: abril-2010
Ubicación: Lima
Mensajes: 116
Antigüedad: 14 años
Puntos: 1
Respuesta: aumentar Zoom google maps

Bueno gracias,... no estoy muy familiarizado con los scripts, lo que se es que al generar el mapa, al codigo que me genera google maps hay q añadir un "z=22" algo asi, donde el numero indica el tamaño del zoom. He intentado hacerlo pero no me sale.

A ver si alguien sabe me puede ayudar con eso.
Gracias
  #4 (permalink)  
Antiguo 18/03/2015, 11:01
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 10 años, 9 meses
Puntos: 401
Respuesta: aumentar Zoom google maps

Bueno.... pon tu mapa, a ver.....
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
  #5 (permalink)  
Antiguo 19/03/2015, 17:03
 
Fecha de Ingreso: abril-2010
Ubicación: Lima
Mensajes: 116
Antigüedad: 14 años
Puntos: 1
Respuesta: aumentar Zoom google maps

Tengo 2 mapas que quisiera aumentar el zoom
mapa 1
mapa 2

En el mapa 2 también quisiera sacar el cuadro negro, que queda lo mas limpio posible asi como el mapa 1

Espero vuestra ayuda
Gracias
  #6 (permalink)  
Antiguo 19/03/2015, 17:15
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 10 años, 9 meses
Puntos: 401
Respuesta: aumentar Zoom google maps

Me refería a el código,,,
__________________
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 19/03/2015, 17:37
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 10 años, 9 meses
Puntos: 401
Respuesta: aumentar Zoom google maps

Z=x, es para script.
Tal vez te sirva este frame...
Código HTML:
Ver original
  1. <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3901.108332061014!2d-76.98451392209029!3d-12.104735664565572!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c7bfccca31f7%3A0x8d3db3067dabe53b!2sPacaritambo+391%2C+Lima+15037%2C+Per%C3%BA!5e0!3m2!1ses!2ses!4v1426808085502" width="100%" height="350" frameborder="0" style="border:0"></iframe>

Mas zoom..
Código HTML:
Ver original
  1. <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1950.5564446238957!2d-76.98453001534926!3d-12.104423578260242!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c7bfccca31f7%3A0x8d3db3067dabe53b!2sPacaritambo+391%2C+Lima+15037%2C+Per%C3%BA!5e0!3m2!1ses!2ses!4v1426808651825" width="100%" height="350" frameborder="0" style="border:0"></iframe>


El segundo, mejor con un script. Si no sabes como,,, preguntas.
__________________
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; 19/03/2015 a las 17:44

Etiquetas: aumentar, google, maps, 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:48.