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

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

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

    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.

28
google-maps google-maps-api-3 infowindow

5 ответов

проблема вынуждена этим форматом внутри стиля.css:

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

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

#map_canvas img{max-width:none}
96

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

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

.gmnoprint img {
    max-width: none; 
}
1

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

0

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

.gmnoprint img {
    max-height: none;  
}

вместо max-width.

спасибо

0

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