Неверная позиция карты Google при загрузке

Ответ 1

Я также могу подтвердить эту проблему. Я не думаю, что это связано с вашим скрытым div, поскольку у меня есть проблема с фиксированными элементами.

Проблема заключается в том, что место, по которому вы хотите, чтобы карта была сосредоточена, по какой-то причине заканчивается в верхнем левом углу iframe. Я думаю, это потому, что на стороне Google событие изменения размера карты запускается слишком рано, прежде чем он узнает полный размер iFrame.

Попробуйте это, пока это работает для меня:

• Удалите тег iframe src.

• Вставьте ниже код javascript где-то ниже iframe:

  <script type='text/javascript'>
      jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc....");
  </script>
  

Потому что он загружает карту после iframe. Если у меня все еще будут проблемы в будущем, я попытаюсь добавить короткую задержку к вышеуказанному коду, заставив его работать после загрузки документа.

Ответ 2

Простое решение:

• Поместите iframe внутри div с id = "map".
• Не скрывайте div, потому что карта будет сгенерирована неправильно.

• Поместите абсолютный div, 10.000 пикселей слева. В этом случае карта не будет отображаться на экране, но будет загружена.

  jQuery ('# map'). css ({ "position": "absolute", "left": "- 10000px" });

• Когда вы нажимаете кнопку, чтобы отобразить карту, добавьте:

  jQuery('#map').show(); jQuery('#map').css({"position":"static"});
  

• Чтобы скрыть div, добавьте:

  JQuery ( '# карта') скрыть();.

Ответ 3

Событие "resize" принимает объект карты как аргумент, а не идентификатор. Поскольку вы используете maps.google.com в iframe, я не считаю возможным доступ к фактическому объекту карты.

К сожалению, я считаю, что лучшим ответом является переход на использование простой реализации API Google Maps v3 вместо внедрения maps.google.com в iframe. Это позволит вам правильно "изменить размер" при необходимости, так как у вас будет доступ к объекту карты.

Здесь документация: http://code.google.com/apis/maps/documentation/javascript/tutorial.html

Настройте простую реализацию, например, этот пример: http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html

Затем оставьте свой вызов google.maps.event.trigger(карта, "изменить размер" ); когда вы показываете скрытый контейнер.

Ответ 4

Можно подтвердить, что я столкнулся с этой проблемой при отображении двух карт в div с вкладками. То есть один div загружает скрытый.

Самый простой способ, с которым я столкнулся, состоит в том, чтобы просто использовать бит проб и ошибок и смещать карту перед копированием и вставлять код вставки, чтобы компенсировать ошибочное смещение карты. Но просто не забудьте оставить внешнюю ссылку (ссылку внизу на внешнюю карту google) в качестве исходного href, иначе эта карта будет также смещена.

Ответ 5

Я предлагаю загрузить карту с некоторой временной задержкой после проверки того, что div виден или нет, что будет удерживать карту. Работал для меня

  $(document).ready(function () {
        $('.togglebtn').click(function () {

 if(!$('#map_canvas').is(':visible')){
                setTimeout(function(){initialize()}, 500);
                }
    });
});


   //your function
 function initialize() {


        var mapOptions = {
            zoom: 3,
          center :  new google.map.LatLng(31.510474,80.352287),
            center: new google.maps.LatLng(44.510474, 50.352287),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var contentSC_PAK = "SoftCircles Pakistan";
        .....
        ..... 

        and rest of your map code to initialize map



        });

    }

Ответ 6

Я предлагаю загрузить карту с некоторой временной задержкой после проверки того, что div виден или нет, что будет удерживать карту. Попробуйте!

  $(document).ready(function () {
        $('.togglebtn').click(function () {

 if(!$('#map_canvas').is(':visible')){
                setTimeout(function(){initialize()}, 500);
                }
    });
});


   //your function
 function initialize() {


        var mapOptions = {
            zoom: 3,
          center :  new google.map.LatLng(31.510474,80.352287),
            center: new google.maps.LatLng(44.510474, 50.352287),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var contentSC_PAK = "SoftCircles Pakistan";
        .....
        ..... 

        and rest of your map code to initialize map



        });

    }

Ответ 7

Этот не работал у меня:

jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc....");

... поэтому мне пришлось найти другой способ решить эту проблему.

Моя проблема заключалась в том, что у меня был <div>, который был display: none, и стал видимым таким образом через 2,5 секунды, как это:

setTimeout(function() {
    $("#contents")
    .css({opacity: 0}).fadeIn()
    .animate({opacity:1}, 1000, function() {
    });
}, 2500);

И я хотел, чтобы карта Google отображалась в #contents, и у меня была та же проблема, что красный маркер находился в верхнем левом углу.

Итак, я добавил на страницу <div id="map"></div>.

Затем я добавил материал iframe в php файл под названием map.php, и я добавил эту строку jquery ниже:

setTimeout(function() {
    $("#map").load('map.php');
}, 2500);

Итак, он загрузил map.php с iframe в div с map id. Он отлично работал.