malihassan20/gist:e99984ab972d2132bf199b2713c954bd

## gistfile1.txt
<!DOCTYPE html>
<html>

<head>
    <title>Google Maps Property Selector</title>
    <script
        src="https://maps.googleapis.com/maps/api/js?key={GOOGLE_MAP_API_KEY}&libraries=places,drawing,geometry"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <style>
        #map {
            height: 80vh;
            width: 100%;
        }

        #controls {
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="controls">
        <input type="text" name="zipCode" id="zipCode" placeholder="Enter ZIP code" />
        <button onclick="searchByZipCode()">Search</button>
        <button onclick="startPolygon()">Draw Polygon</button>
        <button onclick="startRadius()">Create Radius</button>
        <button onclick="downloadExcel()">Download Excel</button>
    </div>
    <div id="map"></div>

    <script>
        let map, drawingManager, selectedProperties = [], service, geocoder;

        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: 37.7749, lng: -122.4194 },
                zoom: 12
            });
            service = new google.maps.places.PlacesService(map);
            geocoder = new google.maps.Geocoder();

            google.maps.event.addListener(map, 'click', function (event) {
                fetchPropertyDetails(event.latLng);
            });
        }

        function searchByZipCode() {
            let zip = document.getElementById("zipCode").value;
            if (!zip) return;
            geocoder.geocode({ address: zip }, function (results, status) {
                if (status === "OK" && results[0]) {
                    let location = results[0].geometry.location;
                    map.setCenter(location);

                    let bounds = results[0].geometry.bounds;
                    if (bounds) {
                        fetchPropertiesInBounds(bounds);
                    } else {
                        console.warn("No bounding box found for this zip code. Expanding search.");
                        fetchPropertyDetails(location);
                    }
                } else {
                    console.error("Geocoding failed:", status);
                }
            });
        }

        function fetchPropertiesInBounds(bounds) {
            let ne = bounds.getNorthEast();
            let sw = bounds.getSouthWest();

            let stepLat = (ne.lat() - sw.lat()) / 10;  // Divide area into 10x10 grid
            let stepLng = (ne.lng() - sw.lng()) / 10;

            for (let i = 0; i <= 10; i++) {
                for (let j = 0; j <= 10; j++) {
                    let point = new google.maps.LatLng(sw.lat() + i * stepLat, sw.lng() + j * stepLng);
                    fetchPropertyDetails(point);
                }
            }
        }

        function fetchPropertyDetails(latLng) {
            geocoder.geocode({ location: latLng }, function (results, status) {
                if (status === "OK" && results[0]) {
                    let address = results[0].formatted_address;
                    let property = {
                        address: address,
                        lat: latLng.lat(),
                        lng: latLng.lng()
                    };
                    selectedProperties.push(property);
                    new google.maps.Marker({ position: latLng, map: map });
                }
            });
        }

        function startPolygon() {
            drawingManager = new google.maps.drawing.DrawingManager({
                drawingMode: google.maps.drawing.OverlayType.POLYGON,
                drawingControl: false,
                polygonOptions: { editable: true, fillColor: '#FF0000', fillOpacity: 0.5 }
            });
            drawingManager.setMap(map);
            google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
                drawingManager.setDrawingMode(null);
                findPropertiesInPolygon(event.overlay);
            });
        }

        function startRadius() {
            drawingManager = new google.maps.drawing.DrawingManager({
                drawingMode: google.maps.drawing.OverlayType.CIRCLE,
                drawingControl: false,
                circleOptions: { editable: true, fillColor: '#0000FF', fillOpacity: 0.3 }
            });
            drawingManager.setMap(map);
            google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
                drawingManager.setDrawingMode(null);
                findPropertiesInRadius(event.overlay);
            });
        }

        function findPropertiesInPolygon(polygon) {
            let bounds = new google.maps.LatLngBounds();
            polygon.getPath().forEach(point => bounds.extend(point));

            let ne = bounds.getNorthEast();
            let sw = bounds.getSouthWest();

            let stepLat = (ne.lat() - sw.lat()) / 10;  // Divide into 10 steps
            let stepLng = (ne.lng() - sw.lng()) / 10;

            for (let i = 0; i <= 10; i++) {
                for (let j = 0; j <= 10; j++) {
                    let point = new google.maps.LatLng(sw.lat() + i * stepLat, sw.lng() + j * stepLng);
                    if (google.maps.geometry.poly.containsLocation(point, polygon)) {
                        fetchPropertyDetails(point);
                    }
                }
            }
        }

        function findPropertiesInRadius(circle) {
            let center = circle.getCenter();
            let radius = circle.getRadius();

            let step = radius / 10;
            for (let i = 0; i <= 10; i++) {
                let angle = (i / 10) * 2 * Math.PI;
                let lat = center.lat() + (step * Math.cos(angle)) / 111320;
                let lng = center.lng() + (step * Math.sin(angle)) / (111320 * Math.cos(center.lat() * (Math.PI / 180)));
                fetchPropertyDetails(new google.maps.LatLng(lat, lng));
            }
        }

        function downloadExcel() {
            let wb = XLSX.utils.book_new();
            let ws = XLSX.utils.json_to_sheet(selectedProperties);
            XLSX.utils.book_append_sheet(wb, ws, "Properties");
            XLSX.writeFile(wb, "properties.xlsx");
        }

        window.onload = initMap;
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Google Maps Property Selector</title>
	<script
	src="https://maps.googleapis.com/maps/api/js?key={GOOGLE_MAP_API_KEY}&libraries=places,drawing,geometry"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
	<style>
	#map {
	height: 80vh;
	width: 100%;
	}

	#controls {
	margin: 10px;
	}
	</style>
	</head>

	<body>
	<div id="controls">
	<input type="text" name="zipCode" id="zipCode" placeholder="Enter ZIP code" />
	<button onclick="searchByZipCode()">Search</button>
	<button onclick="startPolygon()">Draw Polygon</button>
	<button onclick="startRadius()">Create Radius</button>
	<button onclick="downloadExcel()">Download Excel</button>
	</div>
	<div id="map"></div>

	<script>
	let map, drawingManager, selectedProperties = [], service, geocoder;

	function initMap() {
	map = new google.maps.Map(document.getElementById("map"), {
	center: { lat: 37.7749, lng: -122.4194 },
	zoom: 12
	});
	service = new google.maps.places.PlacesService(map);
	geocoder = new google.maps.Geocoder();

	google.maps.event.addListener(map, 'click', function (event) {
	fetchPropertyDetails(event.latLng);
	});
	}

	function searchByZipCode() {
	let zip = document.getElementById("zipCode").value;
	if (!zip) return;
	geocoder.geocode({ address: zip }, function (results, status) {
	if (status === "OK" && results[0]) {
	let location = results[0].geometry.location;
	map.setCenter(location);

	let bounds = results[0].geometry.bounds;
	if (bounds) {
	fetchPropertiesInBounds(bounds);
	} else {
	console.warn("No bounding box found for this zip code. Expanding search.");
	fetchPropertyDetails(location);
	}
	} else {
	console.error("Geocoding failed:", status);
	}
	});
	}

	function fetchPropertiesInBounds(bounds) {
	let ne = bounds.getNorthEast();
	let sw = bounds.getSouthWest();

	let stepLat = (ne.lat() - sw.lat()) / 10; // Divide area into 10x10 grid
	let stepLng = (ne.lng() - sw.lng()) / 10;

	for (let i = 0; i <= 10; i++) {
	for (let j = 0; j <= 10; j++) {
	let point = new google.maps.LatLng(sw.lat() + i * stepLat, sw.lng() + j * stepLng);
	fetchPropertyDetails(point);
	}
	}
	}

	function fetchPropertyDetails(latLng) {
	geocoder.geocode({ location: latLng }, function (results, status) {
	if (status === "OK" && results[0]) {
	let address = results[0].formatted_address;
	let property = {
	address: address,
	lat: latLng.lat(),
	lng: latLng.lng()
	};
	selectedProperties.push(property);
	new google.maps.Marker({ position: latLng, map: map });
	}
	});
	}

	function startPolygon() {
	drawingManager = new google.maps.drawing.DrawingManager({
	drawingMode: google.maps.drawing.OverlayType.POLYGON,
	drawingControl: false,
	polygonOptions: { editable: true, fillColor: '#FF0000', fillOpacity: 0.5 }
	});
	drawingManager.setMap(map);
	google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
	drawingManager.setDrawingMode(null);
	findPropertiesInPolygon(event.overlay);
	});
	}

	function startRadius() {
	drawingManager = new google.maps.drawing.DrawingManager({
	drawingMode: google.maps.drawing.OverlayType.CIRCLE,
	drawingControl: false,
	circleOptions: { editable: true, fillColor: '#0000FF', fillOpacity: 0.3 }
	});
	drawingManager.setMap(map);
	google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
	drawingManager.setDrawingMode(null);
	findPropertiesInRadius(event.overlay);
	});
	}

	function findPropertiesInPolygon(polygon) {
	let bounds = new google.maps.LatLngBounds();
	polygon.getPath().forEach(point => bounds.extend(point));

	let ne = bounds.getNorthEast();
	let sw = bounds.getSouthWest();

	let stepLat = (ne.lat() - sw.lat()) / 10; // Divide into 10 steps
	let stepLng = (ne.lng() - sw.lng()) / 10;

	for (let i = 0; i <= 10; i++) {
	for (let j = 0; j <= 10; j++) {
	let point = new google.maps.LatLng(sw.lat() + i * stepLat, sw.lng() + j * stepLng);
	if (google.maps.geometry.poly.containsLocation(point, polygon)) {
	fetchPropertyDetails(point);
	}
	}
	}
	}

	function findPropertiesInRadius(circle) {
	let center = circle.getCenter();
	let radius = circle.getRadius();

	let step = radius / 10;
	for (let i = 0; i <= 10; i++) {
	let angle = (i / 10) * 2 * Math.PI;
	let lat = center.lat() + (step * Math.cos(angle)) / 111320;
	let lng = center.lng() + (step * Math.sin(angle)) / (111320 * Math.cos(center.lat() * (Math.PI / 180)));
	fetchPropertyDetails(new google.maps.LatLng(lat, lng));
	}
	}

	function downloadExcel() {
	let wb = XLSX.utils.book_new();
	let ws = XLSX.utils.json_to_sheet(selectedProperties);
	XLSX.utils.book_append_sheet(wb, ws, "Properties");
	XLSX.writeFile(wb, "properties.xlsx");
	}

	window.onload = initMap;
	</script>
	</body>

	</html>
No results found