Drawing a circle with Dashed border and should be filled with color , in google maps

Question

I am trying to draw a circle with a dashed border in google maps.

I have a function draw circle which return me the sets of lat,lngs and I use google maps polygon API for the drawing of a circle, but the border comes as a joint line, not a dashed one.

Any idea ?
I am posting my code for reference :

function drawCircle(point, radius, dir) {
    var d2r = Math.PI / 180;   // degrees to radians
    var r2d = 180 / Math.PI;   // radians to degrees
    var earthsradius = 3963; // 3963 is the radius of the earth in miles

    var points = 32;

    // find the raidus in lat/lon
    var rlat = (radius / earthsradius) * r2d;
    var rlng = rlat / Math.cos(point.lat() * d2r);

    var extp = new Array();
    if (dir === 1) {
        var start = 0;
        var end = points + 1; // one extra here makes sure we connect the path
    } else {
        var start = points + 1;
        var end = 0;
    }
    for (var i = start; (dir === 1 ? i < end : i > end); i = i + dir)
    {
        var theta = Math.PI * (i / (points/2));
        ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
        ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
        extp.push(new google.maps.LatLng(ex, ey));
    }
    return extp;
}

var lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4
};

var circle = new google.maps.Polygon({
                                          path: drawCircle(new google.maps.LatLng
                                                           (center.latitude,
                                                            center.longitude),
                                                           radius/1609.344, 1),
                                          strokeOpacity: 0.5,
                                          icons: [{
                                                  icon: lineSymbol,
                                                  offset: '0',
                                                  repeat: '20px'
                                              }],
                                          strokeWeight: 2,
                                          strokeColor: '#ffcb00',
                                          fillColor: '#ffcb00',
                                          fillOpacity: 0.1
                                      });

return circle ;

See http://www.geocodezip.com/v3_polygon_example_circle_dashed.html and https://stackoverflow.com/questions/45188229/draw-dotted-circle-on-google-maps-using-javascript using polyline — Brett Gregson, Oct 05 '18 at 10:35
i have seen this solution , this doesnt fill the color inside . @BrettGregson — Vikrant singh, Oct 05 '18 at 10:36
Then draw a Circle (without border), and the Polyline above your Circle. — MrUpsidown, Oct 05 '18 at 10:46
trying to figure out the right way instead of hard way . @MrUpsidown — Vikrant singh, Oct 05 '18 at 10:47
Well you can't use `icons` with the Polygon or Circle classes (check the documentation). So I don't really see any other way than to draw a circle (for your background) and draw the dotted Polyline above it. — MrUpsidown, Oct 05 '18 at 11:05
The [Polygon class](https://developers.google.com/maps/documentation/javascript/reference/polygon#PolygonOptions) doesn't support dashed borders. Do what @MrUpsidown suggested ([fiddle](http://jsfiddle.net/geocodezip/gtdrs2op/)). — geocodezip, Oct 05 '18 at 11:06

MrUpsidown · Accepted Answer · 2021-10-26T09:04:32.013

An example implementation:

function initialize() {

  var myLatLng = new google.maps.LatLng(0, 0);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var radius = 500000;

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map
  });

  var lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4
  };

  var circlePoly = new google.maps.Polyline({
    path: drawCircle(myLatLng,
      radius / 1609.344, 1),
    strokeOpacity: 0,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '20px'
    }],
    strokeWeight: 2,
    strokeColor: 'red',
    fillColor: '#ffcb00',
    fillOpacity: 0.1,
    map: map
  });

  var circle = new google.maps.Circle({
    strokeWeight: 0,
    fillColor: 'yellow',
    fillOpacity: .5,
    map: map,
    center: myLatLng,
    radius: radius
  });
}

function drawCircle(point, radius, dir) {
  var d2r = Math.PI / 180; // degrees to radians
  var r2d = 180 / Math.PI; // radians to degrees
  var earthsradius = 3963; // 3963 is the radius of the earth in miles

  var points = 32;

  // find the raidus in lat/lon
  var rlat = (radius / earthsradius) * r2d;
  var rlng = rlat / Math.cos(point.lat() * d2r);

  var extp = new Array();
  if (dir === 1) {
    var start = 0;
    var end = points + 1; // one extra here makes sure we connect the path
  } else {
    var start = points + 1;
    var end = 0;
  }
  for (var i = start;
    (dir === 1 ? i < end : i > end); i = i + dir) {
    var theta = Math.PI * (i / (points / 2));
    ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
    ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
    extp.push(new google.maps.LatLng(ex, ey));
  }
  return extp;
}


initialize();

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

In the same idea, using SymbolPath for the dashed border ("dotted" would be more appropriate) I find the rendering to be better...

function initialize() {

  var myLatLng = new google.maps.LatLng(0, 0);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var radius = 500000;

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map
  });

  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 2
  };

  var circlePoly = new google.maps.Polyline({
    path: drawCircle(myLatLng,
      radius / 1609.344, 1),
    strokeOpacity: 0,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '10px'
    }],
    strokeWeight: 2,
    strokeColor: 'red',
    fillColor: '#ffcb00',
    fillOpacity: 0.1,
    map: map
  });

  var circle = new google.maps.Circle({
    strokeWeight: 0,
    fillColor: 'yellow',
    fillOpacity: .5,
    map: map,
    center: myLatLng,
    radius: radius
  });
}

function drawCircle(point, radius, dir) {
  var d2r = Math.PI / 180; // degrees to radians
  var r2d = 180 / Math.PI; // radians to degrees
  var earthsradius = 3963; // 3963 is the radius of the earth in miles

  var points = 32;

  // find the raidus in lat/lon
  var rlat = (radius / earthsradius) * r2d;
  var rlng = rlat / Math.cos(point.lat() * d2r);

  var extp = new Array();
  if (dir === 1) {
    var start = 0;
    var end = points + 1; // one extra here makes sure we connect the path
  } else {
    var start = points + 1;
    var end = 0;
  }
  for (var i = start;
    (dir === 1 ? i < end : i > end); i = i + dir) {
    var theta = Math.PI * (i / (points / 2));
    ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
    ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
    extp.push(new google.maps.LatLng(ex, ey));
  }
  return extp;
}


initialize();

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Drawing a circle with Dashed border and should be filled with color , in google maps

1 Answers1