Wie gehe ich mit Google Map in einem versteckten Div um? (Aktualisiertes Bild)

Ich habe eine Seite und eine Google Map befindet sich zunächst in einem versteckten Div. Ich zeige dann das Div, nachdem ich auf einen Link geklickt habe, aber nur oben links auf der Karte wird angezeigt.

Ich habe versucht, diesen Code nach dem Klick auszuführen:

    map0.onResize();

oder:

  google.maps.event.trigger(map0, 'resize')

irgendwelche Ideen. Hier ist ein Bild von dem, was ich sehe, nachdem ich das Div mit der versteckten Karte darin gezeigt habe.

Habe es einfach selbst getestet und hier ist, wie ich es angegangen bin. Ziemlich einfach, lassen Sie mich wissen, wenn Sie eine Klarstellung benötigen

HTML

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>

CSS

<style type="text/css">
#map_canvas {display:none;}
</style>

Javascript

<script>
function displayMap()
{
    document.getElementById( 'map_canvas' ).style.display = "block";
    initialize();
}
function initialize()
{
    // create the map
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng( 0.0, 0.0 ),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map( document.getElementById( "map_canvas" ),myOptions );
}
</script>

Ich hatte das gleiche Problem und stellte fest, dass beim Anzeigen des Div der Anruf google.maps.event.trigger(map, 'resize');das Problem für mich zu lösen scheint.

google.maps.event.trigger($("#div_ID")[0], 'resize');

Wenn Sie keine Variablenzuordnung zur Verfügung haben, sollte dies das erste Element in divGMAP sein (es sei denn, Sie haben etwas Dummes getan) .

Ich hatte eine Google-Karte in einem Bootstrap-Tab, die nicht richtig angezeigt wurde. Das war mein Fix.

// Previously stored my map object(s) in googleMaps array

$('a[href="#profileTab"]').on('shown', function() {   // When tab is displayed...
    var map = googleMaps[0],
        center = map.getCenter();
    google.maps.event.trigger(map, 'resize');         // fixes map display
    map.setCenter(center);                            // centers map correctly
});

So aktualisieren Sie die Karte, wenn Sie die Größe Ihres Div ändern

Es reicht nicht aus, nur anzurufen. google.maps.event.trigger(map, 'resize');Sie sollten auch die Mitte der Karte zurücksetzen.

var map;

var initialize= function (){
    ...
}

var resize = function () {
    if (typeof(map) == "undefined") {) {
        // initialize the map. You only need this if you may not have initialized your map when resize() is called.
        initialize();
    } else {
        // okay, we've got a map and we need to resize it
        var center = map.getCenter();
        google.maps.event.trigger(map, 'resize');
        map.setCenter(center);
    }
}

So warten Sie auf das Größenänderungsereignis

Winkel (ng-show oder ui-bootstrap kollabieren)

Binden Sie direkt an die Sichtbarkeit des Elements und nicht an den Wert, der an ng-show gebunden ist, da die $ watch ausgelöst werden kann, bevor die ng-show aktualisiert wird (sodass das div weiterhin unsichtbar ist).

scope.$watch(function () { return element.is(':visible'); },
    function () {
        resize();
    }
);

jQuery .show ()

Verwenden Sie den eingebauten Rückruf

$("#myMapDiv").show(speed, function() { resize(); });

Bootstrap 3 Modal

$('#myModal').on('shown.bs.modal', function() {
    resize();
})

Wenn Sie eine Google Map durch Kopieren / Einfügen des Iframe-Codes eingefügt haben und die Google Maps-API nicht verwenden möchten , ist dies eine einfache Lösung. Führen Sie einfach die folgende Javascript-Zeile aus, wenn Sie die versteckte Karte anzeigen. Es wird nur der iframe-HTML-Code genommen und an derselben Stelle eingefügt, sodass er erneut gerendert wird:

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;

jQuery-Version:

$('#map-wrapper').html( $('#map-wrapper').html() );

Der HTML:

....
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
....

Das folgende Beispiel funktioniert für eine Karte, die ursprünglich auf einer Registerkarte "Bootstrap 3" ausgeblendet war:

<script>
$(document).ready( function() {

    /* Detects when the tab is selected */
    $('a[href="#tab-id"]').on('shown.bs.tab', function() {

        /* When the tab is shown the content of the wrapper
           is regenerated and reloaded */

        $('#map-wrapper').html( $('#map-wrapper').html() ); 

    });
});
</script>

Es ist auch möglich, einfach das native Fenstergrößenänderungsereignis auszulösen.

Google Maps lädt sich automatisch neu:

window.dispatchEvent(new Event('resize'));

Ich hatte das gleiche Problem, das google.maps.event.trigger(map, 'resize')funktionierte nicht für mich.

Was ich getan habe, war einen Timer zu setzen, um die Karte zu aktualisieren, nachdem die div...

//CODE WORKING

var refreshIntervalId;

function showMap() {
    document.getElementById('divMap').style.display = '';
    refreshIntervalId = setInterval(function () { updateMapTimer() }, 300);
}

function updateMapTimer() {
    clearInterval(refreshIntervalId);
    var map = new google.maps.Map(....
    ....
}

Ich weiß nicht, ob es der bequemere Weg ist, aber es funktioniert!

Mit jQuery können Sie so etwas tun. Dies hat mir geholfen, eine Google Map in Umbraco CMS auf eine Registerkarte zu laden, die nicht sofort sichtbar ist.

function waitForVisibleMapElement() {
    setTimeout(function () {
        if ($('#map_canvas').is(":visible")) {
            // Initialize your Google Map here
        } else {
            waitForVisibleMapElement();
        };
    }, 100);
};

waitForVisibleMapElement();

Meine Lösung ist sehr einfach und effizient:

HTML

<div class="map-wrap"> 
  <div id="map-canvas"></div>
</div>

CSS

.map-wrap{
  height:0;
  width:0;
  overflow:hidden;
}

Jquery

$('.map-wrap').css({ height: 'auto', width: 'auto' }); //For showing your map
$('.map-wrap').css({ height: 0, width: 0 }); //For hiding your map

Oder wenn Sie gmaps.js verwenden , rufen Sie auf:

map.refresh();

wenn dein div angezeigt wird.

Ich denke, die ursprüngliche Frage bezieht sich auf eine Karte, die in einem versteckten Teil der Seite initialisiert ist. Ich habe ein ähnliches Problem gelöst, indem ich die Größe der Karte im ausgeblendeten Bereich geändert habe, sobald das Dokument fertig ist, nachdem es initialisiert wurde, unabhängig von seinem Anzeigestatus. In meinem Fall habe ich 2 Karten, eine wird angezeigt und eine wird ausgeblendet, wenn sie initialisiert werden, und ich möchte nicht jedes Mal eine Karte initialisieren, wenn sie angezeigt wird. Es ist ein alter Beitrag, aber ich hoffe, er hilft jedem, der sucht.

Ich habe festgestellt, dass dies für mich funktioniert:

verstecken:

$('.mapWrapper')
.css({
  visibility: 'hidden',
  height: 0
});

zeigen:

    $('.mapWrapper').css({
      visibility: 'visible',
      height: 'auto'
    });

Bei Verwendung in Bootstrap v3-Registerkarten sollte Folgendes funktionieren:

$('a[href="#tab-location"]').on('shown.bs.tab', function(e){
    var center = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
});

Wo tab-locationist die ID der Registerkarte, die die Karte enthält?

Wie John Doppelmann und HoffZ angegeben haben, setzen Sie den gesamten Code wie folgt in Ihrer Div-Show-Funktion oder Ihrem Onclick-Ereignis zusammen:

setTimeout(function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});

Es hat perfekt für mich funktioniert

Meine Lösung war:

CSS:

.map {
   height: 400px;
   border: #ccc solid 1px;
}

jQuery:

$('.map').width(555); // width of map canvas

Ich mochte es nicht, dass die Karte erst geladen wurde, nachdem das versteckte Div sichtbar geworden war. In einem Karussell zum Beispiel funktioniert das nicht wirklich.

Diese Lösung besteht darin, dem ausgeblendeten Element eine Klasse hinzuzufügen, um es einzublenden und stattdessen mit der absoluten Position auszublenden. Anschließend wird die Karte gerendert und die Klasse nach dem Laden der Karte entfernt.

Im Bootstrap-Karussell getestet.

HTML

<div class="item loading"><div id="map-canvas"></div></div>

CSS

.loading { display: block; position: absolute; }

JS

$(document).ready(function(){
    // render map //
    google.maps.event.addListenerOnce(map, 'idle', function(){
        $('.loading').removeClass('loading');
    });
}

Verwenden Sie diese Codezeile, wenn Sie eine Karte anzeigen möchten.

               $("#map_view").show("slow"); // use id of div which you want to show.
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
                    document.body.appendChild(script);

 $("#map_view").show("slow"); // use id of div which you want to show.
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
     document.body.appendChild(script);

Erster Beitrag. Mein googleMap div befand sich in einem Container div mit {display: none}, bis auf die Registerkarte geklickt wurde. Hatte das gleiche Problem wie OP. Das hat bei mir funktioniert:

google.maps.event.addDomListener(window, 'load', setTimeout(initialize, 1));

Stecken Sie diesen Code in und am Ende Ihres Codes, wo auf die Registerkarte "Container-Div" geklickt wird und Ihr verstecktes Div angezeigt wird. Wichtig ist, dass Ihr Container-Div sichtbar sein muss, bevor die Initialisierung aufgerufen werden kann.

Ich habe eine Reihe von hier und auf anderen Seiten vorgeschlagenen Lösungen ausprobiert und sie haben bei mir nicht funktioniert. Lassen Sie mich wissen, ob dies für Sie funktioniert. Vielen Dank.

Fügen Sie diesen Code vor dem div hinzu oder übergeben Sie ihn an eine js-Datei:

<script>
    $(document).on("pageshow","#div_name",function(){
       initialize();
    });

   function initialize() {
   // create the map

      var myOptions = {
         zoom: 14,
         center: new google.maps.LatLng(0.0, 0.0),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("div_name"), myOptions);
   }


</script>

Dieses Ereignis wird nach dem Laden des Div ausgelöst, sodass der Karteninhalt aktualisiert wird, ohne dass F5 gedrückt werden muss

Beim Anzeigen der Karte geokodiere ich eine Adresse und setze dann das Kartenzentrum. Das google.maps.event.trigger(map, 'resize');hat bei mir nicht funktioniert.

Ich musste ein verwenden map.setZoom(14);

Code unten:

document.getElementById('map').style.display = 'block';
var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': input.value }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker2 = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                map.setZoom(14);
                marker2.addListener('dragend', function (event) {
                    $('#lat').val(event.latLng.lat());
                    $('#lng').val(event.latLng.lng());
                });

            }
        });