Google Map Infowindow не отображается должным образом

Question

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

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

    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.

Answer 1

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

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

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

#map_canvas img{max-width:none}

Answer 2

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

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

.gmnoprint img {
    max-width: none; 
}

Answer 3

Я перепробовал большинство интернет-ответов, но они бесполезны (не работают), я добавил пользовательские 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;
    }

Answer 4

Я решил проблему с:

.gmnoprint img {
    max-height: none;  
}

вместо max-width.

Спасибо

Answer 5

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