Create a marker on the edge of a circle using jQuery/Javascript/GM

I have a circle called “influence”, I want to create a marker on the edge of the circle. I can’t think of any way of doing it.

My circle is setup like this –

var influenceOptions = {
    strokeColor: "#00CC00",
    strokeOpacity: 0.7,
    strokeWeight: 0.5,
    fillColor: "#00CC00",
    fillOpacity: 0.35,
    map: map,
    center: latlng,
    radius: 30
};
influence = new google.maps.Circle(influenceOptions);

How would I create a marker at a random point on the of that circle?

Update: http://jsfiddle.net/jArU2/4/

How would I add a new marker to the edge of this circle?

Answer

Use

  1. Math.random()* 360 to get a random heading
  2. Use google.maps.Circle.getRadius to get the radius of the circle
  3. Use google.maps.geometry.spherical.computeOffset to compute a point at the random heading on the circle. Note: this requires including the geometry library
  4. Make your map variable global so it all works

updated fiddle

function addInfluence(latlng){
    you = new google.maps.Marker({
                                 map: map,
                                 position: latlng,
                                 });
    
    var influenceOptions = {
      strokeColor: "#00CC00",
      strokeOpacity: 0.7,
      strokeWeight: 0.5,
      fillColor: "#00CC00",
      fillOpacity: 0.35,
      map: map,
      center: latlng,
      radius: 3000
    };
    influence = new google.maps.Circle(influenceOptions);
    var bearing = Math.random()*360;
    var newPoint = google.maps.geometry.spherical.computeOffset(latlng,influence.getRadius(), bearing);
    var marker2 = new google.maps.Marker({map:map, position:newPoint});
    map.fitBounds(influence.getBounds());
}

enter image description here

code snippet:

var map;
jQuery(document).ready(function() {
  var latlng = new google.maps.LatLng(40.747688, -74.004142);

  var options = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map($('#map')[0], options);

  addInfluence(latlng);
});

function addInfluence(latlng) {
  you = new google.maps.Marker({
    map: map,
    position: latlng,
  });

  var influenceOptions = {
    strokeColor: "#00CC00",
    strokeOpacity: 0.7,
    strokeWeight: 0.5,
    fillColor: "#00CC00",
    fillOpacity: 0.35,
    map: map,
    center: latlng,
    radius: 3000
  };
  influence = new google.maps.Circle(influenceOptions);
  var bearing = Math.random() * 360;
  var newPoint = google.maps.geometry.spherical.computeOffset(latlng, influence.getRadius(), bearing);
  var marker2 = new google.maps.Marker({
    map: map,
    position: newPoint
  });
  map.fitBounds(influence.getBounds());
}
#map {
  height: 100%;
  width: 100%;
}

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>

<div id="map"></div>