Como hago para mantener centrado el mapa cada vez que cambie la clase del elemento MyMap
, lo cual esta especificado en los estilos css.
$scope.eldiv = document.getElementById('MyMap');
var boxOne = document.getElementsByClassName('map')[0],
btnone = document.getElementsByClassName('absolute')[0],
lalista = document.getElementsByClassName('lista')[0],
map
document.getElementsByClassName('absolute')[0].onclick = function () {
if (!lalista.classList.contains('mapCambia')) {
boxOne.classList.toggle('mapCambia');
btnone.classList.toggle('botonlista');
lalista.classList.toggle('listaCambia');
});
}
};
function initialize() {
map = new google.maps.Map($scope.eldiv, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Estilos css
.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: 100%;
width: 100%;
z-index: 98;
}
.absolute.botonlista {
position: relative;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
}