Quantcast
Channel: OutSystems Community
Viewing all articles
Browse latest Browse all 1476385

[Forums] How do I add center_changed and radius_changed events to a circle on Google Maps

$
0
0

I don't know if this answers your question exactly (I have not used AddAddressCircleToMap), but I have created a web application that uses a Google Map click event and some hidden input variables that shows a map with draggable and resizable circles.

In a Google_Maps MapsFlow\AddMapEvent widget I use "click" as TriggeringEvent and the following JavaScript as Handler.

"function(event) {
    // get the map that was clicked and center the map on the click location passed by the event
    map = this;
 
// create your circle with any settings you see fit
    var circle = new google.maps.Circle({
        map: map,
        // circle properties
        radius: 100,     // in metres
        centre: event.latLng,
        // circle events properties
        draggable: true,  // allow dragging
        editable: true // allow the radius to be changed
    });

  // add resize behaviour to the circle
    circle.addListener('radius_changed', function(e){
         storeCircleRadius(circle);
     });
 
    // add drag behaviour to circle
    circle.addListener('dragend', function(e){
        storeCirclePosition(circle);
    });

     function storeCirclePosition(circle) {
        // set input to store value
        $('#" + CircleLat.Id + "').val(circle.getCenter().lat());
        $('#" + CircleLng.Id + "').val(circle.getCenter().lng());
        // trigger OnChange event
        $('#" + CircleLng.Id + "').trigger('change');
     }

     function storeCircleRadius(circle) {
        // set input to store value
        $('#" + CircleRadius.Id + "').val(circle.getRadius());
        // trigger OnChange event
        $('#" + CircleRadius.Id + "').trigger('change');
    }
}"

CircleLat, CircleLng and CircleRadius are hidden input fields. In the OnChange of CircleLng and CircleRadius add an action to handle whatever you want to happen when the circle is dragged or resized.

Hope this helps in some way.



Viewing all articles
Browse latest Browse all 1476385

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>