“A geofence is a boundary defined around a location or area on the Earth’s surface.”
By geofencing you can set the boundary around a particular area to which your device can be monitored on a regular basis. Once the boundary is set to a device you can set an alert that a device violates the condition of set geofence.geofence is widely used in GPS Tracking software using GPS Tracking devices.
now let start to implement geo-fencing using polyline function which draw an area around a google map.
Step are :
1 > Include Maps API JavaScript
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
2 > Initialize a map (Google Map v3)
on html body onload initiaze map :
<body onload="initialize_map()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body>
3 > Method to Initialize map:
var boundaryColor = '#ED1B24'; // initialize color of polyline
var polyCoordinates =[]; // initialize an array where we store latitude and longitude pair
var count=0;
function initialize_map()
{
// Initializing a map
var latlng = new google.maps.LatLng(29.392971,79.454051); // latitude is 29.392971,longitude: 79.454051
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Draw a map on DIV "map_canvas"
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Listen Click Event to draw Polygon
google.maps.event.addListener(map, 'click', function(event) {
polyCoordinates[count] = event.latLng;
createPolyline(polyCoordinates);
count++;
});
}
4 > Now create a method to implemet geofence
// Function to create Polyline
function createPolyline(polyC)
{
Path = new google.maps.Polyline({
path: polyC,
strokeColor: boundaryColor,
strokeOpacity: 1.0,
strokeWeight: 2
});
Path.setMap(map);
}
5 > join start and end points of created polyline, to function this add a button “Connect Points” and handle a onclick event on this button.
<input type=button name="btnconnect" value="Connect Points" onclick="connectPoints();" />
function connectPoints()
{
var point_add = []; // initialize an array
var start = polyCoordinates[0]; // storing start point
var end = polyCoordinates[(polyCoordinates.length-1)]; // storing end point
// pushing start and end point to an array
point_add.push(start);
point_add.push(end);
createPolyline(point_add); // function to join points
}
This is all about how to implement geofence on google map which draw a boundary around map.
Click on map it will create a bounday as you wish.
Enjoy Geofencing!!!
Shah ji Gmap3 ka koi example hai to dikha do
@amit Thanks. Now Click on View Example.
thank you
using this code i am able to draw fence around the map
and i need
some help in this
1. could i have a control of fence area
2. could i save the fenced map and when i am zooming the map also fencing is creating after saving the map i will give lat long and this should say whether it is in boundary or not
thanks….for polygon boundary whether to say its boundary or not… i use algo in php
source is : http://www.assemblysys.com/dataServices/php_pointinpolygon.php
Soon i will post on rectangular boundary to check these conditions
Hi,
I want a code like the below example:
suppose I have 20 restaurants in different regions.
I am storing the latitude and longitude in database.
I want to geo-fence all the areas.
how can I implement the idea?
Thank you…
Nice if you have lat and long, then fetch from database as sorting to ascending and use polyine function of google this will draw polyine around area and then use algo link given above.
How can I ensure that particular point(lat,lon) is inside the geofence ? do you have any example for the above ?
http://www.assemblysys.com/dataServices/php_pointinpolygon.php
Could please the send the code (for the above link) in the VB.NET ?
sorry don’t have knowledge of VB.NET
Hi Alok, will this code work for google maps API v3??
yes, it is Gmap v3 code…