Google Maps - Create GeoFence Polygon from Point

JS
S
JavaScript

1) 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    }
59

Created on 12/9/2022