javascript

<script language="javascript" type="text/javascript">

    // Google Map API Javascript

    var map;
    var geocoder;
    var http_request = false;
    var lat = 0;
    var lng = 0;
    var startingLat = -25.65143;  // view of Pretoria
    var startingLng = 28.256836;  // view of Pretoria
    var startingZoom = 9;
    var maximumZoom = 15;

    function mapLoad() 
    {
        if (GBrowserIsCompatible()) {
            geocoder = new GClientGeocoder();
            map = new GMap2(document.getElementById('map'));
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            map.enableScrollWheelZoom();
            map.setCenter(new GLatLng(startingLat, startingLng), startingZoom);
        }
    }

    function searchLocations() 
    {
        var ddArea = document.getElementById("<%=ddArea.ClientID%>"); 
        var area = ddArea.options[ddArea.selectedIndex].value;
        var searchString = area  + ', Pretoria, Gauteng';

        geocoder.getLatLng(searchString, function(latlng) 
        {
            if (!latlng) 
            {
                alert(searchString + ' - not found');
            } 
            else 
            {
                searchLocationsNear(latlng);
            }
        });
    }

    function searchLocationsNear(center) 
    {
        var ddArea = document.getElementById("<%=ddArea.ClientID%>"); 
        var area = ddArea.options[ddArea.selectedIndex].value;
        var searchUrl = 'SearchResponse.aspx?lat=' + center.lat() + '&lng=' + center.lng() + '&area=' + area;
        GDownloadUrl(searchUrl, function(data) 
        {
            var xml = GXml.parse(data);
            var sidebar = document.getElementById('sidebar');
            sidebar.innerHTML = '';
            map.clearOverlays();

            if (xml.documentElement == null) 
            {
                sidebar.innerHTML = 'No results found.  Please try widening your search area.';
                map.setCenter(new GLatLng(startingLat, startingLng), startingZoom);
                return;
            }

            var markers = xml.documentElement.getElementsByTagName('marker');

            if (markers.length == 0) 
            {
                sidebar.innerHTML = 'No results found.  Please try widening your search area.';
                map.setCenter(new GLatLng(startingLat, startingLng), startingZoom);
                return;
            }

            var bounds = new GLatLngBounds();
            for (var i = 0; i < markers.length; i++) 
            {
                var address = markers[i].getAttribute('address');
                var area = markers[i].getAttribute('area');
                var location = markers[i].getAttribute('location');
                var p_code = markers[i].getAttribute('p_code');
                var point = new GLatLng(parseFloat(markers[i].getAttribute('Latitude')), parseFloat(markers[i].getAttribute('Longitude')));

                var marker = createMarker(point, address, area, location, p_code);

                map.addOverlay(marker);
                var sidebarEntry = createSidebarEntry(marker, address, area, location);
                sidebar.appendChild(sidebarEntry);
                bounds.extend(point);
            }

            var pointCenter = bounds.getCenter();
            var iZoomLevel = map.getBoundsZoomLevel(bounds);
            if (iZoomLevel > maximumZoom) { iZoomLevel = maximumZoom; }
            map.setCenter(pointCenter, iZoomLevel);

        });
    }

    function createMarker(point, address, area, location, p_code) 
    {
        var marker = new GMarker(point);
        var html;
        if (location == null) 
        {
            html = '<br/>' + address + '<br/>' + area + '<br/>' + p_code;
        }
        else 
        {
            html = '<br/>' + address + '<br/>' + area + '<br/>' + location + '<br/>' + p_code;
        }
        GEvent.addListener(marker, 'click', function() 
        {
            marker.openInfoWindowHtml(html);
        });
        return marker;
    }

    function createSidebarEntry(marker, address, area, location) 
    {
        var div = document.createElement('div');
        var address;
        if (location == '' || location == null) 
        {
            address = address + '<br/>' + area;
        }
        else 
        {
            address = address + '<br/>' + area + '<br/>' + location;
        }
        var html =  address;
        div.innerHTML = html;
        div.style.cursor = 'pointer';
        div.style.marginBottom = '5px';
        GEvent.addDomListener(div, 'click', function() 
        {
            GEvent.trigger(marker, 'click');
        });
        GEvent.addDomListener(div, 'mouseover', function() 
        {
            div.style.backgroundColor = '#eee';
        });
        GEvent.addDomListener(div, 'mouseout', function() 
        {
            div.style.backgroundColor = '#fff';
        });
        return div;
    }

    </script>

Select all Open in new window