Draw Circle Radius on an Embedded Map

• Download GoogleMapV3WithCircle-noexe.zip - 42.4 KB
• Download GoogleMapV3WithCircle.zip - 3.4 MB

Introduction

Google Maps API is  used to embed maps in spider web page. current Latest version 3 is available.

V3 has added features for mobile application and desktop browser application.

Background

In this post, we will go through

- How to draw a Circe around the marker in Google map.

- How to change the circle position on moving the marker position.

- Alter then radius (increase/decrease size) of then Circe using slider.

Using the code

In this instance, i have used Google Map API version 3.

we volition understand functionality stride by step.

Create new ASP.Net web application and add ViewMap.aspx folio.

Step 1 : Add TextBoxes in page for display selected breadth & longitude from map.

          <asp:TextBox ID="          txtPointA1"          runat="          server"          ClientIDMode="          Static"          Enabled="          faux"          Width="          170px"          >          </asp:TextBox>          <asp:TextBox ID="          txtPointA2"          runat="          server"          ClientIDMode="          Static"          Enabled="          false"          Width="          170px"          >          </asp:TextBox>        

created 2 textboxes, one for breadth and one for langitude.

these textbox values are alter when user moves marker from one position to another.

below is the code for get current latitude & logitude from map and set values into textboxes.

            function setLatLongValue() {       jQuery('            #txtPointA1').val(currentlatlng.lat());     jQuery('            #txtPointA2').val(currentlatlng.lng());   }          

Step 2 : Add together Slider in page for modify radius of the circle.

SliderExtender is available in AjaxControlTookit.

First, you have to add reference to AjaxControlToolkit into project, to apply AjaxControlToolkit command in your page add it using @Register diractive in superlative of the page after @Page directive, similar this :

          <%@ Register Assembly="          AjaxControlToolkit"          Namespace="          AjaxControlToolkit"          TagPrefix="          ajaxToolkit"          %>        

 this will annals AjaxControlToolkit in your aspx page, now you can utilise controls available in AjaxControlToolkit.dll

now, add together SliderExtender by using TagPrefix, like this :

          <asp:TextBox ID="          txtPointB1"          runat="          server"          onchange="          drawCircle();"          ClientIDMode="          Static"          >          </asp:TextBox>          <ajaxToolkit:SliderExtender ID="          sliderRadius"          BehaviorID="          sliderRadius"          runat="          server"          TargetControlID="          txtPointB1"          Minimum="          200"          Maximum="          2000"          BoundControlID="          txtRadiusShow"          EnableHandleAnimation="          truthful"          EnableKeyboard="          false"          />          <asp:TextBox ID="          txtRadiusShow"          runat="          server"          MaxLength="          four"          CssClass="          setmargin"          ClientIDMode="          Static"          >          </asp:TextBox>          <span way="          font-size: 9pt;"          >          </bridge>        

The Slider extender control allows  user to choose a numeric value from a finite range. The Slider's orientation can be horizontal or vertical and it tin also human action as a "discrete" slider, assuasive only a specified number of values inside its range.

Added SliderExtender control with two Textboxes, one for TargetControlID, one for BoundControlID

BoundControlID is the ID of the TextBox or Label that dynamically displays the slider's value.

TargetControlID is the Targeted command.

In TargetControlID textbox (txtPointB1),drawCirlce() javascript fucntion is called when silder value change,

this function is called in onchange event.

Add Div tag into folio to laod map

          <div id="          map"          style="          summit: 500px; width: 900px;"          />        

At present, Create JScript page that contins all functions required for google map

- Loading google map

- Set marker,

- Describe cirlce around marker

- create information window on click of mark.

FileName : GoogleMapV3.js

Step 3 :   Create function loadMap in  GoogleMapV3.js file

var map; var circle; var marker; var currentlatlng =          new          google.maps.LatLng(23.06368,          72.53135); var infowindow;  role loadMap() {      setLatLongValue();      var mapOptions = {         zoom:          xvi,         eye: currentlatlng,         mapTypeId: google.maps.MapTypeId.ROADMAP     };      map =          new          google.maps.Map(document.getElementById('          map'), mapOptions);      google.maps.issue.addDomListener(map,          '          click', role (due east) {          currentlatlng = e.latLng;          if          (currentlatlng) {              map.panTo(currentlatlng);             setLatLongValue();             setMarker();         }     });  }        

declare all variables required for map, cirlce, marking, electric current latitude & longitude and infowindow.

map is created using google.maps.Map form provided past google.

