Le conteneur Google Maps ne se redimensionne pas correctement après l’animation

J’ai un conteneur Google Maps, disons 600px height.

J’ai un bouton, redimensionnant (jQuery) le conteneur div autour de la carte:

$('#add').click(function() { $("#container-map").animate({ height: '50%', minHeight: '50%' }, 1500 ); google.maps.event.sortinggger(map, 'resize'); }); 

Le conteneur et la carte ont maintenant une hauteur de 300 pixels, mais l’API de Google Maps pense qu’il fait toujours 600 pixels. Le centre de la carte est donc toujours à 300 pixels bien qu’il devrait être à 150 pixels (300/2).

http://woisteinebank.de/dev2.html# Lorsque vous recherchez un emplacement dans la zone, cela devient centré. Appuyez sur “Eintragen” et recherchez à nouveau, ce n’est pas bien centré.

Pouvez-vous essayer de vérifier ou même suggérer comment résoudre ce problème?

J’ai essayé d’utiliser la solution habituelle pour déclencher l’événement de resize mais cela ne fonctionne pas

Ha ha parce que vous déclenchez l’événement de redimensionnement avant même que l’animation ne commence 🙂 Vous devez attendre jusqu’à la fin. Pour cela, utilisez le 4ème argument de .animate – le rappel complete appelé après la fin de l’animation:

 $('#add').click(function() { $("#container-map").animate({ height: '50%', minHeight: '50%' }, 1500, function () { google.maps.event.sortinggger(map, 'resize'); }); });