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;
}