web-dev-qa-db-fra.com

Récemment une carte Google après que le conteneur a changé de largeur

J'ai un ensemble de cartes google avec l'API Javascript V3. Il est affiché dans un div avec une largeur dynamique, comme un volet de contenu glisse lorsque nous cliquons sur un marqueur.

Tout fonctionne bien, mais une chose: lorsque le volet glisse vers le haut, la largeur de la carte est modifiée, et donc le centre est déplacé vers la droite (le volet est à gauche). C'est vraiment peu pratique, surtout pour les petites résolutions, où vous ne pouvez même pas voir le centre après l'ouverture du volet.

J'ai essayé le déclencheur de "redimensionnement", mais il ne semble pas fonctionner ... Des idées?

Merci beaucoup !

javascriptgoogle-mapscenter
33
Charleshaa

Appeler resize par lui-même n'atteindra pas ce dont vous avez besoin.

Ce que vous devez faire, c'est d'abord (avant un redimensionnement) obtenir le centre actuel de la carte

var currCenter = map.getCenter();

Ensuite, vous devez faire quelque chose comme ce qui suit, après le redimensionnement de votre div.

google.maps.event.trigger(map, 'resize');
map.setCenter(currCenter);

Devrait faire l'affaire

MISE À JOUR 2018-05-22

Avec une nouvelle version du rendu dans la version 3.32 de l'API Maps Maps, l'événement resize ne fait plus partie de la classe Map.

La documentation indique

Lorsque la carte est redimensionnée, le centre de la carte est fixe

  • Le contrôle plein écran conserve désormais le centre.

  • Il n'est plus nécessaire de déclencher l'événement de redimensionnement manuellement.

source: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); n'a aucun effet à partir de la version 3.32

84
omarello

Définissez d'abord une variable pour le centre actuel, puis utilisez un écouteur d'événements pour détecter un redimensionnement, et donc définissez le centre.

//Get current center
var getCen = map.getCenter();

//Use event listener for resize on window
google.maps.event.addDomListener(window, 'resize', function() {
   //Set Center
   map.setCenter(getCen);
});
17
Tyler Rafferty

omarello fonctionne mais je ne peux pas le voter. Vous avez probablement oublié de vous référer à la var qui définit vos coordonnées centrales. Tout "redimensionner" ne fait que tirer la largeur et la hauteur actuelles des divs, cela ne change rien à la carte - pour le moment!

var center = new google.maps.LatLng(39.5, -98.3);

$(document).ready(function() { 
    $("#fullsize").click(function(e) { 
        e.preventDefault();
        $("#map_canvas").css({ 
            width: '1000px'});
        google.maps.event.trigger(map, "resize"); 
        map.setCenter(center);
        }); 
    });
7
efwjames

Hy là essayez ceci;)

Initialisation sur carte

var currentMapCenter = null; 
google.maps.event.addListener(map, 'resize', function () {
    currentMapCenter = map.getCenter();
});

google.maps.event.addListener(map, 'bounds_changed', function () {
    if (currentMapCenter) {
    // react here
        map.setCenter(currentMapCenter);
    }
    currentMapCenter = null;
});

Après cela, appelez simplement lorsque vous souhaitez redimensionner la carte.

google.maps.event.trigger(map, 'resize');
2
Jose Rocha