Map zoom controls not displaying correctly [duplicate]

Answer 1

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

Try this one in to your css

.gmnoprint img {
    max-width: none; 
}

Answer 2

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.

Answer 3

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>