Google Maps Navigation buttons bug

Question

I am trying to fix this random bug that I'm facing while embedding Google Maps in my website. Everything is working out fine except for the part where the navigation buttons are all out of place/broken-up.

Here's a screenshot below to explain what I'm talking about (highlighted in red)

Bug

By right, it should appear like this:

Proper

I don't know how to go about fixing this of if anyone has faced the same problem before, I would appreciate some help on this.

Here's the code:

function initialize() {
                var latlng = new google.maps.LatLng(57.0442, 9.9116);
                var mapOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeControl: true,
                    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR},
                    navigationControl: true,
                    navigationControlOptions: {style: google.maps.NavigationControlStyle.LARGE},
                    mapTypeId: google.maps.MapTypeId.ROADMAP};
 
    var map = new google.maps.Map(document.getElementById("location-canvas"), mapOptions);

    var contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
                    '<div id="bodyContent">'+
                    '<p id="maps">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
                    '</div>'+
                    '</div>';

    var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });


                var companyImage = new google.maps.MarkerImage('img/maps/logo.png',
                    new google.maps.Size(100,50),
                    new google.maps.Point(0,0),
                    new google.maps.Point(50,50)
                );

                var companyShadow = new google.maps.MarkerImage('img/maps/logo_shadow.png',
                    new google.maps.Size(130,50),
                    new google.maps.Point(0,0),
                    new google.maps.Point(65, 50));

                var companyPos = new google.maps.LatLng(57.0442, 9.9116);

                var companyMarker = new google.maps.Marker({
                    position: companyPos,
                    map: map,
                    icon: companyImage,
                    shadow: companyShadow,
                    title:"Høgenhaug",
                    zIndex: 3});

                        
google.maps.event.addDomListener(window, 'resize', initialize);
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(companyMarker, 'click', function() {
                    infowindow.open(map,companyMarker);
                });

}

Thanks

You are using something that styles the ``'s, like bootstrap for example. — davidkonrad, Mar 25 '14 at 13:48

score 1 · Accepted Answer · answered Mar 25 '14 at 13:44

1

I had this with my maps at one point. Try adding this to your CSS:

#location-canvas img {
  max-width: none;
}

answered Mar 25 '14 at 13:44

Andy

61,948
13
68
95

Wow, it worked! Was it some kind of override declaration to override the maps `img` element. I didn't even notice that it was an image. – Jeiman Mar 25 '14 at 13:49
2

Yeah, if you have a look at the comments in that duplicate I posted you'll see what's going on. – Andy Mar 25 '14 at 13:50

Google Maps Navigation buttons bug

1 Answers1