Skip to content Skip to sidebar Skip to footer

Draw Dotted Circle On Google Maps Using Javascript

I am new to google maps api I don't know how to create dotted circle on google maps. I have created circle on google maps using the following code circle = new google.maps.Circle({

Solution 1:

Here is the code for the dotted polyline, You can have a try for something similar for a circle

 // Define a symbol using SVG path notation, with an opacity of 1.
    var lineSymbol = {
      path: 'M 0,-1 0,1',
      strokeOpacity: 1,
      scale: 4
    };

    // Create the polyline, passing the symbol in the 'icons' property.
    // Give the line an opacity of 0.
    // Repeat the symbol at intervals of 20 pixels to create the dashed effect.
    var line = new google.maps.Polyline({
      path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
      strokeOpacity: 0,
      icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '20px'
      }],
      map: map
    });

Post a Comment for "Draw Dotted Circle On Google Maps Using Javascript"