Google Map Javascript API : Infowindow Customisations

Google map has a default infowindow which is not so much interactive and attraction seeking. You can customise your infowindow by using domready event listner of infowindow.

//Customize Infowindow

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

//Call domready event of infowindow
google.maps.event.addListener(infowindow_marker, ‘domready’, function() {

// Select the .gm-style-iw div, its the main div from where infowindow html starts
var wpgmp_iwOuter = $(‘.gm-style-iw’);

//Now you can customise your infowindow in every manner you want.

wpgmp_iwOuter.parent().css({
‘width’: ‘0px’,
‘height’: ‘0px’
});

// To remove close button of infowindow
var wpgmp_iwCloseBtn = wpgmp_iwOuter.next();
wpgmp_iwCloseBtn.css(‘display’, ‘none’);

var wpgmp_iwBackground = wpgmp_iwOuter.prev();

wpgmp_iwBackground.children(‘:nth-child(2)’).css({
‘display’: ‘none’
});
//To change background color of infowindow
wpgmp_iwBackground.children(‘:nth-child(3)’).css({
‘background-color’: ‘#000;’,
});

wpgmp_iwBackground.children(‘:nth-child(4)’).css({
‘display’: ‘none’
});

});

Thus, using smiple domready event of infowindow, you can customize your google map’s default infowindow in any manner as you like.

Leave a Reply