CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
Soroush Hakami
Soroush Hakami

Reputation: 5406

Crazy looking Google Maps Infowindow

I don't really know how to explain this, the image pretty much speaks for itself. Looks the same on Chrome, Firefox and Internet Explorer.

I'm using jQuery Mobile, could that have anything to do with it?

enter image description here

My code, using Google Maps API V3.

var myOptions = {
        center:new google.maps.LatLng(59.3474845, 18.0621677),
        zoom:15,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"),
        myOptions);

    var marker = new google.maps.Marker({
        map:map,
        position:myOptions.center
    });

    var infowindow = new google.maps.InfoWindow({
        content: '<p>boooyah</p>'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });

My css:

#map { height: 300px; width: 300px; }

Upvotes: 2

Views: 683

Answers (3)

Mo.
Mo.

Reputation: 27503

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

Try this one in to your css

.gmnoprint img {
    max-width: none; 
}

Upvotes: 0

dfunkydog
dfunkydog

Reputation: 11

Had this problem recently.

It's caused by img{max-width:XXX} in css. Don't know why, but removing max-width from css will fix the rendering.

Upvotes: 1

Oliver
Oliver

Reputation: 11617

The info window 'speech bubble' effect is created by google's API using a sequence of div elements. You may be breaking this with css - try turning off styles on your page and see if it still happens.

Upvotes: 0

Related Questions