CODEWITHSUNDEEP
javascriptgoogle-mapsgeometry
user1603136
user1603136

Reputation:

Google Maps API in Javascript, Draw the radius of a circle?

I am looking for a way to draw the radius of the circle or a line from the center of the circle to the edge of the circle (at a precise coordinate in degrees).

Is it possible? How?

Currently, I drew a circle with the API from the center of my map. I do not think it helps ...

Example of what I would : http://twitpic.com/aq40vv

var sunCircle = {
          strokeColor: "#c3fc49",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#c3fc49",
          fillOpacity: 0.35,
          map: map,
          center: latlng,
          radius: 1500
        };
        cityCircle = new google.maps.Circle(sunCircle)

Upvotes: 8

Views: 23686

Answers (3)

Kelly O'blair
Kelly O'blair

Reputation: 31

I agree with @The Alpha

        // The marker
        var marker = new google.maps.Marker({
            position: startLatLng,
            map: map,
            icon: './img/marker.png'
        });

        var circle = {
            center: startLatLng,
            map: map,
            strokeColor: "#F26836",
            strokeOpacity: 0.2,
            strokeWeight: 2,
            fillColor: "#322F6A",
            fillOpacity: 0.2,
            radius: 50 // in meters
        };

        mapCircle = new google.maps.Circle(circle)
        mapCircle.bindTo('center', marker, 'position');

Upvotes: 1

The Alpha
The Alpha

Reputation: 146269

Try this (Not sure if this is what you asked for)

HTML:

<div id="map_canvas"></div>​

JS:

var map;
var latlng = new google.maps.LatLng(-34.397, 150.644);
function initialize() {
    var mapOptions = {
        center: latlng,
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var el=document.getElementById("map_canvas");
    map = new google.maps.Map(el, mapOptions);

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

    var sunCircle = {
        strokeColor: "#c3fc49",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#c3fc49",
        fillOpacity: 0.35,
        map: map,
        center: latlng,
        radius: 15000 // in meters
    };
    cityCircle = new google.maps.Circle(sunCircle)
    cityCircle.bindTo('center', marker, 'position');
}
initialize();

DEMO.

Reference : Here and also this could be useful.

Upvotes: 10

lccarrasco
lccarrasco

Reputation: 2051

The perfect thing for this is the computeOffset(from:LatLng, distance:number, heading:number, radius?:number) function from the google.maps.geometry.spherical namespace, as referenced in the documentation

From there on just create a polyline from the center of the circle with the radius of itself as the offset, you can check a quick example I made here (just click around the map to see it working)

Upvotes: 3

Related Questions