Vote.ca's Reference

by Mike Gifford

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
Doesn't seem to work in jsfiddle but does on the browser

<form id="districtsapidemo">
    <table>
        <tr><th>Your address</th><td><input type="text" style="width: 400px"></td></tr>
        <tr><td></td><td><input type="submit" value="Go"></td></tr>
    </table></form>
<div id="districtsapidemo_message"></div>

JavaScript

var $message_area = $('#districtsapidemo_message');

// Call this function once we have a latitude and longitude

function districts_for_geocoder_result(result) {
    // 'result' is a Google geocoder response object
    // latitude lives in result.geometry.location.lat()
    $message_area.children().remove();
    $message_area.append('<p>' + result.formatted_address + '</p>');
    $.getJSON('http://api.vote.ca/api/beta/districts?callback=?&' + $.param({
        'lat': result.geometry.location.lat(),
        'lng': result.geometry.location.lng()
    }), function(data) {
        if (data.length === 0) {
            $message_area.append('<p>No districts found. Is that address in Canada?</p>');
        }
        $.each(data, function() {
            $message_area.append('<p>In ' + this.electoral_group.name + ' (' + this.electoral_group.level + '), your district is ' + this.name + '.</p>');
        });
    });
}

$('#districtsapidemo').submit(function(e) {
    e.preventDefault();

    // First, find the latitude and longitude for this address
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': $('#districtsapidemo input[type=text]').val(),
        'region': 'ca'
    }, function(results, status) {
        $message_area.children().remove();
        // A fuller example would only look at street addresses
        if (results.length > 1) {
            // Resolve multiple possible addresses
            $message_area.append('<p>Which of these looks like your address?</p>');
            $.each(results, function() {
                var result = this;
                $message_area.append($('<p>' + this.formatted_address + '</p>').click(function() {
                    districts_for_geocoder_result(result);
                }));
            });
        }
        else if (results.length === 0) {
            $message_area.append('<p>No match for that address.</p>');
        }
        else {
            districts_for_geocoder_result(results[0]);
...