Карты Google не полностью загружаются

У меня есть несколько странная проблема. У меня две карты на моем сайте, большая и маленькая. Я хочу использовать большой, чтобы показать маршрут к определенному адресу. Теперь я пытаюсь реализовать две карты, но получаю странную проблему. Маленькая карта работает нормально, но на большой карте только небольшая область div заполнена картой, а остальная часть пуста. (См. Изображение.)

Я использую следующий код для отображения двух карт:


   function initialize() {
    var latlng = new google.maps.LatLng(51.92475, 4.38206);
    var myOptions = {zoom: 10, center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({position: latlng, map:map, title:"Home"});
    var image = '/Core/Images/Icons/citysquare.png';
    var myLatLng = new google.maps.LatLng(51.92308, 4.47058);
    var cityCentre = new google.maps.Marker({position:myLatLng, map:map, icon:image, title:"Centre"});
    marker.setMap(map);

    var largeLatlng = new google.maps.LatLng(51.92475, 4.38206);
    var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
    var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions);
    var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
    largeMarker.setMap(largeMap); 
   }
   [..]
   jQuery(document).ready(function () {
    [..]
    initialize();
   });

Что здесь не так?

EDIT:

К сожалению, приведенные ниже предложения не работают. Закрытие я пришел, чтобы удалить дисплей: ни один из элементов и установить элементы, чтобы скрыть с помощью jquery


   [..]
   jQuery(document).ready(function () {
    [..]
    $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).hide();
   });

Со следующим результатом

Ответ 1

Я исправил это!

Я сделал собственную функцию для большой карты и поместил ее в обратный вызов при открытии элементов


function largeMap(){
 var largeLatlng = new google.maps.LatLng(51.92475, 4.38206);
 var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
 var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions);
 var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
 largeMarker.setMap(largeMap);
}
[..]
 $("#showRoute").click(function(e){
  e.preventDefault();
  $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeIn(500);
  $("#shadowContent").show().css({'width':'750px','top':'25px','left':'50%','margin-left':'-400px'});
  $("#closeBarLink").click(function(l){
   l.preventDefault();
   $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeOut(500);
  });
  largeMap();
 });

Спасибо в любом случае!!

Ответ 2

Да, @Argiropoulos-Stavros, но добавьте его в качестве слушателя

    google.maps.event.addListenerOnce(map, 'idle', function(){
        google.maps.event.trigger(map, 'resize');
        map.setCenter(location);
    });

Он начнет повторную сортировку после отображения карты.

Ответ 3

Я думаю, вы используете v3. Итак, google.maps.event.trigger(карта, "изменить размер" );

Также посмотрите здесь

Ответ 4

вызывать initialize(); функцию после активного окна.

$(document).ready(function () {
  $("#shadow").show(function () {
    initialize();
  })
});

Ответ 5

Когда вы загружаетесь на большой карте, попробуйте добавить это в конец вашего кода карты.

map.checkResize();

Когда Google Maps сначала отображает на вашей странице, он имеет размеры, записанные таким образом, чтобы они отображали изображения карт такого размера. Если вы динамически изменяете размер карты, вам нужно сказать API для проверки нового размера.

Ответ 6

<script type='text/javascript' >
var geocoder, map;
function codeAddress() {
    var address= '<?php echo $this->subject()->address; ?>';
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var myOptions = {
                zoom: 13,
                center: results[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                icon:'http://rvillage.com/application/themes/rvillage/images/map-marker.png'
            }); 
            var infowindow = new google.maps.InfoWindow({ content: 'coming soon' });
            google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, this);         
            });
        }
    });
}

jQuery(document).ready(function () {
    codeAddress();
});
</script>

Ответ 7

Вы используете всплывающее окно с jQuery, и я приглашаю вас на вызов функции initialize(), когда документ готов ($(document).ready(function() {initialize(); })). Попробуйте вызвать функцию initialize() после всплывающего окна.

Джонни