Неправильное положение карты Google при загрузке - PullRequest
Новая
       5

Неправильное положение карты Google при загрузке

10 голосов
/ 16 февраля 2012

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

Может кто-нибудь проверить, действительно ли это проблема, или предложить решение этой проблемы?У меня нет большого контроля над картой, так как она создается из другого места.

Я пытался присвоить iframe идентификатор, который я затем нацеливаю с помощью google.maps.event.trigger(map, "resize"); на функцию, которая показываетродительский контейнер, но безрезультатно.

РЕДАКТИРОВАТЬ В соответствии с просьбой, вот карта: 

<iframe width="450" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;t=m&amp;ll=56.084298,11.074219&amp;z=6&amp;output=embed"></iframe>

Как видите, в этом нет ничего особенного.Предполагается показать Данию, но иногда вместо этого показывают Германию и Польшу.Я уверен, что это хорошие места, но клиент видит мало пользы.

Ответы [ 7 ]

9 голосов
/ 22 марта 2012

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

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

Попробуйте, пока у меня все работает:

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

  2. Вставить приведенный ниже код javascript где-то под iframe: 

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

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

4 голосов
/ 30 июля 2012

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

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

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

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

  4. При нажатии на кнопку для отображения карты добавьте: 

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

  5. Чтобы скрыть добавление div:

    jQuery ('# map'). Hide ();

0 голосов
/ 12 октября 2014

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

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. Работало отлично.

0 голосов
/ 19 августа 2014

Я предлагаю загрузить карту с некоторой временной задержкой после проверки, является ли 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



        });

    }
0 голосов
/ 19 августа 2014

Я предлагаю загрузить карту с некоторой временной задержкой после проверки, является ли элемент 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



        });

    }
0 голосов
/ 03 июля 2012

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

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

0 голосов
/ 16 февраля 2012

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

К сожалению, я думаю, что лучший ответ - перейти к использованию простой реализацииGoogle Maps v3 API вместо встраивания 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 (map, "resize");когда вы показываете скрытый контейнер.

...