web-dev-qa-db-fra.com

Afficher une carte Google dans un modal créé avec Twitter Bootstrap

J'essaie d'insérer une carte Google dans un modal à l'aide de Twitter Bootstrap. Le modal apparaît avec la forme de la carte présente, mais seule une partie de la carte est affichée, le reste est gris. Lors du redimensionnement de l'écran, la carte s'affiche toujours correctement, même si elle est centrée au mauvais endroit.

J'ai effectué des recherches et trouvé des suggestions telles que l'appel de l'événement de redimensionnement de la carte ou la définition de la largeur maximale de l'image de la carte, mais aucune de ces suggestions n'a été utile jusqu'à présent. Il semble que la carte ne parvienne pas à déterminer sa taille correcte tant qu'elle se trouve dans un élément caché.

JS

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.219987, 4.396237),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapCanvas"),
    mapOptions);
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.219987, 4.396237)
  });
  marker.setMap(map);
}

HTML

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3></h3>
  </div>
  <div class="modal-body">
    <div id="mapCanvas" style="width: 500px; height: 400px"></div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
</div>

J'utilise Twitter Bootstrap v2.0.4. J'ai besoin d'aide car je ne parviens pas à déclencher l'événement de redimensionnement correctement ni à éditer le fichier css afin de laisser la carte Google seule.

google-mapstwitter-bootstrapmodal-dialog
59
Eels

