Remove default info window in google map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Remove default info window in google map | |
google.maps.event.addListener(infowindow, 'domready', function() { | |
// Reference to the DIV that wraps the bottom of infowindow | |
var iwOuter = $('.gm-style-iw'); | |
/* Since this div is in a position prior to .gm-div style-iw. | |
* We use jQuery and create a iwBackground variable, | |
* and took advantage of the existing reference .gm-style-iw for the previous div with .prev(). | |
*/ | |
var iwBackground = iwOuter.prev(); | |
// Removes background shadow DIV | |
iwBackground.children(':nth-child(2)').css({'display' : 'none'}); | |
// Removes white background DIV | |
iwBackground.children(':nth-child(4)').css({'display' : 'none'}); | |
// Moves the infowindow 115px to the right. | |
iwOuter.parent().parent().css({left: '115px'}); | |
// Moves the shadow of the arrow 76px to the left margin. | |
iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 76px !important;'}); | |
// Moves the arrow 76px to the left margin. | |
iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'}); | |
// Changes the desired tail shadow color. | |
iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'}); | |
// Reference to the div that groups the close button elements. | |
var iwCloseBtn = iwOuter.next(); | |
// Apply the desired effect to the close button | |
iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'}); | |
// If the content of infowindow not exceed the set maximum height, then the gradient is removed. | |
if($('.iw-content').height() < 140){ | |
$('.iw-bottom-gradient').css({display: 'none'}); | |
} | |
// The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value. | |
iwCloseBtn.mouseout(function(){ | |
$(this).css({opacity: '1'}); | |
}); | |
}); | |
//CSS put in stylesheet | |
.gm-style-iw { | |
background-color: rgb(237, 28, 36); | |
border: 1px solid rgba(72, 181, 233, 0.6); | |
border-radius: 10px; | |
box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6); | |
color: rgb(255, 255, 255) !important; | |
font-family: gothambook; | |
text-align: center; | |
top: 15px !important; | |
width: 150px !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment