позиционирование карты Google остается в левом верхнем углу - PullRequest
Новая
       17

позиционирование карты Google остается в левом верхнем углу

1 голос
/ 21 октября 2011

Я только что добавил googlemap на сайт. Я помещен, как представлено в итоговых данных в div map_canvas, и этот div вложен в другой div, например:

теперь проблема в том, что плитки карты остаются в верхнем углу, а не на фоне карты, как этот http://screencast.com/t/jeUSKijjwE

что может быть не так?

Ответы [ 5 ]

1 голос
/ 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



        });

    }
1 голос
/ 16 марта 2012

Обычно это проблема с отображением, скрытием или изменением размера карты.

В Google Maps v3, я полагаю, вы можете вызвать google.maps.event.trigger(map, 'resize');, где map - ссылка на ваш объект Google Maps.

1 голос
/ 25 октября 2011

Расмус, я решил проблему здесь Div с Google Maps ...

Я вызвал функцию checkResize ();

Я взял переменные карты (которые "проверяют" мой DIV, в который загружена карта, и вызвал функцию:

maps.checkResize ();

Мне удалось помочь по этой ссылке: Карта Google загружает только половину себя

Марсело Марини

0 голосов
/ 27 апреля 2015

Вы должны использовать опцию autosizse. У меня была такая же проблема, и я решил ее.

Здесь код, когда вы открываете модальное и внутри него вызываете средство выбора местоположения. 

    $scope.map_picker = function(){
        $("#map_modal").modal('show');
        $('.us2').locationpicker({
            location: {latitude: 33.997215339647724, longitude: -81.02654766235355},
            radius: 300,
            inputBinding: {
                latitudeInput: $('.us2-lat'),
                longitudeInput: $('.us2-lon'),
                radiusInput: $('#us2-radius'),
                locationNameInput: $('#us2-address')
            }
        });

     **$('#map_modal').on('shown.bs.modal', function () {
            $('.us2').locationpicker('autosize');
        });**
}

Основная логика заключается в использовании этой строки: $ ( 'Us2 ') locationpicker (' авторазмер'). Но важно, как и где вы звоните по этой линии.

0 голосов
/ 06 ноября 2011

У меня была эта проблема, и я обнаружил, что в моем случае проблема заключалась в том, что я создавал div map_canvas с использованием javascript innerHTML.

В первый раз карта будет отображаться правильно, но во второй раз, когда я назову ее (хотя и другую карту), будет отображаться та же карта (неправильная карта), а в третий раз я вызову другую картуон будет отображаться только в верхнем левом углу.Это будет в верхнем углу для всех остальных звонков.

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

Надеюсь, это кому-нибудь поможет!

...