4.7 Zillow Web – Let’s map it!

Now we want the map to actually show where the user entered zipcode is at, and provide an icon to mark the location. Zillow actually returns the lat/lon pair of each zipcode requested, so we’ll use that to center our map, and add an icon.

First, let’s create a “createMarker” function that will draw the icon.

1
2
3
4
5
6
7
8
9
10
11
//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'
    });
}

Next, modify the “xmlParser” function to:

  • grab the latitude and longitude values from the Zillow feed
  • recenter the map to those coordinates using Google API’s “panTo” function
  • put the icon on the zipcode using the “createMarker” 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
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)
    {
        lat = $(xml).find("latitude").text();
        lng = $(xml).find("longitude").text();
        yoh.createMarker(lat,lng,$('#zipentry').val())
        map.panTo(new google.maps.LatLng(lat,lng))
        $(xml).find("attribute").each(function ()
        {
            if ($(this).find("zip").text() != '')
            {
                $('#zillowdisplay').append($(this).find("name").text());
                $('#zillowdisplay').append(': ');
                $('#zillowdisplay').append('<strong>'+$(this).find("zip").text()+'</strong>');
                $('#zillowdisplay').append('<br>');
            }
        });
    }
    else
    {
        alert('Zipcode was not found');
    }
}

(sample code)

Leave a Reply