Search This Blog

Showing posts with label Google Map Api. Show all posts
Showing posts with label Google Map Api. Show all posts

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);
            });
        });

    }
}