title: Error at rendering circles - Google Maps Javascript
body: <p>I'm developing a web app which has a map and where the user can set circles wherever he wants. Then he can see every circle he has set. </p>
  
  <p>But when I load the circles that the user has, this happens: 
  <a href="https://i.stack.imgur.com/w7VkO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w7VkO.png" alt="Oops!"></a></p>
  
  <p>The user that I´m using to test has 5 circles, the ones that appear complete. The rest is junk that just appears there and I´m not sure why. </p>
  
  <p>This is my code (I´m using RoR): </p>
  
  <p>Javascript: </p>
  
  <pre><code>function initMap() {
  
    var mapOptions = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };
  
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
  
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
  
        var marker = new google.maps.Marker({
            position: pos,
            map: map,
            icon: "&lt;%= asset_path('marker.png') %&gt;"
          });
  
        map.setCenter(pos);
  
      }, function(e) {
        console.log(e);
      });
    }
  }
  
  function loadUserTargets() {
    $.getJSON('/circles/list', function(circlesList) {
      if(circlesList.length &gt; 0) {
        jQuery.each(circlesList, function(index, circle){
          var circleCenter = new google.maps.LatLng(circle.latitude, circle.longitude);
          drawCircleAt(circleCenter, circle.radius);
        });
      }
    });
  }
  
  function drawCircleAt(location, radius) {
  
    return new google.maps.Circle({
      strokeWeight: 0,
      fillColor: '#efc537',
      fillOpacity: 0.7,
      map: map,
      center: location,
      radius: radius
    });
  }
  </code></pre>
  
  <p>When I call getJSON('/circles/list', ...) I get the following in return:</p>
  
  <pre><code>[{"id":4,"latitude":-34.9001517737747,"longitude":-56.1877727508545,"radius":456},
  {"id":5,"latitude":-34.8983567053717,"longitude":-56.1922359466553,"radius":367},
  {"id":6,"latitude":-34.9032138587385,"longitude":-56.1949396133423,"radius":100},
  {"id":7,"latitude":-34.9053255749513,"longitude":-56.2041234970093,"radius":200},
  {"id":8,"latitude":-34.9103230869756,"longitude":-56.18408203125,"radius":500}]
  </code></pre>
  
  <p>Does anybody know what´s going on?</p>
  
  <p>Thanks!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This bug was handled in the isssue <a href="https://issuetracker.google.com/issues/38211242" rel="nofollow noreferrer">https://issuetracker.google.com/issues/38211242</a>.
  It was fixed in August 2017.</p>