Неправильно отображены

Я создал простую карту с использованием API3. Однако элементы управления увеличением в левом верхнем углу выглядят "Squashed" - они не отображаются должным образом. Остальная часть карты в порядке. Странно то, что я использовал тот же метод, что и для предыдущих сайтов, где все работает хорошо.

Вот код:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var marker;
var markersArray=[];
var html;   //to create urls
var directionsVisible = new Boolean();
directionsVisible = false;

function initialize() {     
    directionsDisplay = new google.maps.DirectionsRenderer();
    var orchards = new google.maps.LatLng(52.512805,-2.76007);
    var myOptions = {
        zoom:14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: orchards,
        panControl: false
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    addMarker(orchards);
}

Пожалуйста, можете ли вы предположить, что неправильно?

Ответ 1

Проблема должна быть из-за универсального img { max-width: 100%; }

Попробуйте выполнить это в своем CSS

.gmnoprint img {
    max-width: none; 
}

Ответ 2

Изначально я сталкиваюсь с той же проблемой, затем позже понимаю

google.maps.event.addDomListener(окно, "загрузка", инициализация);

играют очень важную роль.

Я добавил его, и для меня это работает.

Оформить следующий код.

CSS-код

<style>
       #divmap {
         height: 300px;
         width:100%;
         margin: 10px;
         padding: 10px;

       }
       .gm-style img { max-width: none; }
       .gm-style label { width: auto; display: inline; }
</style>

Для JS

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>

<script>

      function initialize() {
       var mapOptions = {
         zoom: 5,
         center: new google.maps.LatLng(21,78),
         panControl:true,
         zoomControl:true,
         mapTypeControl:true,
         scaleControl:true,
         streetViewControl:true,
         overviewMapControl:true,
         rotateControl:true
       }
       var map = new google.maps.Map(document.getElementById("divmap"),
            mapOptions);
     }
     google.maps.event.addDomListener(window, 'load', initialize);
</script>

и final html

<div id="divmap"></div>

Ответ 3

если вы используете функцию сетки Dreamweaver, настроенная по умолчанию, должна выглядеть так:

img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

Попробуйте следующее:

object, embed, video {
    max-width: 100%;
}
#map_canvas img { max-width: none; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

просто замените код как есть.