CODEWITHSUNDEEP
javascripthtml
hikoo
hikoo

Reputation: 537

How to draw circle around marker given radius in google map api

I created map with the help of google map api. I want to draw the circle around marker given kilometer. Input only given by user. I have to textbox, one for given place another one for given kilometer and one button. I did place the marker for given place while click search button.But,I don't know how to draw circle around marker.

Please anyone help me!

Here my code:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
        html, body, #map-canvas
        {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        .controls
        {
            margin-top: 16px;
            border: 1px solid transparent;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 32px;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            background-color: #fff;
            padding: 0 11px 0 13px;
            width: 400px;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            text-overflow: ellipsis;
        }

     

        #type-selector
        {
            color: #fff;
            background-color: #4d90fe;
            padding: 5px 11px 0px 11px;
        }

        #type-selector label
        {
            font-family: Roboto;
            font-size: 13px;
            font-weight: 300;
        }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script>
        var map;

        function initialize() {
            var myLatlng = new google.maps.LatLng(13.0839, 80.2700);
            var mapOptions = {
                zoom: 7,
                center: myLatlng
            }
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            autocomplete();
        }

        var autocomplete;
        var marker;
        function autocomplete() {
            var source = document.getElementById('start');

            autocomplete = new google.maps.places.Autocomplete(source);
            autocomplete.bindTo('bounds', map);

                marker = new google.maps.Marker({
                map: map,
                anchorPoint: new google.maps.Point(0, -29)
            });


        }


        function calcRoute() {
            marker.setVisible(false);
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                window.alert("Autocomplete's returned place contains no geometry");
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);

            } else {

                map.setCenter(place.geometry.location);
                map.setZoom(17);  // Why 17? Because it looks good.
            }

            marker.setPosition(place.geometry.location);
            marker.setVisible(true);

        }


        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>

<div id="panel">
    <b>Search: </b>

    <input id="start" class="controls" type="text"
           placeholder="Enter a search location">

    <input id="radius" class="controls" type="text"
           placeholder="Enter km">

   <input type="button" value="Search" onclick="calcRoute();">

</div>
<div id = "map-canvas"> </div>
</body>
</html>

Thanks in advance!!

Upvotes: 2

Views: 4619

Answers (2)

Shekhar Chikara
Shekhar Chikara

Reputation: 3822

You can use the Circle options in Google Maps API like follows-

var circleRadius = ($('#radius').val()*1000);
if(geoCircle) {  //If the circle is already created and visible on map.
    geoCircle.setRadius(circleRadius);
    geoCircle.setCenter(marker.getPosition());
} else {    //Circle not initalized yet, so initialize and display.
    var circleOptions = {
        strokeColor: 'blue',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: 'blue',
        fillOpacity: 0.35,
        map: map, //pass the map object to show on the map.
        center: marker.getPosition(), //or you can pass a google.maps.LatLng object
        radius:parseInt(circleRadius) //radius of the circle in metres
    };
    geoCircle = new google.maps.Circle(geoCircleOptions);
}

EDIT: Define the geoCircle variable outside the calcRoute function and then add the above code to your calcRoute() function after the marker.setVisible(true); line. I have updated the code to get the radius value from the #radius field.

Hope this helps!

Upvotes: 1

pavanjoshi
pavanjoshi

Reputation: 240

Easy way for this is the computeOffset(from:LatLng, distance:number, heading:number, radius?:number) function from the google.maps.geometry.spherical namespace, refer this

Then you draw a polyline with centre, draw a normal circle code with radius as this offset.

Upvotes: 0

Related Questions