Add Sidebar to v3

[Am]

I'm having trouble finding the code or a tutorial for this. How do I add the sidebar to the v3 store locator instead of the drop down?
Thank you for your help.

[Rossko]

> I'm having trouble finding the code or a tutorial for this. How do I add the
> sidebar to the v3 store locator instead of the drop down?

Have you looked at any of these yet?
http://groups.google.com/group/google-maps-js-api-v3/search?group=google-maps-js-api-v3&q=store+locator+sidebar

[Am]

I followed the advice here: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/8cbba324e113df53/e2be32527134110e?lnk=gst&q=store+locator+sidebar#e2be32527134110e
When I search for properties that are in my database, I get undefined in the sidebar, null(1.2) in the drop down, and the map doesn't move. I have attached my code. Any help is appreciated.
Thanks

[Rossko]

> I have
> attached my code.

I can't debug that because your database is not available via
http://google-maps-js-api-v3.googlegroups.com/
Post a link to your map for more help.

[Am]

My page is located here: http://www.rentalmatch101.com.php5-20.dfw1-1.websitetestlink.com/googlemap.php
Thank you for your help

[Rossko]

> When I search for properties that are in my database, I get undefined in the
> sidebar, null(1.2) in the drop down, and the map doesn't move. I have
> attached my code. Any help is appreciated.

Your phpsqlsearch_genxml.php returns an invalid XML file if it doesn't
find any content for a given search.
You javascript tries to do things with it, but of course as there's no
content you see 'undefined' and so on.
You could improve your code to deal more sensibly with null values.

I eventually found your data near New York, which returns good XML.
Your createMarker() function has an error.
It attempts to use name, address1, address2, cityStateZip and so on,
but no such variables are defined.
They're not present in your XML ; you probably want to review what
data your searchLocationsNear() function tries to parse out of your
XML.

[geoco...@gmail.com]

And you still have invalid "points" in your database as I pointed out
in your last thread:
http://groups.google.com/group/google-maps-js-api-v3/browse_frm/thread/bb49294ee9547a38/ddbec0eab42566f1#ddbec0eab42566f1

-- Larry

[Am]

Thank you for the advice. I believe I have everything defined, but came across other issues. I'm still getting an undefined message on top of the properties that do show up. If you search for San Fransisco, 3 properties are listed in the sidebar, along with the undefined message.
I am aware of the wrong points; I'm trying to fix those now. Is that what is causing my issue?

[geoco...@gmail.com]

No. You are getting the undefined because your initial creation of
"sidebarInfo" doesn't assign it a value:
var sidebarInfo;
Then when you do this:
sidebarInfo += html;
// add this line after the html var declaration:
document.getElementById("sidebar").innerHTML=sidebarInfo;

it becomes "undefined"+ the value of html.

Change the initial definition to :
var sidebarInfo = "";

And it should go away.

-- Larry

[Am]

That took care of the undefined issue, thank you so much! I have a couple more questions.
When I search, I get the properties correctly. But if I search again, the list in the sidebar doesn't clear, it just ads the new properties to the list. How do I make it clear with each search?
Also, how do I make the list in the sidebar link to the map? This way I can click on a property and it opens the call out on the map.

[geoco...@gmail.com]

On Oct 25, 7:08 am, Am <am2...@gmail.com> wrote:
> That took care of the undefined issue, thank you so much! I have a couple
> more questions.
> When I search, I get the properties correctly. But if I search again, the
> list in the sidebar doesn't clear, it just ads the new properties to the
> list. How do I make it clear with each search?

Write code to do that (from my previous message, resetting sidebarInfo
to "" should clear out the previous contents of the sidebar; do that
at the beginning of the callback function, before starting to process
the markers).

> Also, how do I make the list in the sidebar link to the map? This way I can
> click on a property and it opens the call out on the map.

The same way that is done for the options list. Or see this example:
http://www.geocodezip.com/v3_MW_example_map3.html

-- Larry

[Am]

I feel dumb asking this, but I've put var sidebarInfo = ""; in every function on the page and I can't get it to clear the list. Where am I supposed to put the call in my code?

[Rossko]

> I feel dumb asking this, but I've put var sidebarInfo = ""; in every
> function on the page and I can't get it to clear the list. Where am I
> supposed to put the call in my code?

Where do you start to process new markers? Put it the front of marker
processing.

[Am]

When I put it in the marker function, the list only displays the last marker.

function createMarker(googlemap_ltgooglemap_ln, street) {
      var sidebarInfo = "";
      var html = "<p><span style='font-weight:bold'>" + street + "</p>"; // info window contents

       sidebarInfo += html;
      // add this line after the html var declaration:
      document.getElementById("sidebar").innerHTML=sidebarInfo;
     

      var marker = new google.maps.Marker({
        map: map,
        position: googlemap_ltgooglemap_ln
      });
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
      markers.push(marker);
    }

If I put var sidebarInfo = ""; in any other function, nothing happens. It still duplicates the sidebar list. Did I put it in the wrong place?
Thanks

[geoco...@gmail.com]

On Oct 26, 5:43 am, Am <am2...@gmail.com> wrote:
> When I put it in the marker function, the list only displays the last
> marker.
>
> function createMarker(googlemap_ltgooglemap_ln, street) {

>      * var sidebarInfo = "";*

This clears out the sidebar every time you add a marker, so only the
last one will be visible. Sounds like that isn't what you want.

>       var html = "<p><span style='font-weight:bold'>" + street + "</p>"; //
> info window contents
>        sidebarInfo += html;
>       // add this line after the html var declaration:
>       document.getElementById("sidebar").innerHTML=sidebarInfo;
>
>       var marker = new google.maps.Marker({
>         map: map,
>         position: googlemap_ltgooglemap_ln
>       });
>       google.maps.event.addListener(marker, 'click', function() {
>         infoWindow.setContent(html);
>         infoWindow.open(map, marker);
>       });
>       markers.push(marker);
>     }
>

> If I put * var sidebarInfo = ""; *in any other function, nothing happens.

> It still duplicates the sidebar list. Did I put it in the wrong place?

Yes. If you only want the markers that come in from a given xml
request, put it in the xml processing before the loop that adds the
markers (you probably want to remove the "var" from in front of it as
well).

-- Larry

> Thanks

[Am]

Thanks for the input. When I put the call there, it doesn't list all the properties, only one of them. How do I make it list all the properties?

[geoco...@gmail.com]

On Oct 26, 7:12 am, Am <am2...@gmail.com> wrote:
> Thanks for the input. When I put the call there, it doesn't list all the
> properties, only one of them.

Where?

> How do I make it list all the properties?

What about this didn't you understand?

>> If you only want the markers that come in from a given xml
>> request, put it in the xml processing before the loop that adds the
>> markers (you probably want to remove the "var" from in front of it as
>> well).

A loop starts with "for". The xml processing is in the callback
function for downloadUrl.

-- Larry

[Am]

thank you for your help.

[Am]

I viewed the example, but it is set up different than my map, so I'm not sure what I'm supposed to do. I found where this map links their sidebar, but I don't have similar code, so when I copy their code, it breaks my map.

[geoco...@gmail.com]

The point of examples is for you to look at them and understand how
they do what you want, then apply that understanding to your map.

"breaks my map" isn't meaningful. Look at the errors you get,
understand what is causing them and fix them.

-- Larry

[Am]

I seem to be frustrating you. I apologize, but I do not understand what I am looking at. That is why I'm asking questions, hoping someone can help me work through this so I can understand. I understand if I'm too frustrating to help and will not be offended if you stop helping me.

When I add '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>' to my code here:

function createMarker(googlemap_ltgooglemap_ln, street) {
       
      var html = '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + street + '<\/a><br>'; // info window contents

       sidebarInfo += html;
      // add this line after the html var declaration:
      document.getElementById("sidebar").innerHTML=sidebarInfo;
     

      var marker = new google.maps.Marker({
        map: map,
        position: googlemap_ltgooglemap_ln
      });
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
      markers.push(marker);
    }

(street being the name of my field, not name), and do a search, the map doesn't move, nothing is listed in the sidebar, the drop down only has 1 property listed, and I get gmarkers is undefined in my firebug console.

I don't know what I need to change gmarkers to to match my code, nor do I know if that is the correct way to make my list link to the map. I don't know what gmarkers is. Is that the code I need to make my list link? I don't know.

Comparing the code of the sample map and my map doesn't make sense to me. The code is different than what I have, and I don't know what I'm supposed to look for. When I tried to copy the sample code and put it on my server, the map didn't have anything listed in the sidebar and no markers, so I don't know what I'm missing.