JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<p>This page will help you determine your riding information.</p>
<div id="results"></div>
JavaScript
var $message_area = jQuery('#results');
// Call this function once we have a latitude and longitude
function districts_for_geocoder_result(result) {
$message_area.children().remove();
// alert(theURL + "?callback=?&error=?" + latlng['lat'] + latlng['lng']);
jQuery.getJSON('http://api.vote.ca/api/beta/districts?callback=?&' + jQuery.param({
'lat': result.lat,
'lng': result.lng
}), function(data) {
if (data.length == 0) {
$message_area.append('<p>No districts found. Is that address in Canada?</p>');
}
jQuery.each(data, function() {
$message_area.append('<p>In ' + this.electoral_group.name + ' (' + this.electoral_group.level + '), your district is <b>' + this.name + '</b>.</p>');
});
});
}
function yesclick() {
$message_area.children().remove();
$message_area.html('<i>Parsing your electoral districts...</i>');
results.lat = lat;
results.lng = lng;
districts_for_geocoder_result(results);
}
function noclick() {
$message_area.html('<p>Sorry, we were not able to maintain an accurate reading of where you are.</p>');
}
jQuery(document).ready(function() {
$message_area.html('<i>Locating you...</i> ');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
// Find location
function foundLocation(position) {
$message_area.children().remove();
// To see everything available in the position.coords array:
// for (key in position.coords) {alert(key)}
lat = position.coords.latitude;
lng = position.coords.longitude;
// alt = position.coords.altitude;
// acc = position.coords.accuracy;
// hed = position.coords.heading;
// spd = position.coords.speed;
$message_area.append('Your latitude: ' + lat + ' and longitude: ' + lng + ':');
$message_area.append('<iframe style="width: 400px;...