CODEWITHSUNDEEP
javascriptgoogle-mapsmeteor
Drag0
Drag0

Reputation: 8928

InfoWindow closing icon not showing in Google Map

I use this code to create marker and infowindow that shows after clicking on a marker:

// latLng and map are created earlier in code
 var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });

// contentString is just a string with content also created earlier
google.maps.event.addListener(marker, 'click', function(){
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

This code produces everything good except one thing, it doesn't show closing icon in upper right corner of info window.

enter image description here

Anyone knows what could be the problem?

I'm using meteor.js if it makes any difference

This is how I create the InfoWindow:

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

Upvotes: 10

Views: 8361

Answers (4)

Debbie Kurth
Debbie Kurth

Reputation: 481

This may be a little late, however for those who are looking for answers. The solution is a CSS override. Look for in your CSS settings the following css values:

.gm-ui-hover-effect{
    top: -27px !important;
    right: -3px !important;
    background: #ddd !important;
    border: 1px solid #000 !important;
    border-radius: 50%;
    width: 30px !important;
    height: 30px !important;
    opacity: 1;}
.gm-ui-hover-effect img{margin: -8px 6px !important;
    width: 16px !important;
    height: 16px !important;}
   .gm-style .gm-style-iw {
    width: 282px !important;
    left: 0px !important;
    padding-left: 10px;
}

Using these overrides, was able to successfully have the button appear (remove the top and right values) but was also able to format what type of close button I would like to use. Your CSS values may be different, based on the theme or other plugin installed on your system. But the .gm_ui_hover-effect and .gm-ui-hover-effect are the key.

A clue to the solution was found here: https://codepen.io/Marnoto/pen/xboPmG

Combined with using the "inspect" option in Chrome.

Upvotes: 0

Gordon
Gordon

Reputation: 119

Depending on other css styling you may need to add the !important override...

img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
max-width: none !important;
}

Upvotes: 6

Krishna Vedula
Krishna Vedula

Reputation: 1791

I had the same problem. In my case, the infowindow does not show the pointer to the marker. There are some weird looking images in the infowindow as well.

Apparently this has to do with the stylesheet from bootstrap conflicting with google. The following is a much more specific CSS rather than overriding the general CSS

/** FIX for Bootstrap and Google Maps Info window styes problem **/
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
max-width: none;
}

Upvotes: 12

Drag0
Drag0

Reputation: 8928

Here is the solution for the problem... It seems google maps have some fun way of dealing with images and there was a problem with css as we thought. So the solution is just to add this to your css file:

img 
{
    max-width: none;
}

That's it, enjoy.

Upvotes: 35

Related Questions