adding side bar to api v3 map

[Mothermugger]

Hi there!

Ok here it is: http://www.naturefind.com/Gmap/nf-map-sample.asp

This is a great project and works well it loads data from our database
(when you look at the source of the example page you will not see that
code just the Javascipt)

The content for the pins pop-up info windows and all is kept in a Json
string. You will see that in the middle of the code - and that is
generated from our database...

Then the pins are set up in a function that loops through all the
data. This is great because we can
have a lot of pins - I have tried up to 500 miles radius and it still
works great (slows things down but it works)

My problem is how do I add a side bar to this project?

The side bar should show the Name of the Location in a list next to
the map - and when you click the in the side bar it should pop up the
info window for the map pin. ...
but how to do it in version 3 !!!

[Martin Matysiak]

This problem is sort of version independent, as it has nothing to do with the maps api itself. Simply create a div for your sidebar and upon marker creation, make sure to add div or li nodes or whatever you like into your sidebar (document.createElement('<tag name here>') might help). Then add click listeners to those DOM nodes that will trigger an method that centers on the specific area and opens up the infowindow.

So basically your dom structure could look like this:

<table>
    <tr>
        <td>
            <div id="sidebar">
                <div class="item">Result 1</div>
                <div class="item">Result 2</div>
                <div class="item">etc. (the div class items will be generated automatically by your script)</div>
            </div>
        </td>
        <td>
            <div id="map"></div>
        </td>
    </tr>
</table>

[geoco...@gmail.com]

Have you seen these:
translated from Mike Williams' tutorial The Basics - Part 2: Adding a
clickable sidebar:
http://www.geocodezip.com/v3_MW_example_map2.html

translated from Mike Williams' tutorial The Basics - Part 3: Loading
the data from an XML file translated to v3 :
http://www.geocodezip.com/v3_MW_example_map3.html

use your json as the datasource (instead of xml)

-- Larry

[geoco...@gmail.com]

On Jan 26, 7:52 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

One way is like this:
http://www.geocodezip.com/naturefind_com_nf-map-sampleA.html

Although I would suggest separating the data from the page and loading
it separately (either JSON or XML).

-- Larry

[allhen]

In this sample: http://www.geocodezip.com/naturefind_com_nf-map-sampleA.html

Can show all markers in map and in sideber add a paginator, and show
only first 20 for example?

[geoco...@gmail.com]

Sure. You have to write code to do that though...

-- Larry

[Mothermugger]

Thanks for the DOM lesson but it's really on the Javascript that I am
clutzy... I am on the trail of a good example now ...

Thanks for the reply

[Mothermugger]

Thanks for the links...

I had seen the first example ...map2.html
and I had started to build out on that employing our
data and it worked for the most part but there is something
that is not exactly right --> when I changed our descriptions that
appear in the infowindows ballons to be about the same length some of
the info windows would show the wrong information... I think this had
something to do with this line of code:
side_bar_html += '<a href="javascript:myclick(' +
(gmarkers.length-1) + ')">' + name + '<\/a><br>';

note the gmarkers.length-1 piece above - I tried to fix that but to no
avail... comes from not fully understanding how this works.

Anyway - thanks for the second example link ...map3.html
that one uses a loop to create the markers like my code.. I would
swear that I have tried the solution presented in map3 example but
mine didn't work!

will try hope I can get this part =>
infowindow.setContent(this.html); to work too..



On Jan 26, 10:52 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote: