4.8 Zillow Web – Optional display method

Right now, the data from Zillow is being displayed in the sidebar. However, you may want to have the data display somewhere else. For example, instead of showing the data in the side panel, let’s see if we can display the data in the infowindow of the marker created.

Setting up the infowindow

First, let’s set the infowindow parameters. In the global space, declare a new infowindow variable:

1
2
//infowindow
var infowindow = new google.maps.InfoWindow();

Then, in the “createMarker” function, make the infowindow open when the marker is created (ie, no google click event).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//Function to create marker
yoh.createMarker = function(latitude,longitude,title)
{
    var markerLatLng = new google.maps.LatLng(latitude,longitude);
     marker = new google.maps.Marker({
        position: markerLatLng,
        map: map,
        title: title,
        icon:' http://www.yohman.com/students/yoh/home.png'
    });
   
    infowindow.setContent(title);
    infowindow.open(map,marker);
}

Putting the data in the infowindow

Now, let’s create the content that will go in the infowindow. This will be done in the xmlParser function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
yoh.xmlParser = function(xml)
{
    //create variable to capture handling message from Zillow
    message = $(xml).find("text").text();
   
    //if message contains the word "error" show an alert box, if not, run the code
    if (message.search('Error') == -1)
    {
        //$('#zillowdisplay').fadeIn();
        lat = $(xml).find("latitude").text();
        lng = $(xml).find("longitude").text();
        map.panTo(new google.maps.LatLng(lat,lng))
        content = '<div style="max-height:200px;">';
        content += '<strong>'+$('#zipentry').val() + '</strong><br>';
        $(xml).find("attribute").each(function ()
        {
            if ($(this).find("zip").text() != '')
            {
                content += $(this).find("name").text();
                content += ': ';
                content += '<strong>'+$(this).find("zip").text()+'</strong>';
                content += '<br>';
            }
        });
        content += '</div>';
       
        yoh.createMarker(lat,lng,content)

    }
    else
    {
        alert('Zipcode was not found');
    }
}

The big difference here is that instead of the previous “append” calls that added the data to the side panel DIV, we are creating a variable called “content, that creates the HTML string that will contain the content of the infowindow.

We start off creating the “content” variable by designating a new DIV with max-height=200px;. What this means is that the infowindow will have a maximum height of 200 pixels. If the content runs longer than 200 pixels, a scroll bar will appear.

Inside the .each loop, we add to the content variable using the javascript “+=” operator.
Then, after the loop is done, we make sure to close of the DIV tag.

(sample code)

Leave a Reply