Google Maps - Create GeoFence Polygon from Point
JS
S
JavaScript1) Use the buffer function to draw a circle around your point. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing,geometry"></script>
1 // declare variables that will be used in this example
2 var myMap; // holds the map object
3 var centerpoint; // center point of the map
4 var markers = []; // array to hold markers
5 var kmRadius = 20; // draw 20 km radius
6
7 /**
8 * Initialization function that sets up the map
9 */
10 function initialize() {
11 // build the map's center poiint
12 centerpoint = new google.maps.LatLng(45.00495,-90.00052);
13
14 // assign map the options of zoom, center point and set the map to
15 // SATELLITE
16 var mapOptions = {
17 zoom: 10,
18 center: centerpoint
19 };
20
21 // on our web page should be a <div> or <p> tag with id map-canvas
22 // show the map in that element with the options listed above
23 myMap = new google.maps.Map(
24 document.getElementById('map-canvas'),
25 mapOptions
26 );
27
28 // add listener
29 google.maps.event.addDomListener(
30 myMap,
31 'click',
32 function(event) { createMarker(event.latLng); }
33 );
34 }
35
36 /**
37 * Create a marker when map is clicked
38 */
39 function createMarker(coord) {
40 var pos = new google.maps.LatLng(coord.lat(), coord.lng());
41 var marker = new google.maps.Marker({
42 position: pos,
43 map: myMap
44 });
45 markers.push(marker);
46
47 marker = new google.maps.Circle({
48 center: pos,
49 map: myMap,
50 strokeColor: '#000',
51 strokeWeight: 2,
52 strokeOpacity: 0.5,
53 fillColor: '#f0f0f0',
54 fillOpacity: 0.5,
55 radius: kmRadius * 1000
56 });
57 markers.push(marker);
58 }
59Created on 12/9/2022