Search This Blog

Sunday, December 15, 2019

Create circle with google map api with mousemove event to enlarge / shrink area

function addCircle_new(lat, lng, radius, alreadyDrawn) {
    function createCircle(lat, lng, radius) {

        var coordinates = new google.maps.LatLng(lat, lng);

        var options = {
            strokeColor: '#910000',
            strokeOpacity: 0.5,
            strokeWeight: 1,
            fillColor: '#FC7341',
            fillOpacity: 0.35,
            map: map,
            center: coordinates,
            radius: radius
        };
        // Add the circle for this city to the map.
        circle = new google.maps.Circle(options);
        return circle;
    }

    var circle;

    if (alreadyDrawn) {
        circle = createCircle(lat, lng, radius * 1000);
        drawObject = circle;
        pois.push(circle);
    }
    else {
        //google.maps.event.removeListener(clickListener);
        google.maps.event.addListenerOnce(map, 'click', function (x) {

            //circle = createCircle(x.latLng.lat(), x.latLng.lng(), radius * 1000);
            circle = createCircle(lat, lng, radius * 1000);

            var clickEventParameters = x;
            var mouseMoveEventParameters;

            var mouseMove = google.maps.event.addListener(map, 'mousemove', function (y) {
                mouseMoveEventParameters = y;

                var xOffset = mouseMoveEventParameters.qa.x - clickEventParameters.qa.x;
                var yOffset = mouseMoveEventParameters.qa.y - clickEventParameters.qa.y;
                var radiusOffset = Math.sqrt(Math.pow(xOffset, 2) + Math.pow(yOffset, 2)) * 100000;

                circle.setRadius(radiusOffset);

            });
            var dblClick = google.maps.event.addListener(map, 'dblclick', function (w) {
                drawObject = circle;
                google.maps.event.removeListener(mouseMove);
                pois.push(circle);

                //clickListener = google.maps.event.addListener(map, 'click', map_MouseClick);
            });
        });

    }
}

No comments:

Post a Comment