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

Question

У меня несколько странная проблема. У меня на сайте две карты, большая и маленькая. Я хочу использовать большой, чтобы показать маршрут к определенному адресу. Я сейчас пытаюсь реализовать две карты, но получаю странную проблему. Маленькая карта работает нормально, но на большой карте только небольшая область 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:

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

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

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

Answer 1

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

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

Изменение размера начнется после отображения карты.

Answer 2

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

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

Answer 3

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

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

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

В любом случае, спасибо !!

Answer 4

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

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

Answer 5

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

map.checkResize();

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

Answer 6

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

Джонни

Answer 7

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