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

<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>

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;

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

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
 createPolyline(point_add); // function to join points


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 Responses to 5 Steps To Implement Geofencing On Google Map

  1. Amit Bajaj says:

    Shah ji Gmap3 ka koi example hai to dikha do

  2. kalyani says:

    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 says:

    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 says:

      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 says:

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

  5. Meer Sajid Ali says:


    Could please the send the code (for the above link) in the VB.NET ?

  6. Ameet Kumar says:

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

Leave a Reply

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