it-swarm.com.de

google-Karte nach Bildschirmgröße anzeigen?

Ich habe Probleme mit der Google-Map, die ich einbettete. Ich verstehe nicht, warum beim Laden die Karte nicht angezeigt wird und erst angezeigt wird, wenn ich die Größe des Fensters ändert. Ich habe verschiedene Lösungen in Stackoverflow durchgegangen, aber sie funktionieren nicht für mich .

Hier ist mein js-Code:

<script>
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 31.554606, lng: 74.357158},
          zoom: 14
        });
 google.maps.event.addListenerOnce(map, 'idle', function() {
               google.maps.event.trigger(map, 'resize');
            });
         } 
</script>

mein div

<div id="map"></div>

wenn ich die Anwendung lade, erscheint es wie  enter image description here

und nach einem Browserfenster erscheint es perfekt so  enter image description here

bitte sagen Sie mir, wie Sie dieses Problem beheben können?

13
Ahmad

rufen Sie google.maps.event.trigger (map, 'resize') auf, wenn Ihre "div id = map" sichtbar wird . Bitte sehen Sie Wie skaliere ich eine Google Map mit JavaScript, nachdem sie geladen wurde?

9
Dmitriy

Nichts hat für mich funktioniert. Ich habe die Modellbox in Bootstrap verwendet, um die Karte zu laden. Ich habe alles stundenlang versucht. Jedes Mal, wenn ich die Karte laden würde, würde ich ein graues Kästchen sehen, aber sobald ich die Größe des Browsers ändern würde, würde er die Karte anzeigen. Es schien, als müsste die Größe des Fensters geändert werden. Also habe ich die gesamte Kartenfunktionalität in eine Funktion namens initmap2() eingefügt und die frische Karte darin angezeigt. und beim Klicken habe ich verwendet

setTimeout( initMap2, 200 );

Sobald sich die Modal-Box öffnete, würde sie die Karte anzeigen, und ich versuchte, 100 milliseconds zu arbeiten, aber ich denke, es funktioniert mit 200+ milliseconds, sodass ich 500ms nur zur Sicherheit hielt.

Ich hoffe das hilft

4
Imran Ud Din

Ich habe festgestellt, dass dies nur funktioniert, nachdem zwei Dinge kombiniert wurden: setTimeout und google resize.

Am Ende von initMap setze ich also:

google.maps.event.addListener(map, "idle", function(){
  google.maps.event.trigger(map, 'resize'); 
});

Und erstellen Sie einen setTimeout für die initMap wie folgt:

$(document).ready(function(){
  setTimeout(initMap, 1000);
});

- Bearbeiten

Um @LucaC zu beantworten: meine initMap ist eine separate js, die ich in die Seiten verlinke. Die obige Lösung ist in diesem js definiert (nur setTimeout).

Nach einiger Zeit bemerkte ich jedoch, dass dieses Problem bei mobilen Geräten immer noch auftritt.

Umgehen: Behalten Sie das setTimeout für die initMap bei und auf der Seite, auf der ich die Map lade, habe ich eingerichtet

$(window).load(function(){
 setTimeout(function(){
   google.maps.event.trigger(map, "resize");
 }, 250);
});

Also: i) alles verzögern, was die Karte beschädigt; ii) am Ende die Größe der Karte nach dem Laden der Seite ändern :)

2
PJ.Wanderson

Bei mir hat nichts geklappt. Ich habe die Modal Box in bootstrap zum Laden der Map verwendet. Ich habe folgenden Code verwendet, möglicherweise hilft er Ihnen

Zuerst lade ich die Map in body mit display: none wie unten

 <div style="display:none; overflow:hidden; width:100%; height:400px;" id="map"></div>

mit der Methode initMap wird die Karte ordnungsgemäß geladen, wir haben jedoch display = none verwendet, sodass die Karte nicht angezeigt wird. Um diese Karte im Modell anzuzeigen, füge ich das div, das id = "map" hat, an id = "map-modal" an, das im Modell ist. Wie unten

$('#modal-id').on('shown.bs.modal', function () {
    document.getElementById('map').style.display = "";
    var mapNode = map.getDiv();
    $('#map-modal').append(mapNode);
});

Möge es funktionieren.

0
Renish Gotecha