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

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

  
Forge Component
(21)
Published on 18 Oct by Labs
21 votes
Published on 18 Oct by Labs

https://developers.google.com/maps/documentation/javascript/reference#Circle

How do I add event handlers for center_changed and radius_changed for a circle added with 

Circles\AddAddressCircleToMap

Which is made possible using the Cirlcle Options:

"{ clickable : true , editable : true , draggable : true , ... }"

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.


Thanks Frans.  So far I have been unsuccessful in getting this to work with the Outsystems implementation.  Part of the issue was figuring out how to get the original map circle class.  I can get it with:

            var circle = OSMap.circles[circleId];
            var gCircle = circle.gCircle;

where gCirlce is the class.

I can use that to partially implement it.  Allowing them to move the circle, then querying the map to get the lat/long and radius.  It's not ideal, but good enough for now.  When I have more cycles I'll come back and resolve it.

I've done more investigation on this problem.  I have this code embedded in the JavaScript for the map, and the issue is, the console reports gCircle as null.  

    this.addCircleEvent = function(mapId, circleId, eventName, handler) {
        this.getMap(mapId).executeOnLoad(mapId, function(OSMap) {
            var gCircle = OSMap.circles[circleId].gCircle;
            //google.maps.event.addListener(gCircle,eventName,handler);
            console.log(gCircle);
        });
    }

This means the circle has not been set up by the time this logic runs, so I cannot add an event on the Circle.  Not sure how to solve the problem ...

Any suggestions?


Ian Johnstone wrote:

I've done more investigation on this problem.  I have this code embedded in the JavaScript for the map, and the issue is, the console reports gCircle as null.  

    this.addCircleEvent = function(mapId, circleId, eventName, handler) {
        this.getMap(mapId).executeOnLoad(mapId, function(OSMap) {
            var gCircle = OSMap.circles[circleId].gCircle;
            //google.maps.event.addListener(gCircle,eventName,handler);
            console.log(gCircle);
        });
    }

This means the circle has not been set up by the time this logic runs, so I cannot add an event on the Circle.  Not sure how to solve the problem ...

Any suggestions?


Ah, yes, I ran into that issue also. The reason is that the web page loads widgets from top-left to bottom-right and your map probably hasn't loaded yet.

You can solved this issue by adding a button (named OnReadyButton) within a hidden container on the page as the very last item. Within the same hidden container add a WebPatterns/Development/JS webblock with the following JavaScript

"(function(){
    var btn = document.getElementById('" + OnReadyButton.Id  + "');
    btn.click();
})();"

Set the OnClick of the button to AjaxSubmit and call an OnReady screen action. In this action you can run your JavaScript and reference the Map and the Circle within it.

Good luck!


Frans Moquette wrote:

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.



Hi frans,


Can u please share the oml of the maps which you have implemented..with above code.


Thanks,

Vaishavi.