title: how to make geofencing in google maps with c#
body: <p>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.</p>
  
  <p>js fiddle link </p>
  
  <p><a href="https://jsfiddle.net/aoe4vf17/43/" rel="nofollow noreferrer">https://jsfiddle.net/aoe4vf17/43/</a></p>
  
  <p>code</p>
  
  <pre><code>    &lt;body&gt;
          &lt;div id="map" style="width:1400px;height:800px"&gt;&lt;/div&gt;
          &lt;script&gt;
              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
                  });
              }
            }
          &lt;/script&gt;
          &lt;script async defer
                  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDci4vYApOxVdKqwlpXSv9h77AcWbNuzmQ&amp;callback=initMap"&gt;
          &lt;/script&gt;
      &lt;/body&gt;
  </code></pre>