Google Maps Radius Tool - jQuery

random

Google Maps Radius Tool - jQuery

Google Maps Drawing Tool

The following google maps api example demonstrates how to drawing a interactive circle around an address with given radius and getting latitude and longitude from google maps api and calculating distance in Km. Find the javascript code snippet below:-
google maps draw circle given radius,google earth draw circle radius,draw circle on google map javascript,google maps api examples
google earth draw circle radius - map radius tool
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Google Maps - Drawing a Interactive Circle Around a Point Radius</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.6&sensor=false"></script>
    <script src="js/utility.js" type="text/javascript"></script>
    <script type="text/javascript">
        var map;
        function LoadMap() {
            var center_pt = new google.maps.LatLng(28.992226, 77.705557);
            var mapOptions = {
                zoom: 8,
                center: center_pt,
                mapTypeControl: false,
                streetViewControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.SMALL
                }
            };

            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
            var styles = [
                                                                   { elementType: "geometry",
                                                                       stylers: [
                                                                               { hue: "#00ffe6" },
                                                                               { saturation: -10 }

                                                                             ]
                                                                   }, {
                                                                       featureType: "road",
                                                                       elementType: "geometry",
                                                                       stylers: [
                                                                               { lightness: 100 },
                                                                               { visibility: "simplified" }
                                                                             ]
                                                                   }, {
                                                                       featureType: "road",
                                                                       elementType: "labels",
                                                                       stylers: [
                                                                               { visibility: "off" }
                                                                             ]
                                                                   }
                                                                   ];

            map.setOptions({ styles: styles });
            initWidget(map);
        }    
    </script>
</head>
<body onload="LoadMap();">
    <form id="form1" runat="server">
    <h3>
        google maps api radius - jQuery Widget</h3>
    <div id="divInfo" style="font-family: Arial; font-size: 12px; color: Red;">
    </div>
    <br />
    <br />
    <div id="map_canvas" style="width: auto; height: 500px;">
    </div>
    </form>
</body>
</html>

utility.js

//Draw Widget Circle
function initWidget(map) {
    var distanceWidget = new DistanceWidget(map);

    google.maps.event.addListener(distanceWidget, 'distance_changed', function () {
        displayInfo(distanceWidget); //Put you core filter logic here
    });

    google.maps.event.addListener(distanceWidget, 'position_changed', function () {
        displayInfo(distanceWidget); //Put you core filter logic here          
    });
}

//For display center and distance
function displayInfo(widget) {
     var info = document.getElementById('divInfo');
     info.innerHTML = 'Position: ' + widget.get('position') + ', Distance (in Km): ' +
     widget.get('distance');
}

/*------------------------------------Create Distance Widget--------------------*/

      function DistanceWidget(map) {
        this.set('map', map);
        this.set('position', map.getCenter());
        //Anchored image
        var image = {
        url: 'Center.png'
        size: new google.maps.Size(24, 24), origin: new google.maps.Point(0,0),   
        anchor: new google.maps.Point(12, 12)
        };

        //Center Marker
        var marker = new google.maps.Marker({
            draggable: true,          
            icon: image,
            title: 'Drag to move new location!',
            raiseOnDrag: false,
        });   
   
        marker.bindTo('map', this);      
        marker.bindTo('position', this);
        //Radius Widget
        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();

/*------------------------------Create Radius widget-------------------------*/

      function RadiusWidget() {
          var circleOptions = {
              fillOpacity: 0.05,
              fillColor: '#686868',
              strokeColor: '#686868',
              strokeWeight: 1,
                               strokeOpacity: 0.8
          };
    var circle = new google.maps.Circle(circleOptions);       
        this.set('distance', 50);       
        this.bindTo('bounds', circle);     
        circle.bindTo('center', this);      
        circle.bindTo('map', this);       
        circle.bindTo('radius', this);
        // Add the sizer marker
        this.addSizer_();
      }

      RadiusWidget.prototype = new google.maps.MVCObject();
      //Distance has changed event handler.      
      RadiusWidget.prototype.distance_changed = function() {
        this.set('radius', this.get('distance') * 1000);
      };

      //Sizer handler
      RadiusWidget.prototype.addSizer_ = function () {       
        var image = {
                    url: 'Resize.png',  
                    size: new google.maps.Size(24, 24),
                    origin: new google.maps.Point(0,0),   
                    anchor: new google.maps.Point(12, 12)
                    };

          var sizer = new google.maps.Marker({
              draggable: true,
              icon: image,
              cursor: 'ew-resize',
              title: 'Drag to resize the cicle!',
              raiseOnDrag: false,
          });

          sizer.bindTo('map', this);
          sizer.bindTo('position', this, 'sizer_position');

          var me = this;
          google.maps.event.addListener(sizer, 'drag', function () {
              me.setDistance();             
          });

          google.maps.event.addListener(sizer, 'dragend', function () {          
              me.fitCircle();            
          });
      };

      //Center changed handler
      RadiusWidget.prototype.center_changed = function() {
        var bounds = this.get('bounds');
      
        if (bounds) {
          var lng = bounds.getNorthEast().lng();         
          var position = new google.maps.LatLng(this.get('center').lat(), lng);
          this.set('sizer_position', position);
        }
      };

      //Calculate Distance
      RadiusWidget.prototype.distanceBetweenPoints_ = function (p1, p2) {
          if (!p1 || !p2) {
              return 0;
          }

          var R = 6371; // Radius of the Earth in km
          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;
         
          //Limit max 50km and min half km
          if (d > 100) {
              d = 100;
          }
          if (d < 0.5) {
              d = 0.5;
          }
          return d;
      };

      //Set distance
      RadiusWidget.prototype.setDistance = function() {       
        var pos = this.get('sizer_position');
        var center = this.get('center');
        var distance = this.distanceBetweenPoints_(center, pos);      
        this.set('distance', distance);       
         var bounds = this.get('bounds');        
        if (bounds) {
          var lng = bounds.getNorthEast().lng();         
          var position = new google.maps.LatLng(this.get('center').lat(), lng);
          this.set('sizer_position', position);
        }
    };

    //Fit circle when changed
    RadiusWidget.prototype.fitCircle = function () {

        var bounds = this.get('bounds');  
     
        if (bounds) {
          map.fitBounds(bounds);

          var lng = bounds.getNorthEast().lng();        
          var position = new google.maps.LatLng(this.get('center').lat(), lng);
          this.set('sizer_position', position);
        }
    };

I hope you will enjoy the Google Maps API Developer tip while developing GIS web application. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome. Also If you like this article, don't forget to share this article with your friends and colleagues.
Google Maps Radius Tool - jQuery Reviewed by Ravi Kumar on 2:41 PM Rating: 5

5 comments:

  1. this post help for me! thanks........
    but i want to get middle coordinate Address details ..

    ReplyDelete
  2. What is Resize.png and center.png in urls

    ReplyDelete
    Replies
    1. Resize.png and center.png are icons using in this widget to display centre and resize the circle.

      Delete
  3. thank you so much for share this. Your code is awesome, and run very well. I'm using a lot of tips that i found in your blog. Thank you for this.

    ReplyDelete
    Replies
    1. Thank you for your appreciation of my work. :)

      Delete

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form

Name

Email *

Message *

Powered by Blogger.