Redraw Google Maps Circle and Marker on function call
<p>I'm writing a web application that shows one Circle around one Marker on a Google Map. <code>placeMarker(location, radius)</code> sets a a Marker at <code>location</code> and binds to it a Circle with a radius. I want the script to redraw the Circle and Marker every time placeMarker is called. When I try it in a console, it redraws the Marker with the new location but the original Circle radius is kept. <code>undefined</code> is also printed. What do I need to change to get this working?</p>

<pre><code>var map;
var marker;

function placeMarker(location, radius) {
    if (typeof radius === 'undefined') { radius = initialRadius; }

    if (marker) {
        marker.setPosition(location);
    } else {
        marker = new google.maps.Marker({
            position: location,
            map: map,
            draggable: true
        });
    }

    var circle = new google.maps.Circle({
        map: map,
        radius: radius,
        fillColor: '#AA0000',
    });

    circle.bindTo('center', marker, 'position');
}


function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 0, lng: 0},
        zoom: 1
    });

    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);
    });

    google.maps.event.addDomListener(window, "resize", function () {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });
}
</code></pre>