CODEWITHSUNDEEP
javascriptc#google-mapsgoogle-maps-api-3
Krishna Mohan
Krishna Mohan

Reputation: 89

how to make geofencing in google maps with c#

i have created basic geo fencing i have added 2 markers and one circle in that map . i was trying to show if marker is out of the circle marker should visible in different color , so that we can understand object is out of geofence. how to change the color of marker or show different marker when marker is out of circle.LatLng1 is out of circle so i need to show Latlng1 in out of circle.

js fiddle link

https://jsfiddle.net/aoe4vf17/43/

code

    <body>
        <div id="map" style="width:1400px;height:800px"></div>
        <script>
            function toggleBounce() {
                alert("Asset 1");
                if (marker.getAnimation() !== null) {
                    marker.setAnimation(null);
                } else {
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            }
            function initMap() {
                var myLatLng = {  lat:17.446399, lng:78.383349};
                var myLatLng1 = { lat: 17.428888, lng: 78.384444 };

                var citymap = {
                    hyderabad: {
                        center: { lat: 17.446507, lng: 78.383033 },
                        population: 2714856
                    }
                };
                var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 18,
                center: myLatLng,
                });
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 14,
                    center: myLatLng1
                });
  var image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: 'Asset 1',
                animation: google.maps.Animation.DROP,

            });
            marker.addListener('click', toggleBounce);

        var marker = new google.maps.Marker({
            position: myLatLng1,
            map: map,
            title: 'Hello World!',
             icon:image
        });

            for (var city in citymap) {
                // Add the circle for this city to the map.
                var cityCircle = new google.maps.Circle({
                    strokeColor: '#ffb3b3',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#ffb3b3',
                    fillOpacity: 0.35,
                    map: map,
                    center: citymap[city].center,
                    radius: Math.sqrt(citymap[city].population) * 1
                });
            }
          }
        </script>
        <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDci4vYApOxVdKqwlpXSv9h77AcWbNuzmQ&callback=initMap">
        </script>
    </body>

Upvotes: 0

Views: 1926

Answers (1)

ReyAnthonyRenacia
ReyAnthonyRenacia

Reputation: 17631

Here are the concepts you have to know:

  1. Adding event listeners to a marker.
  2. Using getBounds().contains

Here's the full working code. When you drop the marker outside the circle, it will change it's icon. When you place it back inside the circle, it will go back to it's default icon image.

The important bits I added were the logic and the listener:

          marker.addListener('dragend', function() {
            if( cityCircle.getBounds().contains( marker.getPosition()) == false ){

               marker.setIcon(iconBase + 'library_maps.png');
            }else{
               marker.setIcon("");
            }

Upvotes: 1

Related Questions