Информационное окно карты Google не отображается должным образом

Информационное окно неправильно отображается на моей карте при нажатии на маркер. Сайт здесь.

Вы также заметите, что элемент управления картой также не отображается должным образом.

    var map;
    var locations = <?php print json_encode(di_get_locations()); ?>;
    var markers = []
    jQuery(function($){
        var options = {
            center: new google.maps.LatLng(51.840639771473, 5.8587418730469),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), options);

        for (var i=0; i < locations.length;i++) {
            makeMarker(locations[i]);
        }
        centerMap();

    });
    function makeMarker(location) {
        var markerOptions = {map: map, position: new google.maps.LatLng(location.lat, location.lng)};
        var marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
        var content = '';

        var infowindow = new google.maps.InfoWindow(
          { content: "test",
            size: new google.maps.Size(50,50),
            disableAutoPan : true
          });


        google.maps.event.addListener(marker, 'click', function(e) {
            infowindow.open(map,marker);
        });
    }
    function centerMap() {
      map.setCenter(markers[markers.length-1].getPosition());
    }

Примечание. Я использую Google Maps JS V3.


google-maps google-maps-api-3 infowindow
person Jjj    schedule 12.03.2012    source источник
comment
Ссылка на ваш сайт больше не существует, поэтому непонятно, с какой проблемой вы столкнулись. Ваш вопрос в его нынешнем виде вряд ли поможет кому-либо в будущем.   -  person Simon East    schedule 15.08.2014
comment
Это также может быть проблема, аналогичная описанной здесь: stackoverflow.com/questions/1554893/   -  person Simon East    schedule 15.08.2014

Ответы (6)


arrow_upward
96
arrow_downward

Проблема вызвана этим форматом внутри style.css:

img {
    height: auto;
    max-width: 100%;/* <--the problem occurs here*/
}

Добавьте это в конец вашего style.css, чтобы применить значение по умолчанию для изображений внутри карты:

#map_canvas img{max-width:none}
person Dr.Molle    schedule 12.03.2012
comment
Это решило и для меня. Если кто-то хочет знать, как это выглядит, см. i.stack.imgur.com/Bl8ci.png - person Soroush Hakami; 20.03.2012
comment
Это было довольно очевидно, но это сэкономило мне много времени. Спасибо друг. - person Jk_; 24.12.2012
comment
OMG, спасибо! В моем случае на управление масштабированием повлияло отображение mao внутри модального окна Bootstrap .... - person Jan Langer; 12.04.2013
comment
Спасибо, исправил и у меня. - person CHarris; 02.07.2013
comment
Работает как шарм! (+1) - person Tom; 27.09.2013

arrow_upward
1
arrow_downward

Проблема может заключаться в том, что вы используете img{ max-width: 100%; } как универсальный.

Попробуйте это в свой CSS

.gmnoprint img {
    max-width: none; 
}
person Mo.    schedule 25.02.2014
comment
Зачем публиковать то же самое, что и принятый ответ, более чем через год? - person 0x1gene; 10.03.2015
comment
@ 0x1gene причина, по которой img{max-width:100%} будет влиять на другие свойства css проекта. При этом .gmnoprint img:{max-width: none; } не повлияет ни на какие свойства. - person Mo.; 11.03.2015

arrow_upward
0
arrow_downward

В случае Magento элементы управления масштабированием карты Google не отображались из-за конфликта с библиотекой PROTOTYPE.

person Paktas    schedule 02.10.2014

arrow_upward
0
arrow_downward

Решил проблему с помощью:

.gmnoprint img {
    max-height: none;  
}

вместо max-width.

Спасибо

person Vlad    schedule 22.08.2017

arrow_upward
0
arrow_downward

Я пробовал большинство ответов в Интернете, но они бесполезны (не работают), я добавил настраиваемый css, и видны элементы управления масштабированием карты, а также включить щелчок маркера. Этот ответ также полезен для этого вопроса


    .gmnoprint{
        display: block !important
    }
    .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
        display: block !important;
    }
    .gm-tilt {
        display: none;
    }
    .gm-iv-address{
        height: 56px;
    }
person Kiran    schedule 04.06.2018

arrow_upward
0
arrow_downward

Я тоже связал это с проблемой CSS. В моем случае у нас была библиотека, устанавливающая все div в положение: относительное. Вернувшись к исходному состоянию, мы вернули элементы управления на место.

.gm-style div {
    position:initial;
}
person efru    schedule 30.10.2020