<html>
<head>
<!--<script type="text/javascript" src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script>-->
</head>
<body>
<div id="map-canvas"></div>
<div id="info">
</div>
<div id="infoPanel">
<b>Marker status:</b>
<div id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div id="info"></div>
<b>Closest matching address:</b>
<div id="address"></div><br>
<b> Distance is : </b>
<div id="disnaceIs"></div>
</div>
<div id='geocode'>
<input name="q" type="text" id="q" /><br />
<input type="submit" value="Submit" id="geosubmit" /></div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCfmYdPDEdwxoLbAMZdIbt4kRhjQUQAn-E" ></script>
<script>
//https://www.pubnub.com/blog/2015-04-30-google-maps-geolocation-tracking-in-realtime-with-javascript/
//** marker code start
var map;
var marker;
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
//** marker code end
//** radius code start
var distanceVal = 0.05;
function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());
var marker = new google.maps.Marker({
draggable: false
});
marker.bindTo('map', this);
marker.bindTo('position', this);
var radiusWidget = new RadiusWidget();
radiusWidget.bindTo('map', this);
radiusWidget.bindTo('center', this, 'position');
this.bindTo('distance', radiusWidget);
this.bindTo('bounds', radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();
function RadiusWidget() {
var circle = new google.maps.Circle({
fillColor: '#efefef',
fillOpacity: 0.5,
strokeColor: '#000',
strokeOpacity: 1.0,
strokeWeight: 2
});
this.set('distance', distanceVal);
this.bindTo('bounds', circle);
circle.bindTo('center', this);
circle.bindTo('map', this);
circle.bindTo('radius', this);
this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();
RadiusWidget.prototype.distance_changed = function() {
this.set('radius', this.get('distance') * 1000);
};
RadiusWidget.prototype.addSizer_ = function() {
var sizer = new google.maps.Marker({
draggable: false
});
sizer.bindTo('map', this);
//sizer.bindTo('position', this, 'sizer_position');
var me = this;
google.maps.event.addListener(sizer, 'drag', function() {
me.setDistance();
});
};
RadiusWidget.prototype.distanceBetweenPoints_ = function(p1, p2) {
if (!p1 || !p2) {
return 0;
}
var R = 6371;
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
};
//** radius code end
function init() {
var mapDiv = document.getElementById('map-canvas');
//var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(18.5106178, 73.7901639),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var distanceWidget = new DistanceWidget(map);
//** radius code end
mapDiv.style.width = "800px";
mapDiv.style.height = "600px";
//**Marker code start
var latLng = new google.maps.LatLng(15.3173,75.7139);
var markerNew = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
google.maps.event.addListener(markerNew, 'dragend', function(e) {
updateMarkerStatus('Drag ended');
geocodePosition(markerNew.getPosition());
p2 = { lat: 18.5106178, lng: 73.7901639 };
var p1 = e.latLng;
var R = 6371;
var dLat = (p2.lat - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var distance = R * c;
var distance = Math.round(distance * 100) / 100;
document.getElementById('disnaceIs').innerHTML = distance;
if(distance <= distanceVal){
alert('You are in the circle');
}else{
alert('Hey!! you crossed the line...');
}
});
google.maps.event.addListener(map, 'click', function(e) {
updateMarkerPosition(e.latLng);
geocodePosition(markerNew.getPosition());
markerNew.setPosition(e.latLng);
});
//**Marker code end
//SET TIME OUT START Moving pin
var iPosition = 0;
var position = [{"lat":18.51062,"lng":73.79016},{"lat":18.51062,"lng":73.79016},{"lat":18.51062,"lng":73.79016},{"lat":18.51065,"lng":73.79003},{"lat":18.51066,"lng":73.79012},{"lat":18.51067,"lng":73.79021},{"lat":18.51066,"lng":73.79012},{"lat":18.51068,"lng":73.79039},{"lat":18.51066,"lng":73.79012},{"lat":18.51082,"lng":73.79009},{"lat":18.51058,"lng":73.79021},{"lat":18.51029,"lng":73.79039},{"lat":18.51042,"lng":73.79036},{"lat":18.51015,"lng":73.79045},{"lat":18.50973,"lng":73.79033},{"lat":18.50941,"lng":73.79037},{"lat":18.50915,"lng":73.79043},{"lat":18.50889,"lng":73.79031},{"lat":18.50868,"lng":73.79031},{"lat":18.50849,"lng":73.79046},{"lat":18.50859,"lng":73.79079},{"lat":18.50849,"lng":73.79105},{"lat":18.50855,"lng":73.79119}];
//var position = [{lat:12.5206178,lng:73.7901639},{lat:11.5406178,lng:73.7901639},{lat:12.5606178,lng:73.7901639},{lat:18.5906178,lng:73.7901639}];
//var position = ['12.5206178,73.7901639','10.5406178,72.7901639','-5.5606178,73.7901639','20.5906178,73.7901639','15.3173,75.7139'];
setInterval(function() {
console.log(position[iPosition]);
//new code start
var latLng = new google.maps.LatLng(position[iPosition]);
//var markerNew = new google.maps.Marker({
// position: latLng,
// title: 'Point-'+iPosition,
// map: map
//});
updateMarkerPosition(latLng);
markerNew.setPosition(position[iPosition]);
console.log('marker length '+markerNew.length);
//new code end
//distance calculation start
p2 = { lat: 18.5106178, lng: 73.7901639 };
var p1 = latLng;
var R = 6371;
var dLat = (p2.lat - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var distance = R * c;
var distance = Math.round(distance * 100) / 100;
document.getElementById('disnaceIs').innerHTML = distance;
if(distance <= distanceVal){
//alert('You are in the circle');
console.log('Rama is in the circle');
}else{
console.log('Rama crossed the velociter boundary... :)');
}
//distance calculation end
iPosition++;
if(iPosition > 21){
iPosition = 0;
}
}, 1000);
//setInterval
code END
}
//https://googlemaps.github.io/js-marker-clusterer/docs/examples.html
google.maps.event.addDomListener(window, 'load', init);
</script>
OUT PUT
