CODEWITHSUNDEEP
htmlcssgoogle-maps
user778930
user778930

Reputation: 87

Google Map v3 InfoBox and closeBox

I currently have a customised infoBox and I set properties using JScript

var infoBoxOptions =  {
    content: infoContent
    ,disableAutoPan: false
    ,maxWidth: 0
    ,pixelOffset: new google.maps.Size(-140, 0)
    ,zIndex: null
    ,boxStyle: {
      background: "url('/files/0/11/tipbox.gif') no-repeat"
      ,width: "255px"
      ,padding:"9px"
     }        
    ,closeBoxURL: "/files/0/11/icon-close.gif"
    ,infoBoxClearance: new google.maps.Size(1, 1)
    ,isHidden: false
    ,pane: "floatPane"
    ,enableEventPropagation: false
  };

when I check HTML the BoxClose image is as follows 

<img align="right" style=" position: relative; cursor: pointer; margin: 2px;" src="/files/0/11/icon-close.gif">

How can I set the position to absolute and give top and right properties to the close button?

Upvotes: 1

Views: 8172

Answers (2)

Tabetha Moe
Tabetha Moe

Reputation: 480

As of this posting, the closeBoxMargin doesn't seem to do anything. I worked around this issue by using this...

.infoBox img {
    top:15px;
}

The margin doesn't seem to work anymore. Hope this helps someone.

To only do the close box add the > selector.

.infoBox > img {
    margin: 36px 10px 2px 2px !important;
}

Upvotes: 2

Aaron Miler
Aaron Miler

Reputation: 889

There is a property called Close Box Margin, this allows you to position the close box with CSS margins. I don't think it adds a position of absolute, but it will allow you to move the close box freely.

//Setting the options for the information window
var infoBoxOptions = {
    closeBoxURL: "/Content/images/TempImages/close.png",
    closeBoxMargin: "-10px -60px 10px 10px"
}

This helped me position my close box exactly where I needed it.

Upvotes: 1

Related Questions