Google Map Infowindow not showing properly

Question

The infowindow is not showing properly on my map when clicking on a marker. The website is here.

You'll also notice the map control isn't properly displayed either.

    var map;
    var locations = <?php print json_encode(di_get_locations()); ?>;
    var markers = []
    jQuery(function($){
        var options = {
            center: new google.maps.LatLng(51.840639771473, 5.8587418730469),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), options);

        for (var i=0; i < locations.length;i++) {
            makeMarker(locations[i]);
        }
        centerMap();

    });
    function makeMarker(location) {
        var markerOptions = {map: map, position: new google.maps.LatLng(location.lat, location.lng)};
        var marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
        var content = '';

        var infowindow = new google.maps.InfoWindow(
          { content: "test",
            size: new google.maps.Size(50,50),
            disableAutoPan : true
          });


        google.maps.event.addListener(marker, 'click', function(e) {
            infowindow.open(map,marker);
        });
    }
    function centerMap() {
      map.setCenter(markers[markers.length-1].getPosition());
    }

Note: I'm using Google Maps JS V3.

There's no longer a link to your website and so it's unclear what problem you're having. Your question as it stands is unlikely to help any users in future. — Simon East, Aug 15 '14 at 01:08
It may also be a similar problem to the one described here: http://stackoverflow.com/questions/1554893/google-maps-api-v3-infowindow-not-sizing-correctly — Simon East, Aug 15 '14 at 01:08

Dr.Molle · Accepted Answer · 2014-11-24T00:40:29.503

96

The issue is forced by this format inside style.css:

img {
    height: auto;
    max-width: 100%;/* <--the problem occurs here*/
}

Add this to the end of your style.css to apply the default-value for images inside the map:

#map_canvas img{max-width:none}

edited Nov 24 '14 at 00:40

answered Mar 12 '12 at 09:30

Dr.Molle

116,463
16
195
201

1

This solved it for me too. If anyone wants to know what it looks like, see http://i.stack.imgur.com/Bl8ci.png – Soroush Hakami Mar 20 '12 at 12:16
1

It was pretty obvious but it saves me a lof of time. Thanks mate. – Nypam Dec 24 '12 at 12:04
5

OMG, thanks! In my case, zoom control was affected by displaying the mao inside Bootstrap Modal window.... – Jan Langer Apr 12 '13 at 19:31

score 1 · Answer 2 · answered Feb 25 '14 at 17:00

1

The issue can be you are using img{ max-width: 100%; } as universal.

Try this one in to your css

.gmnoprint img {
    max-width: none; 
}

answered Feb 25 '14 at 17:00

Mo.

26,306
36
159
225

1

Why posting the same thing as the accepted answer more than 1 year later ? – 0x1gene Mar 10 '15 at 20:43
@0x1gene the reason why `img{max-width:100%}` will effect other css properties of the project. At the same time `.gmnoprint img:{max-width: none; }` is not gonna effect any properties. – Mo. Mar 11 '15 at 15:46

score 0 · Answer 3 · answered Oct 02 '14 at 12:40

0

In Magento case google map zoom controls were not displaying because of conflict with PROTOTYPE library.

answered Oct 02 '14 at 12:40

Paktas

312
3
10

score 0 · Answer 4 · answered Aug 22 '17 at 17:12

0

I solved the problem with :

.gmnoprint img {
    max-height: none;  
}

instead of max-width.

Thanks

answered Aug 22 '17 at 17:12

Vlad

1

score 0 · Answer 5 · answered Jun 04 '18 at 11:08

I had tried most of internet answers but that are not useful (not working), I had added custom css and map zoom control are visible also enable marker click. This answer also useful for this question


    .gmnoprint{
        display: block !important
    }
    .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
        display: block !important;
    }
    .gm-tilt {
        display: none;
    }
    .gm-iv-address{
        height: 56px;
    }

score 0 · Answer 6 · answered Oct 30 '20 at 07:47

0

I too tracked this down to a CSS issue. In my case we had a library setting all div's to position:relative. Setting back to initial popped our controls back in place.

.gm-style div {
    position:initial;
}

answered Oct 30 '20 at 07:47

efru

1,401
3
17
20

Google Map Infowindow not showing properly

6 Answers6

Linked

Related