CODEWITHSUNDEEP
google-maps-api-3
ericlee
ericlee

Reputation: 2753

Google Map v3 Getting center of circle?

i'm using google v3 js and i am trying to get the center of the circle whenever the person drag the circle or expand the circle. currently i do not know any event that is able to tigger that

  <script type="text/javascript">

    var latt = 1.3738459931841047;
    var longg = 103.79745483398437;
    var radius = 1000;

    function alertame(lat, long) {
        document.getElementById("<%= lblLatitute.ClientID %>").textContent = lat;
        document.getElementById("<%= lblLongitude.ClientID %>").textContent = long;
        latt = lat;
        longg = long;
    }



    function show_alert() {
        alert(latt + "hello"+radius);
    }
    function initialize() {
        var myOptions = {
            center: new google.maps.LatLng(1.3738459931841047, 103.79745483398437),
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };



        var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

        var circleOptions = {
            center: new google.maps.LatLng(latt, longg),
            radius: radius,
            map: map,
            editable: true
        };
        var circle = new google.maps.Circle(circleOptions);
        google.maps.event.addListener(circle, 'radius_changed', function () {
            radius = circle.getRadius();

            alert("test");
        });
        google.maps.event.addListener(circle, 'drag', function () {

            alert("test");
        });
        circle.setMap(map);
    }




</script>



<style type="text/css">
    .style1
    {
        width: 124px;
    }
</style>

Upvotes: 0

Views: 10765

Answers (3)

Tom&#225;š Mleziva
Tom&#225;š Mleziva

Reputation: 539

In short:

var latitude =  circle.center.lat();
var longitude = circle.center.lng();

Upvotes: 1

formigarafa
formigarafa

Reputation: 376

I think you might be looking for the events center_changed and radius_changed.

You can find all available events on the events table of google.maps.Circle class documentation page.

Upvotes: 0

ericlee
ericlee

Reputation: 2753

Solved by using the below

<script type="text/javascript">

        var latt = 1.3738459931841047;
        var longg = 103.79745483398437;
        var radius = 1000;
        var marker;





        function show_alert() {
            alert(latt + "hello"+radius);
        }
        function initialize() {

     document.getElementById("<%= lblLatitute.ClientID %>").textContent = latt;

     document.getElementById("<%= lblLongitude.ClientID %>").textContent = longg;
        document.getElementById("<%= lblRadius.ClientID %>").textContent = radius;
            var myOptions = {
                center: new google.maps.LatLng(1.3738459931841047, 103.79745483398437),
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };



            var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

            var circleOptions = {
                center: new google.maps.LatLng(latt, longg),
                radius: radius,
                map: map,
                editable: true
            };
            var circle = new google.maps.Circle(circleOptions);
            google.maps.event.addListener(circle, 'radius_changed', function () {
                radius = circle.getRadius();
                latt = circle.getCenter().lat();
                longg = circle.getCenter().lng();
                    document.getElementById("<%= lblRadius.ClientID %>").textContent = radius;
            });

            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: new google.maps.LatLng(latt, longg),
            });

           circle.setMap(map);



             google.maps.event.addListener(marker, 'dragstart', function() {
   circle.setMap(null);
  });     


   google.maps.event.addListener(marker, 'dragend', function() {
   latt= marker.getPosition().lat();
   longg = marker.getPosition().lng();
      circle.setCenter(new google.maps.LatLng(latt, longg));

     document.getElementById("<%= lblLatitute.ClientID %>").textContent = latt;

     document.getElementById("<%= lblLongitude.ClientID %>").textContent = longg;
        circle.setMap(map);



  });


        }
        function toggleBounce() {



          }



    </script>

Upvotes: 2

Related Questions