2

El <div> donde genero el mapa al cambiar el tamaño la posicion central del mapa, se invierte. Cuando el <div> contiene la clase "mapCambia" el center del mapa se mantiene en la posicion anterior, y cuando este regresa a su posicion inicial, direcciona el center al centro de la dimension que tiene la clase mapCambia

la etiqueta con id "MyMap" es la que contiene el mapa, la etiqueta con la clase "absolute"es el boton que me redimensiona los <div>

 <div id="MyMap" class="map"></div>
 <div class="absolute button button-outline:color ion-navicon button-dark"></div>
 <div class="lista">
        <ion-list scroll="true">
            <ion-radio ng-repeat="lugares in array_marcadores">{{lugares.posicion}}</ion-radio>
        </ion-list>
    </div>

archivo.js

 eldiv = document.getElementById('MyMap'),  cerca = 4,
 points = [
            {
                lat: 15.774703,
                lng: -75.83020
            },
            {
                lat: -15.8654,
                lng: 145.465
            }
    ],
        sel_point = 0,

 mapOptions = {
            center: points[sel_point],
            scrollwheel: true,
            zoom: cerca,
            zoomControl: true,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },

  function initialize() {
        map = new google.maps.Map(eldiv, mapOptions);
    }

  document.getElementsByClassName('absolute')[0].onclick = function () {
        if (!lalista.classList.contains('mapCambia')) {
            boxOne.classList.toggle('mapCambia');
            btnone.classList.toggle('botonlista');
            lalista.classList.toggle('listaCambia');
        }
        dimensionar(map);
    };
    function dimensionar(m) {
            x = m.getZoom();
            c = m.getCenter();
            google.maps.event.trigger(m, 'resize');
            m.setZoom(x);
            m.setCenter(c);
    };

 google.maps.event.addDomListener(window, 'load', initialize);

Style.css

.absolute.botonlista {
position: relative;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
}
.absolute {
position: relative;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
z-index: 99;
bottom: 25px;
transition: 2s;
}
.lista {
height: 0%;
width: 100%;
z-index: 98;
transition: 2s;
}
.lista.listaCambia {
height: 65%;
width: 100%;
z-index: 98;
}
2
  • Podrias mostrar la función que redimensiona el div?
    – ffflabs
    Commented el 3 mar. 2017 a las 0:07
  • ya añadi, el estilo y la funcion que redimensiona Commented el 3 mar. 2017 a las 0:58

1 respuesta 1

0

La única duda que me cabe es si archivo.js tiene más contenido antes de declarar eldiv porque eso debiera tirar un error si no está antecedido por var.

Suponiendo que antes de eldiv tienes declarada la variable map de la forma

var map,
    eldiv = document.getElementById('MyMap'),  
    cerca = 4,
    points=[...]

Entonces otras funciones tienen acceso a la variable map en el contexto global. Si ese es el caso, entonces sólo te falta gatillar el evento resize cuando redimensiones el div:

function initialize() {
    map = new google.maps.Map(eldiv, mapOptions);
}

document.getElementsByClassName('absolute')[0].onclick = function () {
    if (!lalista.classList.contains('mapCambia')) {
        boxOne.classList.toggle('mapCambia');
        btnone.classList.toggle('botonlista');
        lalista.classList.toggle('listaCambia');
        google.maps.event.trigger(map, 'resize');
    }
};

Este evento puede cambiar el centro del mapa, por lo que tal vez quieras guardar una referencia al centro antes de redimensionar, y centrar el mapa después de redimensionar. Probablemente no sea el caso.

Además, aquí hay una racing condition, porque puede que el mapa se redimensione antes de que el div cambie de posición. En ese caso podrías agregar un breve timeout al trigger de resize.

Edit: añadiendo el timeout, la expresión de función onlick quedaría:

document.getElementsByClassName('absolute')[0].onclick = function () {
    if (!lalista.classList.contains('mapCambia')) {
        boxOne.classList.toggle('mapCambia');
        btnone.classList.toggle('botonlista');
        lalista.classList.toggle('listaCambia');
        window.setTimeout(function() {
          google.maps.event.trigger(map, 'resize');
        },500);
    }
};

Donde 500 es un valor tentativo. Dependiendo de la definición de estilos, el redimensionamiento del div podría tomar más que 500ms.

5
  • si me redimensiona solo que lo hace invertido, cuando el div cambia su tamaño a mas pequeño, el centro del mapa se mantiene, cuando vuelvo a dar click en el boton, ahora si realiza el cambio Commented el 6 mar. 2017 a las 22:26
  • Por eso, agrega un window.setTimeout antes de gatillar el evento resize sobre el mapa. Mira el edit de mi respuesta.
    – ffflabs
    Commented el 6 mar. 2017 a las 23:31
  • aun no me funciona Commented el 7 mar. 2017 a las 0:16
  • Lo lamento. En todo caso, ¿Qué es lo que determina si lalista tiene clase mapCambia? Eso está en duro?
    – ffflabs
    Commented el 7 mar. 2017 a las 0:36
  • para poder hacer el ajuste de boxOne, lalista no contiene la clase mapCambia, por lo cual el boton con clase absolute, puede hacer su funcion de cambiar de tamaño Commented el 7 mar. 2017 a las 0:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.