Google Maps affiche en effet les zones "grises" lorsqu'elles sont placées dans un élément dynamique (par exemple: un élément qui redimensionne, estompe, etc.). Vous avez raison de déclencher la fonction "redimensionner", qui devrait être appelée une fois l'animation terminée (l'événement shown.bs.modal Dans Bootstrap 3 ou shownévénement dans Bootstrap 2):

$("#myModal").on("shown.bs.modal", function () {
    google.maps.event.trigger(map, "resize");
});

Dans Bootstrap 2, vous ferez:

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

(où map est le nom de la variable de votre carte (voir documentation Google Maps pour plus de détails), et #myModal l'identifiant de votre élément).

UPDATE 2018-05-22

Avec une nouvelle version de rendu dans la version 3.32 de l'API JavaScript de 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 maintenant 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

108
MarcoK

Pour moi, ça marche comme ça (Bootstrap 3):

$("#contact-modal").on("shown.bs.modal", function () {
    google.maps.event.trigger(map, "resize");
});
43
henrikstroem

Afficher la carte correctement et centrée

Je voulais souligner quelques modifications que j'ai apportées, en fonction de la réponse initiale, pour que cela fonctionne avec Bootstrap 3 (consultez la rubrique tilisation des modaux ).

// Resize map to show on a Bootstrap's modal
$('#map-modal').on('shown.bs.modal', function() {
  var currentCenter = map.getCenter();  // Get current center before resizing
  google.maps.event.trigger(map, "resize");
  map.setCenter(currentCenter); // Re-set previous center
});

Dans ce cas, je m'occupe également de la mise à jour récente de la carte, sur la base de cette question suggérée dans le commentaire de Jan-Henk à la première réponse.

38
Roberto S.

Lorsque vous utilisez Bootstrap 3, vous devez utiliser ce qui est fourni dans leur documentation, c'est-à-dire au lieu de "shown", utilisez "shown.bs.modal".

Exemple:

 $('#modal').on('shown.bs.modal', function () { 
     initialiseMap();
 });
8
user2956820

La réponse acceptée s'est débarrassée des cases grises, mais ne centre pas la carte aux bonnes coordonnées pour moi. Ma solution consistait simplement à attendre le rendu de la carte après l'affichage du modal.

$('#modal').on('shown', function () {
    initialize();
});
5
andrewtweber

La réponse acceptée fonctionne effectivement dans ce cas où le contenu de la div est local. Malheureusement, j'ai eu le même problème lors de l'affichage d'une carte incluse dans les données distantes. Obtenir le handle de la carte et appeler redimensionner n'a pas correctement centré ma carte. Voici comment j'ai résolu le problème dans ma situation de données distantes.

Inclure une balise de script dans vos données distantes avec une fonction pour initialiser la carte

<script type="text/javascript">
    function renderMap() {
        var point = new google.maps.LatLng(51.219987, 4.396237);
        var map = new google.maps.Map(document.getElementById('map'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 13,
            center: point
        });
        var marker = new google.maps.Marker({ position: point, map: map, icon: 'http://www.google.com/intl/en_us/mapfiles/ms/icons/red-dot.png' });
    }
</script>

Appelez la fonction dans l'événement affiché dans la boîte de dialogue de la page principale

<script type="text/javascript">

    $(document).ready(function () {
        $('#dlgReportInfo').on('shown', function () {
            renderMap();
        });
    })
</script>

De cette façon, la carte est déjà redimensionnée dans la boîte de dialogue avant de l'initialiser. Espérons que cela aidera les autres avec une situation similaire.

5
Jason Butera

le code suivant fonctionne parfaitement pour bootstrap 3

$("#mapModal").on("shown.bs.modal", function () {initialize();});
5
Jakki
    this works for me 
    **<!-- Modal -->**
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Google Maps</h4>
                </div>
                <div class="modal-body">

                    <div id="map_canvas" style="width:auto; height: 500px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


**Button**
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Map</button>

**javascript**
<script type="text/javascript">
    function initializeMap() {
        var mapOptions = {
            center: new google.maps.LatLng(51.219987, 4.396237),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(51.219987, 4.396237)
        });
        marker.setMap(map);
    }

    //show map on modal
    $('#myModal').on('shown.bs.modal', function () {
        initializeMap();
    });

</script>

espérons que cela aidera

4
Jerrilyn

J'ai résolu avec la solution:

$('#myId').on('shown.bs.modal', function () { 
    initializeMap() // with initializeMap function get map.
});

// événement shown.bs.modal sur modal bootstrap s'affichera après le show modal, n'utilisez pas show.bs.modal car cela appelez avant le spectacle modal.

3
Dinh Vu Duc

essaye ça !

<div class="modal fade" id="map_modal" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body"><div id="map_canvas" style="width:530px; height:300px"></div></div>

    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

var map = marker = new Array();
geocoder = NULL;


                    function addPoint(location, id, mapId) {
                        if (!marker[id]) {
                            marker[id] = new google.maps.Marker({
                                position: location,
                                map: map[mapId],
                                draggable: true
                            });
                        }

                    }


                    function placeMarker(location, editStr, id) {
                        if (!marker[id]) {
                            marker[id] = new google.maps.Marker({
                                position: location,
                                map: map[id],
                                draggable: false
                            });
                        }
                        marker[id].setPosition(location);
                        map[id].setCenter(location);
                        $("#longitud").val(location.lat());
                        $("#latitud").val(location.lng());


                    }


                    function  initializeMap(id, div_id, lat, lng, editStr) {
                        if (!geocoder)
                            geocoder = new google.maps.Geocoder();

                        if (!map[id]) {
                            var coordinates = new google.maps.LatLng(lat, lng);
                            var myOptions = {zoom: 8, center: coordinates, mapTypeId: google.maps.MapTypeId.ROADMAP}
                            map[id] = new google.maps.Map(document.getElementById(div_id), myOptions);
                            google.maps.event.addListener(map[id], 'click', function(event) {
                                placeMarker(event.latLng, editStr, id);
                            });

                            placeMarker(coordinates, editStr, id);

                        }
                    }


                    $('#map_modal').on('shown.bs.modal', function(e) {
                        initializeMap("#newMaps", "map_canvas", 10.444598, -66.9287, "");
                    })
1
Carlos Avalos

Je suis également confronté au même problème, mais je le résous en attendant l'état "inactif" de la carte (c'est-à-dire lorsqu'il est terminé), puis en appelant le redimensionnement:

 google.maps.event.addListenerOnce(map, 'idle', function () {
                 var currentCenter = map.getCenter();
                 google.maps.event.trigger(map, 'resize');
                 map.setCenter(currentCenter);

                 map.setZoom(15);
             });

après

              map = new google.maps.Map(document.getElementById('map-canvas2'),mapOptions);
1
Sunil Devre