Press "Enter" to skip to content

5 Steps To Implement Geofencing On Google Map

“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

[javascript]
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
[/javascript]

2 > Initialize a map (Google Map v3)
on html body onload initiaze map :

[html]
<body onload="initialize_map()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
[/html]

3 > Method to Initialize map:

[javascript]
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++;
});
}
[/javascript]

4 > Now create a method to implemet geofence

[javascript]
// Function to create Polyline
function createPolyline(polyC)
{
Path = new google.maps.Polyline({
path: polyC,
strokeColor: boundaryColor,
strokeOpacity: 1.0,
strokeWeight: 2
});
Path.setMap(map);
}
[/javascript]

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.

[html]
<input type=button name="btnconnect" value="Connect Points" onclick="connectPoints();" />
[/html]

[javascript]
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

}

[/javascript]

This is all about how to implement geofence on google map which draw a boundary around map.

View Example

Click on map it will create a bounday as you wish.

Enjoy Geofencing!!!

11 Comments

  1. Amit Bajaj
    Amit Bajaj January 12, 2011

    Shah ji Gmap3 ka koi example hai to dikha do

    • Alok Sah
      Alok Sah January 13, 2011

      @amit Thanks. Now Click on View Example.

  2. kalyani
    kalyani June 11, 2011

    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

  3. Siva
    Siva April 17, 2012

    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…

    • Alok Sah
      Alok Sah April 26, 2012

      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.

  4. Meer Sajid Ali
    Meer Sajid Ali October 15, 2012

    How can I ensure that particular point(lat,lon) is inside the geofence ? do you have any example for the above ?

    • Alok Sah
      Alok Sah October 25, 2012

      sorry don’t have knowledge of VB.NET

  5. Ameet Kumar
    Ameet Kumar September 25, 2013

    Hi Alok, will this code work for google maps API v3??

Leave a Reply to Alok Sah Cancel reply

Your email address will not be published. Required fields are marked *