I need to create a boundary around a specific city on a Google Map, so I developed the following code which is working perfectly.
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
padding: 0;
font: 12px sans-serif;
}
h1, p {
margin: 0;
padding: 0;
}
#map_div{
width:400px;
height:400px;
margin: 0 auto;
}
#outer {
width:400px;
height:50px;
margin:0 auto;
text-align:center;
}
#outer input[type="text"] {
display: block;
margin: 0 auto;
}
</style>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="outer">
<input type="text" name="location" value="Current Location"><br>
<div id="map_div"></div>
</div>
</body>
<script type="text/javascript">
google.maps.event.addDomListener(window, "load", function () {
myMap();
});
function myMap() {
//add global geocoder
window.geocoder = new google.maps.Geocoder();
var mapCanvas = document.getElementById("map_div");
var mapOptions = { zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(33.808678, -117.918921) };
window.map = new google.maps.Map(mapCanvas,mapOptions);
drawCircleAroundCity('ottawa');
}
function drawCircleAroundCity(cityName){
if(!cityName) return;
if(!window.geocoder) throw "Geocoder is not loaded";
window.geocoder.geocode({ 'address': cityName }, function (results, status) {
if (status == 'OK') {
addCircle(results[0].geometry.location, true);
} else {
throw 'Unable to find address: ' + address;
}
});
}
function addCircle(position, recenter){
if(typeof(position) != 'object') return;
if(!window.map) throw "Map is not loaded";
var myCity = new google.maps.Circle({
center: position,
radius: 50000,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.4
});
myCity.setMap(window.map);
if(recenter)
window.map.setCenter(position);
}
</script>
</html>
Challenge Description:
Now, I have to determine the distance of an item from the current location and display it just above the Current Location textbox as depicted in the image below. The item details I have include the complete address. Can I use this full address to calculate the distance from Current Location and display it above the shown textbox in the image? For example, this is 187.51 km away from. I'm uncertain about the correct approach for this task.
Here is my functioning jsfiddle
{
"country": "canada",
"state": "ontario",
"city": "ottawa",
"street": "riverside drive",
"number": "1750",
"postal": "k1g 3t6"
}