Google map inside the spry collapsible panel

[Simon.Dau]

So this time I've bumped into interesting 'bug'. I've placed the google map inside the spry collapsible panel. Panel is set to the closed mode on load of page. When I open the tab, map appears, but address marker is hidden behind the top left corner. If I place the same map outside the collapsiple panel it renders all well.

So my  question is whether there is any way around this issue. When I know where the marker is hidden I can simply move the map and see it, but customer who's not aware of the problem will see only blank map with not marked address which is not acceptable.

cheers,

Simon

[Adam Cameron.]

Can you knock together a simple, stand-alone, self-contained bit of code that demonstrates this?

--

Adam

[Simon.Dau]

Sure mate. Here you go:

<div id="CollapsiblePanel1" class="CollapsiblePanel">
              <div class="CollapsiblePanelTab" tabindex="0">SHOW MAP</div>
              <div class="CollapsiblePanelContent">
              <cfmap  width="242" height="200" zoomlevel="12" name="mainMap" markercolor="333444" showscale="false"
typecontrol="none"  showcentermarker="true" centeraddress="#get_event.event_address1#, #get_event.event_address2#, #get_event.event_city#,#get_event.event_county#, #get_event.event_postcode#, #get_event.event_country#  "
></cfmap>
              </div>
            </div>

And this bit goes at the bottom of the code :

<script type="text/javascript">

var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
  </script>

And that would be the preview that I get once the panel is open:

And that is the preview of how it should look:

As you can see the map marker sticks to the top left corner. I was wondering whether there is any way to re-focus it once the panel is open.

cheers,
Simon

[Adam Cameron.]

Um for future reference "stand-alone" and "self-contained" kind of imply that the code will just run without any adjustment if just copy and pasted into a file.  Your code snippet requires some additional data to exist: as it stands it just errors.

--

Adam

[Adam Cameron.]

OK, with some faffing about (including D/Ling Spry and working out "WTF?"), I am indeed seeing what you're seeing.  And on all of Firefox, IE, Chrome, Safari & Opera.  So it's safe to say it's a logic glitch not a JS-rendering glitch.

I've also simplified your test case to factor out Spry completely, using just a div with visibility set to none, which is subsequently activated, and the same thing happens.

So it's nowt to do with Spry, it's bungness with <cfmap>:

<script>
    function show(){
        o = document.getElementById("map");
        o.style.display = "block";
        return false;
    }
</script>

<div id="map" style="display:none">
    <cfmap    zoomlevel        = "12"
            name            = "mainMap"
            showcentermarker= "true"
            centeraddress    = "10 downing street london"
    />
</div>
<a href="##" onclick="return show()">Click me</a>

I dunno what to suggest... maybe look at the Google Map API and see if there's a way you can shimmy the map around?

Maybe check out the source of what CF renders for the map display, work out what it's doing wrong, and call the map-render code by hand?

You should probably raise a bug with Adobe, too... http://cfbugs.adobe.com/cfbugreport/flexbugui/cfbugtracker/main.html#

--

Adam

[Simon.Dau]

Thanks Cameron, and sorry for the code. I'll probably just report the bug to Adobe.

[Adam Cameron.]

I raised a bug (http://cfbugs.adobe.com/cfbugreport/flexbugui/cfbugtracker/main.html#bugId=82145) related to this - but not quite the same - yesterday, and I got an email back today saying it had been fixed.

Cool.

So now would seem a good time to raise bugs relating to <cfmap>, I would say...

--

Adam