Map zoom controls not displaying correctly

Question

I have created a simple map using API3. However, the zoom controls on the top left look "Squashed" - a they are not displaying properly. The rest of the map is fine. The weird thing is that I have used the same method as for previous sites, where things work well.

Here's some code:

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);
}

Mo. · Accepted Answer · 2013-09-15T15:59:16.173

178

The issue should be because of universal img { max-width: 100%; }

Try this one in to your css

.gmnoprint img {
    max-width: none; 
}

edited Sep 15 '13 at 15:59

answered Sep 10 '13 at 15:42

Mo.

26,306
36
159
225

2

Thanks, I would have never thought it was my css – Ayoub Jul 03 '14 at 09:24
Also you can check this answer, https://stackoverflow.com/questions/9663375/google-map-infowindow-not-showing-properly/50679179#50679179 – Kiran Jun 04 '18 at 11:10

score 8 · Answer 2 · edited Jul 13 '15 at 08:10

Initially I face same problem, then later on I realize

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

play very important role.

I added it and for me it works.

Checkout following code.

CSS code

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

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

For 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>

and final html

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

score 2 · Answer 3 · answered Dec 28 '13 at 10:38

if you are using the Dreamweaver fluid grid feature your default set up should look like this:

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

Try this:

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%;
}

just replace the code as it is.

Map zoom controls not displaying correctly

3 Answers3

Linked