Styling Google Maps InfoWindow

Question

I ve been attempting to style my Google Maps InfoWindow  but the documentation is very limited on this topic  How do you style an InfoWindow

User · Answer

You could use a css class too       hook   parent   parent   parent   siblings   addClass  class name      Good day

User · Answer

I have design google map infowindow with image  amp  some content as per below        map script  Just for infowindow html reference    for  i   0  i  lt  locations length  i           var latlng   new google maps LatLng locations i  1   locations i  2        marker   new google maps Marker           position  latlng          map  map          icon    lt  php echo plugins url   assets img map-pin png   ELEMENTOR ES  FILE        gt                var property img   locations i  6       title   locations i  0       price   locations i  3       bedrooms   locations i  4       type   locations i  5       listed on   locations i  7       prop url   locations i  8        content     lt div class  map info wrapper  gt  lt a href   prop url   gt  lt div class  img wrapper  gt  lt img src   property img   gt  lt  div gt          lt div class  property content wrap  gt          lt div class  property title  gt          lt span gt   title   lt  span gt          lt  div gt           lt div class  property price  gt          lt span gt   price   lt  span gt          lt  div gt           lt div class  property bed type  gt          lt span gt   bedrooms   lt  span gt          lt ul gt  lt li gt   type   lt  li gt  lt  ul gt          lt  div gt           lt div class  property listed date  gt          lt span gt Listed on   listed on   lt  span gt          lt  div gt          lt  div gt  lt  a gt  lt  div gt         google maps event addListener marker   click    function marker  content  i            return function                 infowindow setContent content               infowindow open map  marker                    marker  content  i           Most important thing is CSS     propertymap  gm-style-iw      box-shadow none      color  515151      font-family   Georgia    Open Sans   Sans-serif      text-align  center      width  100   important      border-radius  0      left  0  important      top  20px  important       propertymap  gm-style  gt  div  gt  div  gt  div  gt  div  gt  div  gt  div  gt  div       background  none important      gm-style  gt  div  gt  div  gt  div  gt  div  gt  div  gt  div  gt  div nth-child 2         box-shadow  none important      propertymap  gm-style-iw  gt  div  gt  div      background   FFF important       propertymap  gm-style-iw a      text-decoration  none       propertymap  gm-style-iw  gt  div      width  245px  important      propertymap  gm-style-iw  img wrapper       height  150px        overflow  hidden      width  100       text-align  center      margin  0px auto       propertymap  gm-style-iw  img wrapper  gt  img       width  100       height auto       propertymap  gm-style-iw  property content wrap       padding  0px 20px       propertymap  gm-style-iw  property title      min-height  auto

User · Answer

Google wrote some code to assist with this  Here are some examples  Example using InfoBubble  Styled markers and Info Window Custom  using OverlayView    The code in the links above take different routes to achieve similar results  The gist of it is that it is not easy to style InfoWindows directly  and it might be easier to use the additional InfoBubble class instead of InfoWindow  or to override GOverlay  Another option would be to modify the elements of the InfoWindow using javascript  or jQuery   like later ATOzTOA suggested    Possibly the simplest of these examples is using InfoBubble instead of InfoWindow  InfoBubble is available by importing this file  which you should host yourself   http   google-maps-utility-library-v3 googlecode com svn trunk infobubble src infobubble js  InfoBubble s Github project page   InfoBubble is very stylable  compared to InfoWindow    infoBubble   new InfoBubble         map  map        content    lt div class  mylabel  gt The label lt  div gt          position  new google maps LatLng -32 0  149 0         shadowStyle  1        padding  0        backgroundColor   rgb 57 57 57          borderRadius  5        arrowSize  10        borderWidth  1        borderColor    2c2c2c         disableAutoPan  true        hideCloseButton  true        arrowPosition  30        backgroundClassName   transparent         arrowStyle  2      infoBubble open      You can also call it with a given map and marker to open on   infoBubble open map  marker     As another example  the Info Window Custom example extends the GOverlay class from the Google Maps API and uses this as a base for creating a more flexible info window  It first creates the class      An InfoBox is like an info window  but it displays    under the marker  opens quicker  and has flexible styling      param  GLatLng  latlng Point to place bar at     param  Map  map The map on which to display this InfoBox      param  Object  opts Passes configuration options - content       offsetVertical  offsetHorizontal  className  height  width     function InfoBox opts      google maps OverlayView call this     this latlng    opts latlng    this map    opts map    this offsetVertical    -195    this offsetHorizontal    0    this height    165    this width    266     var me   this    this boundsChangedListener        google maps event addListener this map    bounds changed   function           return me panMap apply me                 Once the properties of this OverlayView are initialized  set its map so      that we can display it   This will trigger calls to panes changed and      draw    this setMap this map        after which it proceeds to override GOverlay   InfoBox prototype   new google maps OverlayView      You should then override the methods you need  createElement  draw  remove and panMap  It gets rather involved  but in theory you are just drawing a div on the map yourself now  instead of using a normal Info Window

User · Answer

I used the following code to apply some external CSS   boxText   document createElement  html    boxText innerHTML     lt head gt  lt link rel  stylesheet  href  style css   gt  lt  head gt  lt body gt  some html  lt body gt     infowindow setContent boxText   infowindow open map  marker

User · Answer

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    lt  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

User · Answer

You can modify the whole InfoWindow using jquery alone     var popup   new google maps InfoWindow       content   lt p id  hook  gt Hello World  lt  p gt         Here the  lt p gt  element will act as a hook into the actual InfoWindow  Once the domready fires  the element will become active and accessible using javascript jquery  like     hook   parent   parent   parent   parent     The below code just sets a 2 pixel border around the InfoWindow   google maps event addListener popup   domready   function         var l       hook   parent   parent   parent   siblings        for  var i   0  i  lt  l length  i              if   l i   css  z-index       auto                   l i   css  border-radius    16px 16px 16px 16px                  l i   css  border    2px solid red                          You can do anything like setting a new CSS class or just adding a new element   Play around with the elements to get what you need

User · Answer

Use the InfoBox plugin from the Google Maps Utility Library  It makes styling managing map pop-ups much easier   Note that you ll need to make sure it loads after the google maps API    lt script src  https   maps googleapis com maps api js key YOUR KEY amp callback initMap  async defer gt  lt  script gt   lt script src   js infobox packed js  async defer gt  lt  script gt

[css] Styling Google Maps InfoWindow

Examples related to css

Examples related to google-maps