Как иметь дело с google-картой внутри скрытого div (обновленное изображение)
У меня есть страница, а карта google внутри скрытого div сначала. Затем я показываю div после того, как я нажму ссылку, но появится только верхняя левая часть карты.
Я попытался запустить этот код после нажатия:
map0.onResize();
или
google.maps.event.trigger(map0, 'resize')
любые идеи. вот образ того, что я вижу после показа div с скрытой картой в нем. ![alt text]()
Ответы
Ответ 1
Просто протестировал его сам и здесь, как я подошел к нему. Довольно прямо, дайте мне знать, если вам нужно какое-либо разъяснение.
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>
Ответ 2
У меня была одна и та же проблема, и я обнаружил, что при отображении div вызовите google.maps.event.trigger(map, 'resize'); и, похоже, разрешите эту проблему для меня.
Ответ 3
google.maps.event.trigger($("#div_ID")[0], 'resize');
Если у вас нет доступной переменной, она должна быть первым элементом (если вы не сделали что-то глупое) в div, который содержит GMAP.
Ответ 4
У меня была карта Google на вкладке Bootstrap, которая отображалась неправильно. Это было мое исправление.
// 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
});
Ответ 5
Как обновить карту при изменении размера div
Недостаточно просто позвонить google.maps.event.trigger(map, 'resize'); Вы должны reset также центр карты.
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);
}
}
Как прослушать событие изменения размера
Angular (ng-show или сбой ui-bootstrap)
Привязать непосредственно к видимости элемента, а не к значению, связанному с ng-show, потому что $watch может запускаться до обновления ng-show (так что div все равно будет невидимым).
scope.$watch(function () { return element.is(':visible'); },
function () {
resize();
}
);
jQuery.show()
Использовать встроенный обратный вызов
$("#myMapDiv").show(speed, function() { resize(); });
Bootstrap 3 Modal
$('#myModal').on('shown.bs.modal', function() {
resize();
})
Ответ 6
У меня была такая же проблема, google.maps.event.trigger(map, 'resize') не работал у меня.
То, что я сделал, - это установить таймер для обновления карты после того, как вы поместили видимый 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(....
....
}
Я не знаю, если это более удобный способ сделать это, но он работает!
Ответ 7
Если у вас есть карта Google, вставленная путем копирования/вставки кода iframe и вы не хотите использовать API Карт Google, это простое решение. Просто выполните следующую строку javascript, когда вы покажете скрытую карту. Он просто принимает HTML-код iframe и вставляет его в одно и то же место, поэтому он снова отображает:
document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;
версия jQuery:
$('#map-wrapper').html( $('#map-wrapper').html() );
HTML:
....
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
....
Следующий пример работает для карты, первоначально скрытой на вкладке 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>
Ответ 8
С помощью jQuery вы можете сделать что-то подобное. Это помогло мне загрузить карту Google в CMS Umbraco на вкладке, которая не будет видна сразу.
function waitForVisibleMapElement() {
setTimeout(function () {
if ($('#map_canvas').is(":visible")) {
// Initialize your Google Map here
} else {
waitForVisibleMapElement();
};
}, 100);
};
waitForVisibleMapElement();
Ответ 9
Также можно просто запустить событие изменения размера собственного окна.
Карты Google автоматически перезагрузятся:
window.dispatchEvent(new Event('resize'));
Ответ 10
Мое решение очень простое и эффективное:
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
Ответ 11
Или, если вы используете gmaps.js, звоните:
map.refresh();
когда отображается ваш div.
Ответ 12
Я предполагаю, что исходный вопрос касается карты, которая инициализируется в скрытом div страницы. Я решил аналогичную проблему, изменив размер карты в скрытом div на готовый документ после его инициализации, независимо от статуса отображения. В моем случае у меня есть 2 карты, один показан и один скрыт, когда они инициализированы, и я не хочу, чтобы каждая карта отображалась каждый раз. Это старая должность, но я надеюсь, что это поможет любому, кто смотрит.
Ответ 13
При использовании внутри вкладок Bootstrap v3 должно работать следующее:
$('a[href="#tab-location"]').on('shown.bs.tab', function(e){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});
где tab-location - идентификатор закладки, содержащей карту.
Ответ 14
Так же, как указали Джон Доппельманн и HoffZ, поместите весь код в следующем виде: или
setTimeout(function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});
Он отлично работал у меня
Ответ 15
Я нашел, что это работает для меня:
чтобы скрыть:
$('.mapWrapper')
.css({
visibility: 'hidden',
height: 0
});
чтобы показать:
$('.mapWrapper').css({
visibility: 'visible',
height: 'auto'
});
Ответ 16
Мое решение было:
CSS
.map {
height: 400px;
border: #ccc solid 1px;
}
JQuery
$('.map').width(555); // width of map canvas
Ответ 17
Мне не понравилось, что карта будет загружаться только после того, как скрытый div станет видимым. Например, в карусели это действительно не работает.
Это мое решение состоит в том, чтобы добавить класс к скрытому элементу, чтобы отобразить его и скрыть его с помощью абсолютной позиции, а затем отобразить карту и удалить класс после загрузки карты.
Протестировано в карусели Bootstrap.
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');
});
}
Ответ 18
используйте эту строку кодов, когда вы хотите отобразить карту.
$("#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);
Ответ 19
$("#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);
Ответ 20
Первое сообщение. Мой div googleMap находился в контейнере div с {display: none} до тех пор, пока не будет нажата кнопка. Имел ту же проблему, что и ОП. Это сработало для меня:
google.maps.event.addDomListener(window, 'load', setTimeout(initialize, 1));
Придерживайтесь этого кода внутри и в конце вашего кода, где нажимается вкладка div контейнера и отображается ваш скрытый div. Важно то, что ваш контейнер div должен быть видимым до того, как вызывается инициализация.
Я попробовал ряд предлагаемых здесь решений и других страниц, и они не сработали для меня. Дайте мне знать, если это сработает для вас. Спасибо.
Ответ 21
Добавьте этот код перед div или передайте его в файл 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>
Это событие будет запущено после загрузки div, чтобы он обновил содержимое карты, не нажимая F5
Ответ 22
После отображения карты я геокодирую адрес, а затем устанавливаю центр карт.
google.maps.event.trigger(map, 'resize'); не работал у меня.
Мне пришлось использовать map.setZoom(14);
Код ниже:
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());
});
}
});
Ответ 23
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>
