Google Maps & Google Places powered search

by andyjh07

HTML

<fieldset>
	<input type="text" id="pac-input">
	<button id="clearPlaceSearch">Clear Search</button>
</fieldset>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key={API_KEY}&libraries=geometry,places&callback=initMap" async defer></script>

CSS

body { padding: 0; margin: 0; height:100vh; }

fieldset { width: 100%; padding: 0; margin: 0; display: flex; border: none; }

input { width:100%; padding: 1rem 0.5rem; outline: none; border: none; }

button { outline: none; border: none; background-color: #dc176d; color: white; min-width: 200px; cursor: pointer; }

#map {
	/* display: none; */
	width: 100%;
	min-height: 600px;
	height: calc(100% - 52px);
}

JavaScript

/* Map Setup */
let map;
let searchMarker;
let autocomplete;
let reducedMarkers = [];
let markers = [];
let searchRadiusMiles = 2;
let searchRadiusMetres = parseInt(searchRadiusMiles * 1609);

const centerLat = 51.5285582;
const centerLng = -0.2416797;

const autocompleteInput = document.getElementById("pac-input");

const autocompleteOptions = {
	componentRestrictions: {
		country: "gb"
	},
	fields: ["address_components", "geometry", "icon", "name"],
	strictBounds: false,
};

const offices = [
	{
		title: "Warwick House",
		propertyID: 5290,
		lat: 51.4986304,
		lng: -0.1432421,
	},
	{
		title: "Metal Box Factory",
		propertyID: 2526,
		lat: 51.5045827,
		lng: -0.0970634,
	},
	{
		title: "69 Old Street",
		propertyID: 5283,
		lat: 51.524282,
		lng: -0.0983285,
	},
	{
		title: "Oru Space",
		propertyID: 4699,
		lat: 51.4599285,
		lng: -0.0776265,
	},
	{
		title: "77 Marsh Wall",
		propertyID: 3801,
		lat: 51.5006401,
		lng: -0.0187676,
	},
	{
		title: "The Phoenix Brewery",
		propertyID: 3522,
		lat: 51.5120546,
		lng: -0.2195285,
	},
	{
		title: "33 Boundary Street",
		propertyID: 3517,
		lat: 51.5257774,
		lng: -0.078922,
	},
	{
		title: "18 Wenlock Road",
		propertyID: 3512,
		lat: 51.530724,
		lng: -0.0959067,
	},
	{
		title: "1 King William Street",
		propertyID: 3141,
		lat: 51.512391,
		lng: -0.0906462,
	},
];

document.getElementById("clearPlaceSearch").addEventListener("click", function() {
	resetSearch();
});

function initMap() {
	map = new google.maps.Map(document.getElementById("map"), {
		center: {
			lat: centerLat,
			lng: centerLng
		},
		zoom: 12,
	});

	// Place initial marker for search location
	searchMarker = new google.maps.Marker({
		position: new google.maps.LatLng(centerLat, centerLng),
		title: "Search Radius",
		icon: {
			path: google.maps.SymbolPath.CIRCLE,
			scale: 0
		},
		map,
	});

	var circle = new google.maps.Circle({
		map,
		radius: searchRadiusMetres,    // 10 miles in metres
		strokeColor: "#dc176d",
		strokeOpacity:...