title: Redraw Google Maps Circle and Marker on function call
body: <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>