web-dev-qa-db-fra.com

Des zones grises apparaissent dans certaines parties de Google Map intégré dans une zone modale.

Je ne parviens pas à intégrer une carte Google Map via l'API v3 dans une boîte modale.

Des zones grises apparaissent sur la carte lorsque le modal est affiché. Le redimensionnement de la fenêtre du navigateur, l’affichage de Web Inspector, etc., rend toutes les mosaïques de la carte visibles, c’est-à-dire qu’il "force le restitution de la carte".

L'élément parent de l'élément de carte (section#map-modal, voir code ci-dessous) a display: none défini dans son code CSS lors du chargement de la page. Le code modal JS définit automatiquement display: block lorsque l'utilisateur clique sur le bouton d'affichage. Si je supprime temporairement display: none de l'élément modal, la carte s'affiche correctement lors de l'actualisation de la page. Google Map n'aime-t-il pas avoir un élément parent caché?

J'utilise le plugin jQuery modal Bootstrap de Twitter et je contrôle le modal lui-même avec CSS. Il est positionné fixe, a une largeur en pixels, etc.

J'ai bien sûr cherché des solutions sur Google, et de nombreux arguments ont été avancés concernant la méthode de déclenchement de l'événement resize par l'API Google:

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

Je l'ai effectivement fait, mais en vain.

Code pertinent: https://Gist.github.com/1591488

Comme vous pouvez le constater, je déclenche les événements de la ligne 39.

(Appuyez sur le bouton Agrandir le plan} _ en bas de la barre latérale.

Des dossiers:

  • fagerhult.js
  • fagerhult.map.js
  • bootstrap-modal.js
  • master.css

J'apprécierais énormément toute aide ou paire supplémentaire d'yeux, car cela me rend vite fou.

javascriptgoogle-mapsgoogle-maps-api-3modal-dialog
18
Johan Brook

Essayez d'utiliser les gestionnaires d'événements modaux. Je pense que c'est la manière la plus concise (et correcte) de s'assurer que vous redimensionnez après l'affichage du modal sans réécrire les plugins:

$('#map-modal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
})

UPDATE: Je viens de me rendre compte que cette solution ne permet toujours pas de centrer correctement la carte. J'ai donc dû ajouter une commande supplémentaire:

$('#map-modal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
  map.setCenter(new google.maps.LatLng(42.3605336, -72.6362989));
})
33
gabeodess

J'ai découvert que le fait d'avoir display: none sur l'élément parent de la carte (le modal) a vraiment gâché les choses. Je l'ai changé en visibility: hidden juste dans le désespoir de voir ce qui allait arriver, et ça a fonctionné!

J'ai également modifié le code JS modal pour définir le modal sur visibility: visible/hidden lorsque le modal est affiché/masqué. Sinon, display: none/block serait défini à nouveau, ce qui créerait à nouveau les zones grises.

7
Johan Brook

Ma solution pour bootstrap-modal.js v 2.0

remplace la classe "hide" par "invisible" dans Modal div

<div id="map_modal" class="modal fade invisible">
...
</div>

fonction javascript

function open_map()
{   
   $('#map_modal').removeClass("invisible");
   $('#map_modal').modal('toggle');   
}

lien html

<a href="javascript:open_map()">Open map</a>
4
falperez

Pour ceux qui utilisent bootstrap, je devais supprimer "fade" de ma classe "modal"

De

<div class="modal fade"

à

<div class="modal" ...

J'avais essayé les solutions précédentes en appelant google.maps.event.trigger (map, 'resize'); mais figuré que

.on("shown.bs.modal" ...

n'a jamais été appelé. Ce problème a semblé m'indiquer d'enlever le fondu.
https://github.com/twbs/bootstrap/issues/11793

Ce n'est pas une solution optimale car le fondu est en réalité très agréable d'avoir ...

3
mogile_oli

Le problème est que si vous faites quelque chose comme ceci:

$("#mapModalLink").click(function(){
  google.maps.event.trigger(map,"resize");
});

c'est que votre modal n'était probablement pas ouvert (et affiché à la bonne taille) lorsque l'événement de redimensionnement est déclenché. Pour résoudre ceci:

$("#mapModalLink").click(function(){
  $("#mapModal").show();
  google.maps.event.trigger(map, 'resize');
});

Travaillé pour moi au moins :)

2
you786
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
     google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
          google.maps.event.trigger(map, 'resize');

     });
});
1
Mir Shakeel Hussain

J'ai eu ce problème et je l'ai résolu en rappelant la méthode draw. Je pense que cela se produit parce que vous dessinez votre carte plus tôt que d’afficher le dialogue.

J'ai utilisé ce code pour le résoudre (ce n'était pas une fenêtre modale):

$('#map').show(function()
{
    var punto = new google.maps.LatLng(this.latitud, this.longitud);
    var myOptions = {zoom: 15, center: punto, mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControl:false, draggable:false};
    var map = new google.maps.Map(document.getElementById('mapa'),  myOptions);
    var marker = new google.maps.Marker({
    position:punto,
    map: map,
    title: this.nombre
});
});
1
khaz

Pour autant que j'y ai un peu moqué sur Chrome avec JS Live Edit, retarder l'exécution de resize d'attendre l'animation modale pourrait fonctionner :)

https://Gist.github.com/1592330#L107

0
Hiroaki Yamane

carte rendue avec succès sans redimensionner.

Pourquoi redimensionner vous donne la carte appropriée?

Parce que le navigateur peint à nouveau la vue.

Comment le réparer?

Pour obtenir une mise en page correcte de la carte dans un panneau déclenché récemment, la carte doit être peinte une fois le panneau chargé. Vous pouvez y parvenir avec le code (setTimeout) mentionné ci-dessous. L'objectif du code est de déclencher un événement de redimensionnement de la carte après 60 millisecondes.

setTimeout(function () {
        uiGmapIsReady.promise().then(function (maps) {
            google.maps.event.trigger(maps[0].map, 'resize');
            lat = -37;
            lon = 144;
            maps[0].map.panTo(new google.maps.LatLng(lat,lon));
            var marker = {
                id: Date.now(),
                coords: {
                    latitude: lat,
                    longitude: lon
                }
            };
            $scope.map.markers = [];
            $scope.map.markers.Push(marker);
            console.log($scope.map.markers);
        });
    }, 60);
0
gyane