Added mapOption :

- centre  : holds the map location coordinates. ( create a LatLng object to hold this location past passing the location's coordinates ( breadth, longitude )

- zoom : specifies initial map zoom level.

- mapTypeId : specifies initial map type ( RAODMAP, SATELLITE, HYBRID or TERRAIN).

This map loaded into DIV (named 'map') created in aspx page.

 Added consequence listener to handle click event in map area, in that handler you lot have to do functionality for :

   - fix marker on clicked points

   - need to phone call map.PanTo (currentlanlong) ,this method volition exercise changes the heart of the map to given            points (latitude, longitude).

Step 4 : Create role to Describe a Circle.

part drawCircle() {          if          (circle != undefined)         circumvolve.setMap(null);      var radius =          200;          if          (jQuery('          #txtPointB1').val() !=          '          '          && !isNaN(jQuery('          #txtPointB1').val()) && parseInt(jQuery('          #txtPointB1').val())          >          0) {         radius = parseInt(jQuery('          #txtPointB1').val());     }     jQuery('          #txtPointB1').val(radius.toString());      var options = {         strokeColor:          '          #800000',         strokeOpacity:          1.0,         strokeWeight:          1,         fillColor:          '          #C64D45',         fillOpacity:          0.5,         map: map,         heart: currentlatlng,         radius: radius     };      circle =          new          google.maps.Circle(options); }        

as shown in higher up lawmaking, getting electric current radius value for cirlce from TextBox (txtPointB1).

To describe a circle, you have to set following properties :

 - clickable : Indicates whether this Circle handles mouse events. Defaults to true.

- draggable : used to drag this circle over the map. Defaults to false.

- fillColor : used to fill color in cirlce surface area.

- fillOpacity : used to set fill up opacity between 0.0 and i.0

- map : Map on which to display Circle.

- radius : The radius in meters on the World's surface

- strokeColor , - strokeOpacity

- strokeWeight : The stroke width in pixels. ( border around the circle)

 now create instance of Circumvolve class past setting above options (new google.maps.Circumvolve(options)).

when you change the slider value from aspx page, it volition alter then cirlce radius and volition set to map (run into below paradigm)

Step five : create part for gear up Marker

role setMarker() {          if          (marker != undefined)         marker.setMap(null);      marker =          new          google.maps.Marker({         position: currentlatlng,         draggable:          true,         map: map     });          if          (marker) {         google.maps.event.addDomListener(marking,          "          dragend", office () {             currentlatlng = marker.getPosition();             setLatLongValue();             drawCircle();         });         drawCircle();     } }        

 marker is created using google.maps.Markercourse by setting  electric current latitude longitude position and draggable=true.

added dragenedevent listener for mark to redraw circle on marker position inverse ( or marker dragged from one point to another)

Stride 6 : create lawmaking for display Information window on marker click

google.maps.outcome.addListener(marker,          "          click", function () {         var data =          '          <div>Current LatLong:</div><div>'          + currentlatlng +          '          </div>';         infowindow =          new          google.maps.InfoWindow({            content: data,            position: currentlatlng        });         infowindow.open up(map);    });        

 as shown in above source, information window is created on marker click result.

The InfoWindow is used to render text information when a marker is clicked.

InfoWindow has following options(properties) available :

- content : Content to brandish in the InfoWindow. This can be an HTML chemical element, a plain-text string, or a cord containing HTML. The InfoWindow will be sized according to the content. To prepare an explicit size for the content, fix content to be a HTML element with that size.

- position : The LatLng at which to display this InfoWindow. If the InfoWindow is opened with an anchor, the anchor'south position will be used instead.

Step seven : Add googleapi javascript file and GoogleMapV3.js file into folio header to laod google map.

          <script language="          javascript"          src="          Scripts/jquery-1.4.1.min.js"          type="          text/javascript"          >          </script>          <script src="          https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"          blazon="          text/javascript"          >          </script>          <script src="          Scripts/GoogleMapV3.js"          type="          text/javascript"          >          </script>        

Please do not forget to put googleapi javascription source into page, otherwise google map will not work.

Footstep 8 : Terminal, Call loadMap role on window loaded event from page.

          <script type="          text/javascript"          language="          javascript"          >          $(window).load(part () {             loadMap();                   });          </script>

 loadMap part is chosen when window is loaded and map is going to loaded into div area.

clarkbefoulot.blogspot.com

Source: https://www.codeproject.com/Articles/587199/Draw-Cirlce-Around-Marker-in-Google-Map

Share this post