Mam stronę, a mapa Google jest początkowo wewnątrz ukrytego elementu div. Następnie pokazuję element DIV po kliknięciu łącza, ale pojawia się tylko lewy górny róg mapy.
próbowałem uruchomić ten kod po kliknięciu:
map0.onResize();
lub:
google.maps.event.trigger(map0, 'resize')
jakieś pomysły. tutaj jest obraz tego, co widzę po pokazaniu div z ukrytą mapą.
Odpowiedzi:
Właśnie przetestowałem to sam i oto jak 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;" ></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>
źródło
Miałem ten sam problem i odkryłem, że po wyświetleniu elementu div, zadzwoń
google.maps.event.trigger(map, 'resize');
i wygląda na to, że rozwiązuje problem.źródło
google.maps.event.trigger($("#div_ID")[0], 'resize');
Jeśli nie masz dostępnej mapy zmiennych, powinien to być pierwszy element (chyba że zrobiłeś coś głupiego) w tym,
div
który zawiera GMAP.źródło
Miałem mapę Google na karcie Bootstrap, która nie wyświetlała się poprawnie. To była moja poprawka.
// 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 });
źródło
'a[href="#profileTab"]'
nastep-2
która jest nazwa DIV zawierającej mapę DIV.Jak odświeżyć mapę podczas zmiany rozmiaru div
Nie wystarczy tylko zadzwonić.
google.maps.event.trigger(map, 'resize');
Powinieneś także 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); } }
Jak nasłuchiwać zdarzenia zmiany rozmiaru
Angular (zwijanie ng-show lub ui-bootstrap)
Powiąż bezpośrednio z widocznością elementu, a nie z wartością przypisaną do ng-show, ponieważ $ watch może uruchomić się przed zaktualizowaniem ng-show (więc element 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(); })
źródło
Jeśli masz mapę Google wstawioną przez skopiowanie / wklejenie kodu iframe i nie chcesz korzystać z interfejsu API Map Google , jest to łatwe rozwiązanie. Po prostu wykonaj poniższą linię javascript, gdy pokażesz ukrytą mapę. Po prostu pobiera kod HTML iframe i wstawia go w tym samym miejscu, więc renderuje się ponownie:
document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;
Wersja jQuery:
$('#map-wrapper').html( $('#map-wrapper').html() );
HTML:
.... <div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div> ....
Poniższy przykład działa dla mapy początkowo ukrytej na karcie 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>
źródło
https://www.google.com/maps/embed/v1/place?..
Możliwe jest również wyzwolenie natywnego zdarzenia zmiany rozmiaru okna.
Mapy Google załadują się ponownie automatycznie:
window.dispatchEvent(new Event('resize'));
źródło
Miałem ten sam problem,
google.maps.event.trigger(map, 'resize')
to nie działało dla mnie.To, co zrobiłem, to ustawić timer, aby zaktualizować mapę po umieszczeniu widocznego
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(.... .... }
Nie wiem, czy to wygodniejszy sposób, ale działa!
źródło
Z jQuery można zrobić coś takiego. Pomogło mi to załadować mapę Google w Umbraco CMS na karcie, która nie byłaby widoczna od razu.
function waitForVisibleMapElement() { setTimeout(function () { if ($('#map_canvas').is(":visible")) { // Initialize your Google Map here } else { waitForVisibleMapElement(); }; }, 100); }; waitForVisibleMapElement();
źródło
Moje rozwiązanie jest bardzo proste i wydajne:
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
źródło
Jeśli używasz gmaps.js , zadzwoń:
map.refresh();
kiedy wyświetlany jest Twój element DIV.
źródło
Wydaje mi się, że pierwotne pytanie dotyczy mapy zainicjowanej w ukrytym elemencie div na stronie. Rozwiązałem podobny problem, zmieniając rozmiar mapy w ukrytym div, gdy dokument jest gotowy, po jego zainicjowaniu, niezależnie od statusu wyświetlania. W moim przypadku mam 2 mapy, jedna jest wyświetlana, a druga jest ukryta, gdy są inicjalizowane, i nie chcę inicjować mapy za każdym razem, gdy jest wyświetlana. To stary post, ale mam nadzieję, że pomoże każdemu, kto szuka.
źródło
Odkryłem, że to działa dla mnie:
ukryć:
$('.mapWrapper') .css({ visibility: 'hidden', height: 0 });
pokazywać:
$('.mapWrapper').css({ visibility: 'visible', height: 'auto' });
źródło
W przypadku użycia w zakładkach Bootstrap v3, poniższe 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 zakładki zawierającej mapę.źródło
Tak jak wskazali John Doppelmann 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); });
U mnie zadziałało idealnie
źródło
Moje rozwiązanie brzmiało:
CSS:
.map { height: 400px; border: #ccc solid 1px; }
jQuery:
$('.map').width(555); // width of map canvas
źródło
Nie podobało mi się, że mapa ładowała się dopiero po tym, jak ukryty element div stał się widoczny. Na przykład w karuzeli to nie działa.
To moje rozwiązanie polega na dodaniu klasy do ukrytego elementu, aby go odkryć i ukryć za pomocą pozycji bezwzględnej, a następnie wyrenderować mapę i usunąć klasę po załadowaniu mapy.
Przetestowano w Bootstrap Carousel.
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'); }); }
źródło
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 = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"; document.body.appendChild(script);
źródło
$("#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);
źródło
Pierwszy post. Mój element div googleMap znajdował się w elemencie div kontenera z {display: none} do momentu kliknięcia karty. Miał ten sam problem co OP. To zadziałało dla mnie:
google.maps.event.addDomListener(window, 'load', setTimeout(initialize, 1));
Umieść ten kod w środku i na końcu kodu, w miejscu, w którym została kliknięta karta div kontenera, i odsłania ukryty element div. Ważną rzeczą jest to, że element div kontenera musi być widoczny przed wywołaniem inicjalizacji.
Wypróbowałem szereg rozwiązań proponowanych tutaj i na innych stronach i nie działały one dla mnie. Daj mi znać, jeśli to zadziała. Dzięki.
źródło
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 wywołane po załadowaniu div, więc odświeży zawartość mapy bez konieczności naciskania F5
źródło
Po wyświetleniu mapy geokoduję adres, a następnie ustawiam środek mapy. U
google.maps.event.trigger(map, 'resize');
mnie nie działa.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()); }); } });
źródło
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(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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%;'></div> </div>
źródło