Just looking for how to move my auto-drawn (non-custom) map to the right side, instead of on top.

There was a thread a while ago working on moving the map and image panes to the sidebar. I think there's working code somewhere in that thread, which you can adapt to do what you want.

Adding graphics in a specific location (GUI).....

http://textadventures.co.uk/forum/samples/topic/q5zedoe560au_ii73oamoq/adding-graphics-in-a-specific-location-gui-solved

Okay, I found the code. I just need to know how to place it under the compass. Also, anyway to keep the zoom in/out ability for the player?

JS.eval ("$('<h3 id=\"mapLabel\" class=\"ui-accordion-header ui-helper-reset ui-state-active ui-corner-top\"><span class=\"ui-icon ui-icon-triangle-1-s\"></span><span class=\"accordion-header-text\">Map</span></h3><div id=\"mapAccordion\" class=\"ui-accordion-content-active ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom\"></div>').insertBefore(\"#inventoryLabel\");$('#gridPanel').hide();$('#gamePanelSpacer').height('0');var size = $(\"#mapAccordion\").innerWidth();$('#gridCanvas').width(size).height(size).appendTo($('#mapAccordion'));paper.view.viewSize.width = size;paper.view.viewSize.height = size;$(\"#gridPanel\").hide();$(\"#mapLabel\").bind(\"click\", $._data($(\"#inventoryLabel\")[0]).events['click'][0]['handler']);$(\"#mapLabel\").bind(\"mouseover\", $._data($(\"#inventoryLabel\")[0]).events['mouseover'][0]['handler']);$(\"#mapLabel\").bind(\"mouseout\", $._data($(\"#inventoryLabel\")[0]).events['mouseout'][0]['handler']);")

I just need to know how to place it under the compass.

Change .insertBefore(\"#inventoryLabel\") to .insertAfter(\"#compassAccordion\"), I think.

Also, anyway to keep the zoom in/out ability for the player?

I don't think this should affect the ability to zoom, but I've not tried it. Can you give a little more detail? Like what you try, what should happen, and what does happen?

That moved it, now I have two Map labels somehow...? lol The 1st one populates as expected. 2nd is blank.

I don't think this should affect the ability to zoom, but I've not tried it. Can you give a little more detail? Like what you try, what should happen, and what does happen?

With the map in its default and unmodified location, you can zoom in or out with your mouse-wheel. With this script, you can't. I don't know if its not available with being moved, or unintentionally disabled.

Any help on the double Map label? ^

I'm not sure how two labels would appear. Can you give a link to the game so I can take a look at it?

This is a test buildout for the same game I'm working on, just locked to first room.

http://textadventures.co.uk/games/view/wuvt32g0j0kikjpjh7mgtq/test-build-for-map

Any help on the double Map label? ^

You have 2 objects, named Lucy1 and Lucy2. Both of them have an initialisation screen which creates a pane in the right sidebar.

So when the game starts up, Lucy1 creates a map pane and moves the map there, and then Lucy2 creates a second pane above the first one and moves the map there, leaving an empty pane at the bottom.

This also means that the map will move back to its default position when loading a saved game. You really should put javascript like this in the UI Initialisation script, which is on the 'Advanced Scripts' tab of the game object (needs to be enabled in the 'Features' tab first).

Also, anyway to keep the zoom in/out ability for the player?

Try this:

JS.eval ("$('<h3 id=\"mapLabel\" class=\"ui-accordion-header ui-helper-reset ui-state-active ui-corner-top\"><span class=\"ui-icon ui-icon-triangle-1-s\"></span><span class=\"accordion-header-text\">Map</span></h3><div id=\"mapAccordion\" class=\"ui-accordion-content-active ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom\"></div>').bind('mousewheel',function (e,d) {gridApi.zoomIn(d);return false;}).insertBefore(\"#inventoryLabel\");$('#gridPanel').hide();$('#gamePanelSpacer').height('0');var size = $('#mapAccordion').innerWidth();$('#gridCanvas').width(size).height(size).appendTo($('#mapAccordion'));paper.view.viewSize.width = size;paper.view.viewSize.height = size;$('#gridPanel').hide();$('#mapLabel').bind('click', $._data($('#inventoryLabel')[0]).events['click'][0]['handler']);$('#mapLabel').bind('mouseover', $._data($('#inventoryLabel')[0]).events['mouseover'][0]['handler']);$('#mapLabel').bind('mouseout', $._data($('#inventoryLabel')[0]).events['mouseout'][0]['handler']);")

Awesome, so the Advanced option for the game fixed the double label (thank you!). Used that script you gave, but no zooming ability, still.

Okay, thanks!

Used that script you gave, but no zooming ability, still.

I finally got around to actually testing it. Loaded the first game I found with a map (XanMag's easter game from last year), and pasted that code into it.
It works for me.

Do you get any error messages in the javascript console, or anything that might explain why it isn't behaving?

Sorry for the radio silence. No errors that I can find. It just doesn't zoom with the mouse-wheel is the most I can see. This is the exact code I have, edited only for placement (insertAfter) as previously discussed:

JS.eval ("$('<h3 id=\"mapLabel\" class=\"ui-accordion-header ui-helper-reset ui-state-active ui-corner-top\"><span class=\"ui-icon ui-icon-triangle-1-s\"></span><span class=\"accordion-header-text\">Map</span></h3><div id=\"mapAccordion\" class=\"ui-accordion-content-active ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom\"></div>').bind('mousewheel',function (e,d) {gridApi.zoomIn(d);return false;}).insertAfter(\"#compassAccordion\");$('#gridPanel').hide();$('#gamePanelSpacer').height('0');var size = $('#mapAccordion').innerWidth();$('#gridCanvas').width(size).height(size).appendTo($('#mapAccordion'));paper.view.viewSize.width = size;paper.view.viewSize.height = size;$('#gridPanel').hide();$('#mapLabel').bind('click', $._data($('#inventoryLabel')[0]).events['click'][0]['handler']);$('#mapLabel').bind('mouseover', $._data($('#inventoryLabel')[0]).events['mouseover'][0]['handler']);$('#mapLabel').bind('mouseout', $._data($('#inventoryLabel')[0]).events['mouseout'][0]['handler']);")

Sorry, my screwup. The objectset returned by $("html") has limitations depending on the version of jQuery. I didn't notice immediately because I try to avoid using that syntax.

Try this:

JS.eval ("$('<h3 id=\"mapLabel\" class=\"ui-accordion-header ui-helper-reset ui-state-active ui-corner-top\"><span class=\"ui-icon ui-icon-triangle-1-s\"></span><span class=\"accordion-header-text\">Map</span></h3><div id=\"mapAccordion\" class=\"ui-accordion-content-active ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom\"></div>').insertAfter(\"#compassAccordion\");$('#mapAccordion').bind('mousewheel',function (e,d) {gridApi.zoomIn(d);return false;});$('#gridPanel').hide();$('#gamePanelSpacer').height('0');var size = $('#mapAccordion').innerWidth();$('#gridCanvas').width(size).height(size).appendTo($('#mapAccordion'));paper.view.viewSize.width = size;paper.view.viewSize.height = size;$('#gridPanel').hide();$('#mapLabel').bind('click', $._data($('#inventoryLabel')[0]).events['click'][0]['handler']);$('#mapLabel').bind('mouseover', $._data($('#inventoryLabel')[0]).events['mouseover'][0]['handler']);$('#mapLabel').bind('mouseout', $._data($('#inventoryLabel')[0]).events['mouseout'][0]['handler']);")

Nothing.

I playtest in the Quest program, and all I can get is the page to scroll, but the map does nothing. Maybe that's the limitation..?