CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-markers
John Brunner
John Brunner

Reputation: 2872

Google Maps is showing some misbehavior

I'v managed to implement the Google Maps Api which shows multiple marker, but the Maps Div is always showing some misbehavior like in the picture below (shadow is incorrect, there is a wave (?!) under the "vienna" title, and on the left side the control-buttons are missing).

Google Maps Misbehavior

I'm using chrome on mac, has restarted my mac a few times, and it is reproducible on firefox and safari.

My code looks like:

<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3&sensor=false"></script>
</head>

<div id="map" style="width:500px;height:500px;"></div>

<script type="text/javascript"> 
                    var locations = [
                      ['Vienna',48.2144203,16.383573,1]
                      ['Test',48.53234,16.32367,2]
                    ];

                    var map = new google.maps.Map(document.getElementById('map'), {
                      zoom: 13,
                      center: new google.maps.LatLng(48.2144203,16.383573),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    });

                    var infowindow = new google.maps.InfoWindow();

                    var marker, i;

                    for (i = 0; i < locations.length; i++) {  
                      marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map
                      });

                      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                          infowindow.setContent(locations[i][0]);
                          infowindow.open(map, marker);
                        }
                      })(marker, i));
                    }
</script>

Upvotes: 0

Views: 631

Answers (1)

Ahmed Hossny
Ahmed Hossny

Reputation: 11

this problem commonly comes from bootstrap. just add inline style in your gmaps page with max-width:none; and it will be fixed. 

<style>
       img {max-width: none !important;}
</style>

Upvotes: 1

Related Questions