javascript - Want to create a geofence for google map. How to draw on the map to select geofence?

I have been working on creating geofence in google map. I have created a form where user can put latitude and longitude. Now I want to show that particular selected part in the map. Once the user put the value and press "create geofence", it should show the given range on the map. Please help me to create a geofence on the map after putting latitude and longitude value on the form.

Below is the link of JSFiddle for geofence. 

/

Below is the link of JSFiddle for geofence. 

http://jsfiddle/h0abau2q/

Share Improve this question edited Oct 12, 2015 at 12:20 asked Oct 12, 2015 at 9:09 shumana chowdhury 1,8822 gold badges16 silver badges34 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

Try below code (don't forget to edit YOUR_API_KEY in HTML):

var myOptions = {
  zoom: 11,
  center: new google.maps.LatLng(36.236797, -112.956333),
  disableDefaultUI: true,
  mapTypeId: 'terrain'
}

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

var drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: google.maps.drawing.OverlayType.CIRCLE,
  drawingControl: true,
  drawingControlOptions: {
    drawingModes: [
      google.maps.drawing.OverlayType.CIRCLE
    ]
  },
  circleOptions: {
    fillColor: '#ffff00',
    fillOpacity: 1,
    strokeWeight: 5,
    clickable: false,
    editable: true,
    zIndex: 1
  }
});
drawingManager.setMap(map);


google.maps.event.addDomListener(map, 'tilesloaded', function() {
  if ($('#newPos').length == 0) {
    $('div.gmnoprint').last().wrap('<div id="newPos" />');
    $('div.gmnoprint').fadeIn(500);
  }
});

var setPos = function() {
  google.maps.event.trigger(map, 'tilesloaded');
};

window.setTimeout(setPos, 1000);

#map {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}

#logo {

  position: absolute;
  padding: 10px;
  width: 200px;
  font-size: 24px;
  background-color: rgba(255, 255, 255, 0.9);
  left: 50%;
  margin: 20px 0 0 -100px;
  text-align: center;
}

#newPos {
  position: absolute;
  left: 50%;
  margin: 14px 0 0 -135px;
}

.gmnoprint {
  display: none;
}

<!DOCTYPE html>
<html>
<body>

<h1>Google Map</h1>
<script src="https://maps.googleapis./maps/api/js?key=YOUR_API_KEY&libraries=drawing"></script>
<script
  src="https://code.jquery./jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

<div id="map"></div>

</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Want to create a geofence for google map. How to draw on the map to select geofence? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)