Искаженное отображение Google Maps

Question

Что не так с моей картой? Перейдите по адресу gtob.openfile.ch/mitglieder, нажмите «A-Z», затем «Screenbox Multimedia Ltd.». Наконец нажмите на кнопку «Показать карту», ​​после чего та же карта отобразится в трех делениях. В среднем div карта искажена, и я не могу понять, почему ... (Адаптивный дизайн сейчас не закончен, пожалуйста, покажите его с шириной экрана не менее 1200 пикселей)

Хорошо, вот JavaScript / JQuery для построения карты:

var memberGoogleMapsData             = new Object;
memberGoogleMapsData.mapContainer    = $(this).closest('div').find('div.memberMap');
$(this).closest('div').find('button').on('click', function() {
    memberGoogleMapsData.mapsPosLat     = parseFloat(memberGoogleMapsData.mapContainer.data('mapsposlat'));
    memberGoogleMapsData.mapsPosLng     = parseFloat(memberGoogleMapsData.mapContainer.data('mapsposlong'));
    memberGoogleMapsData.mapsZoom         = parseInt(memberGoogleMapsData.mapContainer.data('mapszoom'));
    memberGoogleMapsData.markerPosLat     = parseFloat(memberGoogleMapsData.mapContainer.data('markerposlat'));
    memberGoogleMapsData.markerPosLng    = parseFloat(memberGoogleMapsData.mapContainer.data('markerposlng'));
    memberGoogleMapsData.mapId            = memberGoogleMapsData.mapContainer.prop('id');

    memberGoogleMapsData.mapPos = new google.maps.LatLng(memberGoogleMapsData.mapsPosLat, memberGoogleMapsData.mapsPosLng);
    memberGoogleMapsData.options = {
            zoom:       memberGoogleMapsData.mapsZoom,
            center:     memberGoogleMapsData.mapPos,
            mapTypeId:  google.maps.MapTypeId.HYBRID,
            tilt:       0,
            heading:    0
    };

    memberGoogleMapsData.myMap = new google.maps.Map(document.getElementById(memberGoogleMapsData.mapId),memberGoogleMapsData.options);
    memberGoogleMapsData.myMap2 = new google.maps.Map(document.getElementById('testMap'),memberGoogleMapsData.options);
    memberGoogleMapsData.myMap3 = new google.maps.Map(document.getElementById('testMap2'),memberGoogleMapsData.options);
});

В div.memberMap у меня есть теги данных для предоставления необходимых данных для построения карты Google:

<div class="memberMap" id="memberMap207" data-mapsposlat="47.50467769999999" data-mapsposlong="9.39942510000003" data-mapszoom="13" data-markerposlat="47.50467769999999" data-markerposlng="9.39942510000003">

Answer 1

У вас есть следующий стиль в файле customer.css

#members div.members img {
    float: right;
    max-width: 300px;
    max-height: 150px;
}

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

Этот стиль не влияет на вторую карту вне div.members.

Надеюсь, это поможет!