Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
126 lines (112 sloc) 4.32 KB
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
#map {
height: 100%;
width: 70%;
}
#sidebar {
width: 30%;
float: right;
}
#sidebar .inner {
padding: 0 20px;
}
#km {
width: 50px;
}
#info {
display: none;
}
</style>
</head>
<body>
<a href="https://github.com/ServiceStackApps/redis-geo"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div id="sidebar">
<div class="inner">
<h3>Redis GEO Example</h3>
<div id="instructions">
Click on Map to find nearest cities using
<a href="http://redis.io/commands/georadius">Redis GEO</a>
</div>
<div id="info">
Find cities in <b id="state"></b> within <input id="km" type="text" value="20" /> km
</div>
<ol id="results"></ol>
</div>
</div>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 37.09024, lng: -95.7128917 },
zoom: 5
});
var geocoder = new google.maps.Geocoder();
var lastMarker, lastRadius;
google.maps.event.addListener(map, "click", function (e) {
geocoder.geocode({ 'location': e.latLng }, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
map.setCenter(e.latLng);
if (lastMarker != null)
lastMarker.setMap(null);
var marker = lastMarker = new google.maps.Marker({
map: map,
position: e.latLng
});
if (lastRadius != null)
lastRadius.setMap(null);
var km = parseInt($("#km").val());
var radius = lastRadius = new google.maps.Circle({
strokeColor: "#c3fc49",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#c3fc49",
fillOpacity: 0.35,
map: map,
center: e.latLng,
radius: km * 1000
});
radius.bindTo('center', marker, 'position');
var state = getStateAbbr(results);
$("#state").html(state);
$("#instructions").hide();
$("#info").show();
$.getJSON("/georesults/" + state,
{ lat: e.latLng.lat(), lng: e.latLng.lng(), withinKm: km },
function (r) {
var html = $.map(r, function (x) {
return "<li>" + x.member + " (" + x.distance.toFixed(2) + "km)</li>";
}).join('');
$("#results").html(html);
});
}
});
});
function getStateAbbr(results) {
for (var i = 0; i < results.length; i++) {
for (var j = 0; j < results[i].address_components.length; j++) {
var addr = results[i].address_components[j];
if (addr.types.indexOf("administrative_area_level_1") >= 0)
return addr.short_name;
}
}
return null;
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDz8ab2kD1_JyffvmcBC_asZl0EG0KTOaU&callback=initMap" async defer></script>
<script src="/js/jquery-2.2.3.min.js"></script>
</body>
</html>