Question

Im developing an webapplication using asp.NET C#. I am currently using this map controller. http://googlemap.artembg.com/
What i want to do is that i want to make it possible for the user to click on the map and a marker should be seen exactly where the user clicked and a radius circle around that area, and it should be possible for the user to change the radius. I’ve search everywhere for some samples of this in ASP.Net c# but i can’t find it. I want something like this: http://www.freemaptools.com/radius-around-point.htm

Any suggestions?

Answer 1

Maybe to help you get started you can find this javascript code useful, then try to adapt it to whatever the C# control provides.

var map;
var marker;

function initialize() {
    var optns = {
        zoom: 6,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(document.getElementById("myMap"), optns);
    google.maps.event.addListener(map, 'click', function(event) {
        setCurrentLocation(event.latLng, 10);
    });
}

function setCurrentLocation(location, crcl_radius){
    if(marker)
        marker.setMap(null);

    var opts = {
        map: map,
        position: location,
        clickable:false
    };
    marker = new google.maps.Marker(opts);

    var circle = new google.maps.Circle({
            map: map,
            radius: crcl_radius,
            fillColor:'#efefef',
            fillOpacity:0.5,
            strokeColor:'#ff0000',
            strokeWeight:2
    });
   circle.bindTo('center', marker, 'position');
}

The code above creates a circle with radius of 10 whenever you click on the map. You can take it from there and try to adapt it to your needs.

The above assumes you have a div with an id of myMap where your map will be shown.