Map zoom controls not displaying correctly [duplicate] - google-maps-api-3

Question

This question already has answers here:
Google Map Infowindow not showing properly
(6 answers)
Closed 8 years ago.
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);
}

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

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>

Answer 3

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.