How Can I Change The Marker Color Automatically With The Circle Boundary Changed In Google Map Api V3..I Have Done By Showing The Circle And Marker Over Map...

Question

0.00/5 (No votes)

See more:

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CircleDragableIncreaseRadius.aspx.cs" Inherits="CircleDragableIncreaseRadius" %>

<!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 id="Head1" 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="~/JScript.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 });
            // map.setOptions(mapOptions);
            initWidget(map);
        }

        //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');
        }

 function DistanceWidget(map) {

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

        //Cnter 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: 3,
              strokeOpacity: 0.5,
              draggable: true
          };
    var circle = new google.maps.Circle(circleOptions);

        this.set('distance', 20);
        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: 'Images/resize.jpg',
                    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 circle!',
              raiseOnDrag: true,
          });

          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);
        }
      };


      //Distance calculator
      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 20km and min half km
          if (d > 20) {
              d = 20;
          }
          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);
        }
    };
    </script>
</head>
<body onload="LoadMap();">
    <form id="form1" runat="server">
    <h3>
        Draw a Circle on Google Maps - 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>

Posted 4-Aug-14 19:37pm

Prateek737

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)