Question

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?

Answer 1

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.