title: Draw circle with google map api
body: <p>I have this simple code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
     &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
     &lt;meta charset="utf-8"&gt;
     &lt;title&gt;Google Map API on xhtml&lt;/title&gt;
     &lt;style&gt;
      html, body {
       height: 100%;
       margin: 0;
       padding: 0;
      }
      #map {
       height: 100%;
      }
     &lt;/style&gt;
     &lt;head&gt;
     &lt;body&gt;
      &lt;script&gt;
      //Initialise la map
      function initMap() {                   
        var map = new google.maps.Map(document.getElementById('map'), {
          scrollwheel: true,
          mapTypeControl: false,
          center: {lat: 48.8534100, lng: 2.3488000},
          zoom: 13,
          streetViewControl: false,
          zoomControl:true
        });
      }
      function drawOnclick() {
        alert("clicked");
          var antennasCircle = new google.maps.Circle({
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map: map,
            center: {lat: 48.8534100, lng: 2.34},
            radius:  1000* 100
          });
        }
        &lt;/script&gt;
        &lt;input id="clickMe" type="button" value="clickme" onclick="drawOnclick();" /&gt;
        &lt;div id="map"&gt;
        &lt;/div&gt;
        &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbns5KFelTGVj8E8FHdlJfdM9lEHHo4OA&amp;amp;libraries=visualization&amp;amp;callback=initMap" async="async" defer="defer"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My goal is to draw a red circle over Paris when I click on the button. The problem is that when I click the button, nothing happens.</p>
  
  <p>What I don't understand is that when I set my <code>initMap</code> as follows:</p>
  
  <pre><code>//Initialise la map
  function initMap() {                   
    var map = new google.maps.Map(document.getElementById('map'), {
      scrollwheel: true,
      mapTypeControl: false,
      center: {lat: 48.8534100, lng: 2.3488000},
      zoom: 13,
      streetViewControl: false,
      zoomControl:true
    });
    var antennasCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      center: {lat: 48.8534100, lng: 2.34},
      radius:  100
    });
  }
  </code></pre>
  
  <p>The circle is drawn. Can someone explain?</p>