CODEWITHSUNDEEP
javascriptgoogle-maps
user2136160
user2136160

Reputation: 245

How to get an alert when marker is out from the given area

I`m new to google maps and i want to get and alert when the mark is not the given area, i have already created the map and i have added a circle to represent the area that marker can allow to move,

enter image description here

here is my code

<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">


    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
    <script type="text/javascript">

        // Basic Variables
        var map, marker, myLatlng;
        var Location;
        var LAT = 6.9342150;
        var LONG = 79.8919810;



        function loadMap() {

            myLatlng = new google.maps.LatLng(LAT, LONG);
            var mapOptions = {
                zoom: 14,
                center: myLatlng
            }
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
            });


            // To add the marker to the map, use the 'map' property


            marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                // This allows me to drag the mark through map
                draggable: true,
                // Bounce the marker when it adds to the Map
                animation: google.maps.Animation.DROP,
                title: "Hello World!"


            });

         var CicleOption = {
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: myLatlng,
                radius: 1000
            };

            new google.maps.Circle(CicleOption);

            // To add the marker to the map, call setMap();
            marker.setMap(marker);


        }
    </script>
</head>
<body onload="loadMap()">
    <div id="map-canvas" style="height:350px;"></div>
</body>

I want to get an alert when marker goes out from the circle,

Marker is draggable

Thank you.

Upvotes: 1

Views: 1835

Answers (1)

Blauharley
Blauharley

Reputation: 4256

I have a solution for you, watch the lines 65 to 77. When the marker is placed outside the circle then it is moved to the middle of the circle again plus the map is centered again.

<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">


    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
    <script type="text/javascript">

        // Basic Variables
        var map, marker, myLatlng;
        var Location;
        var LAT = 6.9342150;
        var LONG = 79.8919810;

        function loadMap() {

            myLatlng = new google.maps.LatLng(LAT, LONG);
            var mapOptions = {
                zoom: 14,
                center: myLatlng
            }
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
            });


            // To add the marker to the map, use the 'map' property


            marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                // This allows me to drag the mark through map
                draggable: true,
                // Bounce the marker when it adds to the Map
                animation: google.maps.Animation.DROP,
                title: "Hello World!"


            });

         var CicleOption = {
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: myLatlng,
                radius: 1000
            };

            new google.maps.Circle(CicleOption);

            // To add the marker to the map, call setMap();
            marker.setMap(map);


            // THIS IS ADDED

            google.maps.event.addListener(marker,'dragend',function(event) {

            var currPos = new google.maps.LatLng(event.latLng.k, event.latLng.B);

              var dist = getDistance(currPos, CicleOption.center);

              if(dist > CicleOption.radius){
                 alert('Marker is outside');
                 marker.setPosition(CicleOption.center);
                 map.setCenter(CicleOption.center);
              }

            });

        }

        var rad = function(x) {
          return x * Math.PI / 180;
        };

        var getDistance = function(p1, p2) {
          var R = 6378137; // Earth’s mean radius in meter
          var dLat = rad(p2.lat() - p1.lat());
          var dLong = rad(p2.lng() - p1.lng());
          var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) *
            Math.sin(dLong / 2) * Math.sin(dLong / 2);
          var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
          var d = R * c;
          return d; // returns the distance in meter
        };

    </script>
</head>
<body onload="loadMap()">
    <div id="map-canvas" style="height:350px;"></div>
</body>

Furthermore you can check this by using google-maps-lib:

var cirlce = new google.maps.Circle(options);
var bounds = circle.getBounds();

var currPos = new google.maps.LatLng(lat, lng);
bounds.contains(currPos);

The method contains return a boolean that indicates whether point(currPos) is within circle.

Here is a example of this: http://jsfiddle.net/kaiser/wzcst/

Upvotes: 1

Related Questions