title: Google Maps Circle
body: <p>I am trying to load data from an API then display it using circles. I am able to create markers with the data points but not circles. I am following <a href="https://developers.google.com/maps/documentation/javascript/shapes" rel="nofollow">this example here from Google's documentation</a>.</p>
  
  <p>What I expect to happen is in the <code>for loop</code>, using <code>center: new google.maps.LatLng(well.location.latitude, well.location.longitude)</code> would suffice to create the center points. However, that doesn't seem to work. Everything else is the same as the example (will modify later).</p>
  
  <p>I expected this to work because earlier in the example, I am able to use <code>$.each</code> to display markers using <code>field.location.latitude, field.location.longitude</code> which is essentially the same thing (or so I think).</p>
  
  <p>Can I not make circles within the <code>$.getJSON</code> function like I can with markers? Is it happening "out of sync"? I'm still trying to learn how to process async events.</p>
  
  <p><a href="http://jsfiddle.net/n4ye7eka/2/" rel="nofollow">Fiddle here.</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="http://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#map {
      border: 1px solid black;
      margin: 0 auto;
      width: 500px;
      height: 300px;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>var map;
  var mapProp;
  var url;
  var marker;
  var markers = [];
  var infoWindow;
  var wellCircle;
  
  function initMap() {
      mapProp = {
          center: new google.maps.LatLng(39.0, -105.782067),
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.TERRAIN
      };
      map = new google.maps.Map(document.getElementById("map"), mapProp);
      infoWindow = new google.maps.InfoWindow({
          content: "hello world"
      });
  };
  
  function addMarker(lat, lng) {
      marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat, lng),
          map: map
      });
      markers.push(marker);
      //console.log(markers);
  };
  $(document).ready(function() {
      url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&amp;$limit=500';
      initMap();
      $.getJSON(url, function(data) {
          //console.log(data);
          for (var i = 0; i &lt; data.length; i++) {
              //console.log(data[i].location.latitude + ", " + data[i].location.longitude);
          };
          $.each(data, function(i, field) {
              addMarker(field.location.latitude, field.location.longitude);
          });
          for (var well in data) {
              wellCircle = new google.maps.Circle({
                  strokeColor: '#FF0000',
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: '#FF0000',
                  fillOpacity: 0.35,
                  map: map,
                  center: new google.maps.LatLng(well.location.latitude,
                      well.location.longitude),
                  radius: 100000
              });
          };
      });
  });
  </code></pre>