Hi Daniel.

I think the main problem with my previously posted code was that the
javascript object has some built in methods or properties that were
being found by the for-in loop and being added to the HTML - that'd
explain the 'undefined' entries.

Here's a more refined approach.
Works much as the previous code but this time we create properties of
the categoryHTML object with a prefix of 'cat_'.
Then as we iterate through the properties of categoryHTML we check to
see if the property name beings 'cat_'.
If so we remove 'cat_' from the property name and assign that category
HTML to a container with an id that is the same as the category name.

Again the code is untested - i tried getting your page to load on my
PC but failed so couldn't test the new makeSidebar() function.

function makeSidebar() {
var categoryHTML={};    //      missing semi-colon added here
for (var i=0; i<gmarkers.length; i++) {
if (!gmarkers[i].isHidden()) {
categoryHTML['cat_'+gmarkers[i].mycategory] += '<a
href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '</
a><br>';

for(i in categoryHTML){
// check that i is a property (mycategory) that we've created and not
a built in property or method of the javascript Object
if(i.substr(0, 4)==='cat_'){
//      remove 'cat_' from the category property name
i=i.substr(4, i.length-4);
//      assign the category html to sidebar container with id that is same
as category
document.getElementById(i).innerHtml=categoryHTML[i];

And then within your HTML create the containers to hold the sidebar
for each category:

<div class="side-bar" id="theatre"></div>
<div class="side-bar" id="library"></div>
<div class="side-bar" id="interest"></div>
<div class="side-bar" id="parking"></div>

Don't forget - you need to create a sidebar container for each and
every category that you use.
Otherwise the line:

document.getElementById(i).innerHtml=categoryHTML[i];

will likely cause an error 'i is undefined'.

Martin.

On 6 Oct, 02:38, daniel <dajohnso...@gmail.com> wrote: