/*global google, ko*/
/*jshint esversion: 6 */
/* jshint -W031 */
(function (ns){
"use strict";
var mapOptions,
mapCanvas,
map,
gpsViewModel;
mapOptions = {
zoom: 6,
center: { lat: -34.397, lng: 150.644},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapCanvas = document.getElementById('map-canvas');
if (!map) {
map = new google.maps.Map(mapCanvas, mapOptions);
gpsViewModel = new ns.GpsViewModel();
ko.applyBindings(gpsViewModel);
google.maps.event.addListener(map, 'click', function (evemt) {
new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
center: { lat: gpsViewModel.lat(), lng: gpsViewModel.lng()},
radius: Math.sqrt(603502) * 100
});
});
google.maps.event.addListener(map, 'mousemove', function (event) {
gpsViewModel.lat(event.latLng.lat());
gpsViewModel.lng(event.latLng.lng());
});
}
}(window.milosev));
gps.js:
/*global window, ko*/
(function (ns) {
"use strict";
var self;
ns.GpsViewModel = function () {
self = this;
self.lat = ko.observable();
self.lng = ko.observable();
return {
lat: self.lat,
lng: self.lng
};
};
}(window.milosev));
Notice line:
radius: Math.sqrt(603502) * 100
That was just copy / paste, otherwise radius is in meters Source download from here. Live example:
Langitude:
Longitude: