43

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);
}
Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
maxelcat
  • 1,333
  • 2
  • 18
  • 31

3 Answers3

178

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

Try this one in to your css

.gmnoprint img {
    max-width: none; 
}
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
8

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>
user247702
  • 23,641
  • 15
  • 110
  • 157
Mahesh Shitole
  • 762
  • 1
  • 6
  • 15
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.

user3141435
  • 21
  • 1