Retrieving/Activating Google Map GeoFence with Database Design

Retrieving/Activating Google Map GeoFence with Database Design

  • Frontend Google Map GeoFence – Drawing a circle and rectangle
    • CircleReference for Google Map Documentation –
  • // create map on document map Id                                                                map = new google.maps.Map(document.getElementById('map'), {
                  center: { lat:, lng: defaultLocation.lng },
                  zoom: defaultZoom
              marker = new google.maps.Marker({ map: map });
    //add controls on map           map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(mapCustomControl.locationButton());
    //add circle with getBounds which contains latlng and see if contains lat,long
              google.maps.Circle.prototype.contains = function (latLng) {
                  return this.getBounds().contains(latLng) && google.maps.geometry.spherical.computeDistanceBetween(this.getCenter(), latLng) <= this.getRadius();
    //rectangle with bounds of current Rectangle and see if contains lat,long
              google.maps.Rectangle.prototype.contains = function (latLng) {
                  return this.getBounds().contains(latLng);
    var shapeOptions = {
        clickable: true,
        draggable: true,
        editable: true,
        geodesic: true,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        strokeColor: '#000099',
        strokeWeight: 1
    //draw the options to draw the circle, rectangle
    drawingManager = new google.maps.drawing.DrawingManager({
        //map: map,
        drawingMode: google.maps.drawing.OverlayType.null,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
        rectangleOptions: shapeOptions


    AddListener allow you to do something upon certain events. In this example, the event will do something when the “overlaycomplete” i.e. when finish drawing a circle or square

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
      //if the event type is a circle 
       if(event.type == 'circle'){
            scope.inputFence.Type = 'circle';
        if(event.type == 'rectangle'){
            scope.inputFence.Type = 'rectangle';
        if (scope.inputFence.GeoShape) {
        scope.inputFence.GeoShape = event.overlay;


  • How does Google map find out if a point (i.e. coordinate – lat,long) is inside a Map or not. In Google Map Api has already inbuilt function call “contains” that check if point (latitude or longitude) is inside the map or not
    • Below is a function that takes a coordinate as a parameter, draw Geoshape if the type is a circle or rectangle and using the .contains to check if coordinate is inside a Geoshape. It return a boolean true if the coordinate is inside or false if the coordinate is outside
Fence.prototype.containPoint = function (coordinate) {
         if (this.GeoArray.length > 0) {
             if (!this.GeoShape || this.GeoShape == null) {
                 mapReady.then(function () {
                     if (this.Type == 'circle') {
                         this.GeoShape = ShapeFactory.MakeCircle(this.GeoArray);

                     if (this.Type == 'rectangle') {
                         this.GeoShape = ShapeFactory.MakeRectangle(this.GeoArray);
         return this.GeoShape.contains(coordinate);


  • How does Google Map find out if the point is inside a Google Map Polygon or not. There no Google Map Api, in order to find out you can use the ray-casting algorithm to check if point or coordinate is inside a polygon or not. The function takes in an array of latitude, longitude of all the polygon points, with coordinate its need to compare. The function then return true if the points exist and false if the point is outside of the map
// Check if a point coordinate inside polygon
        function checkInsideFence(polyArray, coordinate) {
            // ray-casting algorithm to check if point inside of polygon
            var x =, y = coordinate.lng;

            var inside = false;
            for (var i = 0, j = polyArray.length - 1; i < polyArray.length; j = i++) {
                var xi = polyArray[i].lat, yi = polyArray[i].lng;
                var xj = polyArray[j].lat, yj = polyArray[j].lng;

                var intersect = ((yi > y) != (yj > y))
                    && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
                if (intersect) inside = !inside;
            return inside;


  • Backend Database Design
    • In order to store a circle, you need to have a point which is latitude and longitude of the center of the circle, with a radius.
    • The point can be stored in sql geography datatype –> point( 1354.32, 234.34) while the radius can be float
    • C#   –> var point =SqlGeography.Point(latitude, longitude,4326);
    • In order to store a rectangle, you need to have use linestring which consist of two coordinate representing the diagonal of rectangle
    • The linestring can be stored in sql geography datatype —> linestring(12.233 , 23.4, 34.24, 55.32)
    • To be Continued:-

Leave a Reply

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