地图缩放控件无法正确显示

Question

我使用API​​3创建了一个简单的地图.但是,左上角的缩放控件显示为"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);
}

Answer 1

问题应该是因为普遍存在 img { max-width: 100%; }

试试这个你的css

.gmnoprint img {
    max-width: none; 
}

Answer 2

最初我面临同样的问题,然后我意识到

google.maps.event.addDomListener(window,'load',initialize);

发挥非常重要的作用.

我加了它,对我来说它有效.

结帐以下代码.

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>

和最后的HTML

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