Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » API de google maps responsive

CSS - API de google maps responsive

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Diego

API de google maps responsive

Publicado por Diego (1 intervención) el 18/12/2017 22:47:32
Buenas noches, Quería hacer una consulta sobre un modulo que tengo instalado en wordpress llamado Advanced Google Maps. Este modulo hace posible instalar los putos de varias franquicias en el mapa pero cuando contrae para la versión móvil no contrae todo el mapa y solo deja dos franquicias. ¿Alguien sabe que código css tengo que poner para que se muestre el mapa igual que en la versión escritorio pero en móvil?

Muchas gracias;
Diego


Captura-de-pantalla-2017-12-18-a-las-22.45.12

El papa en version escritorio
Captura-de-pantalla-2017-12-18-a-las-22.50.20

El mapa en versión móvil
Captura-de-pantalla-2017-12-18-a-las-22.50.39
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema
Val: 39
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

API de google maps responsive

Publicado por txema (17 intervenciones) el 19/12/2017 03:09:20
Hola Diego:
Por lo que veo, lo que tienes que modificar es el zoom del mapa, en tu javascript.
Por otra parte, no entiendo desde tus imágenes, por qué paría el centrado del mapa.

Prueba, centrándolo sobre Madrid (lat 40.416775 lng -3.703790), darle un zoom: 5

Desde mi experiencia, debería entrar toda la península sin problemas en las pantallas de los móviles
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 39
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

API de google maps responsive

Publicado por txema (17 intervenciones) el 19/12/2017 11:30:38
Otra solución (posiblemente la mejor) es trabajar, siempre desde el javascript, con new google.maps.LatLngBounds(); de suerte que el mapa, sea cual fuere sus dimensiones, se ajuste a mostrar todos los marcadores.

Un ejemplo de su aplicación (con otros detalles sobre los marcadores personalizados) puede ser:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions);
  setMarkers(map, beaches);
}
 
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 161.259052, 5],
  ['Cronulla Beach', -36.028249, 153.157507, 3],
  ['Manly Beach', -31.80010128657071, 151.38747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.159302, 1]
];
 
function setMarkers(map, locations) {
  var image = new google.maps.MarkerImage('images/beachflag.png',
    new google.maps.Size(20, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
    new google.maps.Size(37, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
  var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
  };
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
    bounds.extend(myLatLng);
  }
  map.fitBounds(bounds);
}

P.D.: La última versión (v=3.26) omite el trabajo con shadow, y no recoge la imagen de sombra.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar