jak radzić sobie z mapą Google w ukrytym div (zaktualizowany obraz)

Miałem ten sam problem i stwierdziłem, że kiedy pokazuję div, dzwonię do

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

i wydaje się, że rozwiązuje ten problem za mnie ...

Właśnie to sprawdziłem i tak do tego podszedłem. Całkiem proste, daj mi znać, jeśli potrzebujesz wyjaśnień
HTML

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" >

<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>

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

Jeśli nie masz dostępnej mapy zmiennych, powinna to być pierwszy element (chyba że zrobiłeś coś głupiego) w

div

zawierającym GMAP.

Alternatywnie możesz po prostu wywołać własne zdarzenie zmiany rozmiaru okna.

Mapy Google automatycznie uruchomią się ponownie:

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

Miałem ten sam problem,

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

nie działa dla mnie.
To, co zrobiłem, to ustawienie licznika czasu, aby odświeżyć mapę po umieszczeniu widocznego

div

...

//CODE WORKINGvar refreshIntervalId;function showMap() {

 document.getElementById('divMap').style.display = '';

 refreshIntervalId = setInterval(function () { updateMapTimer() }, 300);

}function updateMapTimer() {

 clearInterval(refreshIntervalId);

 var map = new google.maps.Map(....

 ....

}

Nie wiem, czy jest to wygodniejszy sposób, ale działa!

Z jQuery można zrobić coś takiego. Pomogło mi to załadować mapę google do Umbraco CMS na karcie, która nie będzie od razu widoczna.

function waitForVisibleMapElement() {

 setTimeout(function () {

 if ($('#map_canvas').is(":visible")) {

// Initialize your Google Map here

 } else {

 waitForVisibleMapElement();

 };

 }, 100);

};waitForVisibleMapElement();

Miałem mapę Google na karcie Bootstrap, która nie wyświetlała się poprawnie. To była moja dawka.

// 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

});

[b]
Jak zaktualizować mapę przy zmianie rozmiaru div

[/b]>
Nie wystarczy po prostu zadzwonić do

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

, musisz też zresetować środek mapy.

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);

 }

}

[b]
Jak nasłuchiwać zdarzenia zmiany rozmiaru

[/b]>

Angular (ng-show lub ui-bootstrap collapse

)
Wiązanie bezpośrednio z widocznością elementu, a nie wartością przypisaną do ng-show, ponieważ $ watch może zostać uruchomiony przed zaktualizowaniem ng-show (więc div będzie nadal niewidoczny).

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

 function () {

 resize();

 });

jQuery .show()

Użyj wbudowanego wywołania zwrotnego

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

Bootstrap 3 Modal

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

 resize();

})

Jeśli masz wklejoną mapę google przez kopiowanie/wklejanie kodu iframe i nie chcesz korzystać z Google Maps API
, to jest proste rozwiązanie. Po prostu wykonaj następującą linię javascript, gdy pokażesz ukrytą mapę. Po prostu pobiera kod HTML iframe i wstawia go w tym samym miejscu, aby ponownie się renderował:

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

Wersja jQuery:

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

W HTML:

....

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

Poniżej przykład mapy początkowo ukrytej w sekcji bootstrap 3:

<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>

Moje rozwiązanie jest bardzo proste i wydajne:

HTML

<div class="map-wrap"> 

 <div id="map-canvas">

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

Lub jeśli używasz

gmaps.js
http://hpneo.github.io/gmaps/, połączenie:

map.refresh();

kiedy wyświetlany jest Twój element DIV.

Domyślam się, że pierwotne pytanie dotyczy inicjalizacji mapy w ukrytym elemencie div na stronie. Rozwiązałem podobny problem, zmieniając rozmiar mapy w ukrytym div po przygotowaniu dokumentu, po jego zainicjowaniu, niezależnie od stanu wyświetlania. W moim przypadku mam 2 mapy, jedna jest wyświetlana, a druga jest ukryta podczas inicjalizacji, a nie chcę inicjalizować mapy za każdym razem, gdy jest wyświetlana. To jest stary post, ale mam nadzieję, że pomoże każdemu, kto szuka.

