Google Map Show Marker inside Radius data form JSON

Question

I'm Following this link which help a lot but while i'm applying coordinates form JSON data page in not responding.

While applying Random Lat Lng its work but apply real JSON data it makes browser Crash and unresponsive!

google.maps.geometry.spherical.computeDistanceBetween calculate distance, JSON data accessible inside the function still the browser get unresponsive while JSON data is being Applied.

if (document.getElementById('map2')) {

    var map;
    var m = '';
    var url = '/data';


  // Coordinates to center the map
  var myLatlng = new google.maps.LatLng( 26.2124, 127.6809 );

  // Other options for the map, pretty much selfexplanatory
  var mapOptions = {
    zoom: 13,
    center: myLatlng,
    // mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  // Attach a map to the DOM Element, with the defined settings
  var map = new google.maps.Map(document.getElementById("map2"), mapOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: myLatlng
  });
  var circle = new google.maps.Circle({
    map: map,
    radius: 2500,
    fillColor: '#AA0000',
    fillOpacity: 0.15,
    strokeWeight: 0.9,
    position: myLatlng
  });
  circle.bindTo('center', marker, 'position');

  var circleBounds = circle.getBounds();

    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            m = data;
            console.log(m.length);
            for (var i = 0; i < m.length; i++) {
                var marker = generateMarkerInCircleRadius(circleBounds, m[i].latitude, m[i].longitude);
                marker.setMap(map);
          }
        }

    });

  function generateMarkerInCircleRadius(boundries, lati, lngi) {
    var marker = new google.maps.Marker();
    marker.setPosition(new google.maps.LatLng(returnLat(lati), returnLng(lngi)));

    while (!isMarkerInRadius(marker, circle)) {
      var
        ne = boundries.getNorthEast(),
        sw = boundries.getSouthWest(),
        // lat = randomFloat(ne.lat(), sw.lat()),
        // lng = randomFloat(ne.lng(), sw.lng());
        lat = returnLat(lati),
        lng = returnLng(lngi);

      marker.setPosition(new google.maps.LatLng(lat, lng));
    }
    return marker;
  }

  function randomFloat(min, max) {
    return Math.random() * (max - min) + min;
  }

  function returnLat(data) {
    return Number(data);
  }
  function returnLng(data) {
    return Number( data );
  }

  function isMarkerInRadius(marker, circle) {
    return google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), myLatlng) <= circle.getRadius();
  }
}

<div id="map2" style="height: 500px; width: 100%;"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=false" type="text/javascript"></script>

Answer 1

Achived Via:

if (document.getElementById('map2')) {

    var map;
    var m = '';
    var url = '/data';


  // Coordinates to center the map
  var myLatlng = new google.maps.LatLng( 26.2124, 127.6809 );

  // Other options for the map, pretty much selfexplanatory
  var mapOptions = {
    zoom: 13,
    center: myLatlng,
    // mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  // Attach a map to the DOM Element, with the defined settings
  var map = new google.maps.Map(document.getElementById("map2"), mapOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: myLatlng
  });
  var circle = new google.maps.Circle({
    map: map,
    radius: 1500,
    fillColor: '#AA0000',
    fillOpacity: 0.15,
    strokeWeight: 0.9,
    position: myLatlng
  });
  circle.bindTo('center', marker, 'position');

  var circleBounds = circle.getBounds();

    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            m = data;
            console.log(m.length);
            for (var i = 0; i < m.length; i++) {
                var marker = generateMarkerInCircleRadius(circleBounds, m[i].latitude, m[i].longitude);
                // marker.setMap(map);        
          }
        }

    });

  function generateMarkerInCircleRadius(boundries, lati, lngi) {
    var marker = new google.maps.Marker();
    marker.setPosition(new google.maps.LatLng(returnLat(lati), returnLng(lngi)));

    if (google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(returnLat(lati), returnLng(lngi)), myLatlng) <= circle.getRadius()) {
      // bounds.extend(new google.maps.LatLng(m[i].latitude, m[i].longitude))
        marker.setMap(map);        
      // return marker;
    } else {
        marker.setMap(null);
    }

  }

  function randomFloat(min, max) {
    return Math.random() * (max - min) + min;
  }

  function returnLat(data) {
    return Number(data);
  }
  function returnLng(data) {
    return Number(data);
  }
}