CODEWITHSUNDEEP
google-maps-api-3
tamak
tamak

Reputation: 1591

How can I have a circle overlay drawn, then change its position based on new marker click - avoiding multiple circles?

Im using google maps api v3 and have it working beautifully, on marker OR external link click I have the map zoom in on that particular marker and a circle being drawn at that particular marker. each time a 'click' occurs the following runs:

    // DO CIRCLE...         

            //circle.setMap(null);  // CLEARS CIRCLE

                var circle = new google.maps.Circle({
                    map: map,
                    center: marker.position,
                    fillColor: '#0000FF',
                    fillOpacity: 0.2,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 1,
                });

                circle.setRadius(1609.344);
                circle.bindTo('center', marker, 'position');


 // END CIRCLE SECTION

I would like to just have ONE circle appear at any given time, so while it currently makes 4 different circles if you click 4 different markers, I would like to first REMOVE all circles, prior to drawing the new circle. I tried this but it just appears to disable the ability to draw circles alltogether.

circle.setMap(null);

How can I achieve that? If possible I'd prefer to have one circle drawn on for the first click, then just have it move position with it being bound to the last clicked marker. Or if that's not do-able I'd like to have it clear any circle overlays, then redraw new circle bound to the last clicked marker.

Upvotes: 0

Views: 786

Answers (1)

geocodezip
geocodezip

Reputation: 161404

If you only want one circle ever, make it global (defined with "var" outside of any function) and either destroy it and recreate it or move it to the new location (bind its center to a new marker).

example

Upvotes: 1

Related Questions