Odkryłem, że to działa dla mnie:
ukryć:

$('.mapWrapper').css({

 visibility: 'hidden',

 height: 0

});

pokazać:

$('.mapWrapper').css({

 visibility: 'visible',

 height: 'auto'

 });

Jak zauważyli John Doppelman i HoffZ, umieść cały kod razem w następujący sposób w funkcji wyświetlania div lub zdarzeniu onclick:

setTimeout(function(){

var center = map.getCenter();

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

map.setCenter(center);

});

To działało dobrze dla mnie

W przypadku użycia w zakładkach Bootstrap v3, następujące powinny działać:

$('a[href="#tab-location"]').on('shown.bs.tab', function(e){

 var center = map.getCenter();

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

 map.setCenter(center);

});

gdzie

tab-location

to identyfikator karty zawierającej mapę.

użyj tej linii kodów, jeśli chcesz wyświetlić mapę.

$("#map_view").show("slow");// use id of div which you want to show.

 var script = document.createElement("script");

 script.type = "text/javascript";

 script.src = "[url=https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";]https://maps.googleapis.com/ma ... 3B%3B[/url]

 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 = "[url=https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";]https://maps.googleapis.com/ma ... 3B%3B[/url]

 document.body.appendChild(script);

Nie podobało mi się, że mapa została załadowana dopiero po tym, jak ukryty element div stał się widoczny. Na przykład w karuzeli to nie działa.
Moje rozwiązanie polega na dodaniu klasy do ukrytego elementu, aby go pokazać i ukryć za pomocą pozycji bezwzględnej, a następnie wyrenderować mapę i usunąć klasę po załadowaniu mapy.
Testowane za pomocą Bootstrap Carousel.
HTML

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

CSS

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

JS

$(document).ready(function(){

// render map//

 google.maps.event.addListenerOnce(map, 'idle', function(){

 $('.loading').removeClass('loading');

 });

}

Moje rozwiązanie brzmiało:

CSS

:

.map {

 height: 400px;

 border: #ccc solid 1px;

}

jQuery

:

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

Pierwszy post. Mój element div googleMap znajdował się wewnątrz elementu div kontenera z {display: none}, dopóki karta nie została kliknięta. Miał ten sam problem co OP. To zadziałało dla mnie:

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

Wklej ten kod wewnątrz i na końcu kodu, gdzie kliknie element div kontenera i otworzy się ukryty element div. Ważną rzeczą jest to, że element div kontenera musi być widoczny przed wywołaniem inicjalizacji.
Wypróbowałem kilka rozwiązań sugerowanych tutaj i na innych stronach, ale nie zadziałały. Daj mi znać, jeśli to zadziała. Podziękować.

Dodaj ten kod przed div lub przekaż go do pliku JS:

<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>

To zdarzenie zostanie wyzwolone po załadowaniu div, więc zaktualizuje zawartość mapy bez konieczności naciskania klawisza F5

Po wyświetleniu mapy geokoduję adres, a następnie ustawiam środek map.

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

nie działa dla mnie.
Musiałem użyć

map.setZoom (14);

Kod poniżej:

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());

 }); }

 });

<div class="snippet-code">
<div class="snippet" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">

function init_map() {

 var myOptions = {

 zoom: 16,

 center: new google.maps.LatLng(0.0, 0.0),

 mapTypeId: google.maps.MapTypeId.ROADMAP

 };

 map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);

 marker = new google.maps.Marker({

 map: map,

 position: new google.maps.LatLng(0.0, 0.0)

 });

 infowindow = new google.maps.InfoWindow({

 content: 'content'

 });

 google.maps.event.addListener(marker, 'click', function() {

 infowindow.open(map, marker);

 });

 infowindow.open(map, marker);

}

google.maps.event.addDomListener(window, 'load', init_map);jQuery(window).resize(function() {

 init_map();

});

jQuery('.open-map').on('click', function() {

 init_map();

});

<pre class="snippet-code-html lang-html prettyprint-override">

<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><button type="button" class="open-map"></button>

<div style='overflow:hidden;height:250px;width:100%;'>

 <div id='gmap_canvas' style='height:250px;width:100%;'>