CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
NiMi
NiMi

Reputation: 21

google map : get radius of circle overlay while creating circle

i am creating a web application that uses maps. on map I'm creating circle and want to show the radius in a div. I'm able to show radius after finishing the radius with overlay complete event. but i want to show the radius in a div while creating the circle to allow user to draw the circle with radius of their own length. Is there a way to do it. plz help me on this. Any feedback and help would be welcome and appreciated. thanx in advance.

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
        deleteSelectedShape();
        selectedShape = e.overlay;

       //selectedShape.setEditable(true);
      //overlayClickListener(selectedShape);

       if (e.type == google.maps.drawing.OverlayType.CIRCLE) {
            var bound = e.overlay.getBounds();
            bounds = bound;
            var radius = e.overlay.getRadius();
            radius = (radius/1000);
            $('#radius_size').html("Radius "+Math.round(radius)+" Km");

        } 
        else if (e.type == google.maps.drawing.OverlayType.RECTANGLE) {
               deleteSelectedShape();
               var bound = e.overlay.getBounds();
               map.fitBounds(bound);

        }

Upvotes: 1

Views: 1675

Answers (1)

geocodezip
geocodezip

Reputation: 161404

See this example in the documentation from the "article" Fun with MVC Objects, if you display the radius when the circle is created (in this example by adding displayInfo(distanceWidget) to the init function):

function init() {
    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(37.790234970864, -122.39031314844),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var distanceWidget = new DistanceWidget(map);

    google.maps.event.addListener(distanceWidget, 'distance_changed', function () {
        displayInfo(distanceWidget);
    });

    google.maps.event.addListener(distanceWidget, 'position_changed', function () {
        displayInfo(distanceWidget);
    });
    displayInfo(distanceWidget);
}

fiddle

Upvotes: 1

Related Questions