51

I've tried many of the examples from the google maps reference and from other stackoverflow questions, but I haven't been able to get custom styles on my infowindow.

I am using something very similar to what was done in this other stackoverflow answer

Here it is working/editable: http://jsfiddle.net/3VMPL/

In particular, I would like to have square corners instead of the rounded.

Community
  • 1
  • 1
CloudMagick
  • 2,428
  • 2
  • 23
  • 20

4 Answers4

117

Update: Refer to this answer for the state of the infobox source code migration to github.

How about using the Infobox plugin rather than using the usual Infowindow? I put up a complete example in a jsfiddle example here. The main thing about the infobox is that you can create your infobox within your page's html, giving you complete control over how it looks using css (and some javascript options, if necessary). Here's the html for the infobox:

<div class="infobox-wrapper">
    <div id="infobox1">
        Infobox is very easy to customize because, well, it's your code
    </div>
</div>

The idea here is the "infobox-wrapper" div will be hidden (i.e., display:none in your css) and then in your javascript you will initialize an Infobox object and give it a reference to your "infobox" (inside the hidden wrapper) like so:

infobox = new InfoBox({
    content: document.getElementById("infobox1"),
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
                background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                opacity: 0.75,
                width: "280px"
        },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
});

This is just an example of some of the available options. The only required key is content - the reference to the infobox.

And to open the info window:

google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
    map.panTo(loc);
});

And to further demonstrate the flexibility of the InfoBox, this jsfiddle has an image with a css transition as the "info box".

And one final tip: Don't use the class "infobox" in your html. It is rather unfortunately used by the plugin when the infobox is actually generated.

Community
  • 1
  • 1
uɥƃnɐʌuop
  • 14,022
  • 5
  • 58
  • 61
  • 4
    How would you scale this to multiple markers with different InfoBoxes? – Eric K Apr 23 '13 at 18:58
  • As far as making this code scale with multiple markers, I would most likely start by putting this code into a [factory function](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#factorypatternjavascript). – uɥƃnɐʌuop Dec 14 '13 at 19:05
  • Why do you suggest not to use the class `infoBox`? – hugo der hungrige Jan 30 '14 at 23:33
  • 1
    Because it gets used by the InfoBox plugin code. When your info box gets initialized, the InfoBox plugin wraps your html with its own divs and whatnot, and it uses the class `infobox`. This can cause some unexpected css errors, as that can cause collisions between your css classes and the InfoBox's. – uɥƃnɐʌuop Jan 30 '14 at 23:58
  • This doesn't work. I replaced my current working InfoWindow with this and added infobox.js as needed, but it only gives me error Uncaught TypeError: infobox.open is not a function. – Nebular Dust Dec 14 '15 at 04:07
  • I just made it work by removing my google maps api key from the link. It's weird, but public api does the job, and private does not. – Nebular Dust Dec 14 '15 at 05:27
29

If you can't use infobox and need to customise the infowindow you can access it using css. It's not pretty, relies heavily on first:child/last:child psuedo selectors and obviously on whether google ever decides to change their map html structure.

Hopefully the below css can help someone else out in a bind when they're forced to deal with infowindow.

/* white background and box outline */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div
{
    /* we have to use !important because we are overwritng inline styles */
    background-color: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
}

/* arrow colour */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div > div > div
{
    background-color: #003366 !important; 
}

/* close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child
{
    margin-right: 5px;
    margin-top: 5px;
}

/* image icon inside close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child > img
{
    display: none;
}

/* positioning of infowindow */
.gm-style-iw
{
    top: 22px !important;
    left: 22px !important;
}
giftlistmonkey
  • 324
  • 3
  • 3
  • is there a way to adjust these class names dynamically in javascript. There are long class names because of including parent-child relations. I do not know how to access these DOM elements and give a style in javascript such as; $(".gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div").css({"border-color":"red"}); - DOES NOT WORK! – séan35 Dec 08 '14 at 14:11
  • wow dude , i was looking for this 5 hour straight , specially that first selector , i was looking for some javascript solution , thanks man , saved me – Synxmax Aug 08 '15 at 16:19
  • Wow. Haha. That's a heck of a CSS selector hierarchy, but it works :-) Thanks! – blizzrdof77 Oct 11 '16 at 21:12
  • Thank you, it just works! I've posted SCSS version of your styles – Ivan Proskuryakov Nov 30 '16 at 16:22
1

I wanted to have a transparent contact form popup on google map marker click. I made it finally with the help of infobox plugin and this post. That's what I made.

Anyone can download and use the source from here

Abu Shumon
  • 1,834
  • 22
  • 36
  • 3
    Please don't add "thank you" as an answer. Instead, vote up the answers that you find helpful. – Paulo Freitas May 18 '14 at 19:02
  • @PauloFreitas good point!actually i was trying to add that in the comment but couldn't make it due to insufficient reputation. but thank you.won't do next time. – Abu Shumon May 19 '14 at 21:20
1

You can style the infoWindow by styling the .gm-style-iw class. 

  #map-canvas {
    .gm-style {
      > div:first-child > div + div > div:last-child > div > div {
        &:first-child > div,
        &:first-child > div > div > div,
        &:last-child,
        &:last-child > img {
          display: none !important;
        }
      }
      .gm-style-iw {
        top: 20px !important;
        left: 130px !important;
        background: #fff;
        padding: 10px;
        height: 40px;
      }
    }
  }
Nick
  • 3,231
  • 2
  • 28
  • 50
Ivan Proskuryakov
  • 1,625
  • 2
  • 23
  • 32