I have the following Google Maps API code which displays AdvancedMarkers markers on the map from a JSON list of postcodes. Then when a postcode is entered (for example "SP4") into the form it puts a custom purple marker onto the map and contimues to display all AdvancedMarkers/postcodes from the JSON list.
How can I display only the nearest 5 AdvancedMarkers/postcodes to the entered location/marker?
<!doctype html>
<html>
<head>
<title>Geocoding Service</title>
<script src="https://maps.googleapis.com/maps/api/js?key=API-KEY-GOES-HERE®ion=GB&libraries=geometry,marker&callback=initMap&v=weekly" defer async></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
width: 100%;
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
input[type=text] {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
line-height: 40px;
margin-right: 0;
min-width: 25%;
}
input[type=button] {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
height: 40px;
cursor: pointer;
margin-left: 5px;
}
input[type=button]:hover {
background: rgb(235, 235, 235);
}
input[type=button].button-primary {
background-color: #1a73e8;
color: white;
}
input[type=button].button-primary:hover {
background-color: #1765cc;
}
input[type=button].button-secondary {
background-color: white;
color: #1a73e8;
}
input[type=button].button-secondary:hover {
background-color: #d2e3fc;
}
#response-container {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
overflow: auto;
max-height: 50%;
max-width: 90%;
background-color: rgba(255, 255, 255, 0.95);
font-size: small;
}
#instructions {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
padding: 1rem;
font-size: medium;
}
</style>
</head>
<body>
<div>
<label for="postcodeInput">Enter Postcode</label>
<input type="text" id="postcodeInput">
<button id="submitButton" onclick="findNearestMarkers()">Submit</button>
</div>
<div id="map"></div>
<script>
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// @ts-nocheck TODO remove when fixed
let map;
let marker;
let markers = [];
let geocoder;
let jsonMapData;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
map = new Map(document.getElementById("map"), {
zoom: 6,
center: {lat: 54.11202, lng: -5.19578},
mapId: "DEMO_MAP_ID",
mapTypeControl: false,
});
const postcodeInput = document.getElementById('postcodeInput').value;
const submitBtn = document.getElementById('submitButton');
const jsonMapData = {
"data": [{"Postcode": "SP11DE", "PinColour": "#008000"}, {"Postcode": "SP12AJ", "PinColour": "#FFBF00"}, {"Postcode": "SP12AJ", "PinColour": "#FF0000"}, {"Postcode": "SP12AQ", "PinColour": "#008000"}, {"Postcode": "SP12AQ", "PinColour": "#FFBF00"}, {"Postcode": "SP12LP", "PinColour": "#008000"}, {"Postcode": "SP12LP", "PinColour": "#008000"}, {"Postcode": "SP12TJ", "PinColour": "#FF0000"}, {"Postcode": "SP27EJ", "PinColour": "#008000"}, {"Postcode": "SP27EJ", "PinColour": "#FF0000"}, {"Postcode": "SP27EJ", "PinColour": "#FFBF00"}, {"Postcode": "SP27NP", "PinColour": "#FFBF00"}, {"Postcode": "SP27NP", "PinColour": "#FFBF00"}, {"Postcode": "SP54JA", "PinColour": "#FFBF00"}, {"Postcode": "SP12BP", "PinColour": "#FFBF00"}, {"Postcode": "SP12BP", "PinColour": "#FFBF00"}, {"Postcode": "SP12QB", "PinColour": "#FFBF00"}, {"Postcode": "SP13ST", "PinColour": "#FFBF00"}, {"Postcode": "SP13ST", "PinColour": "#FFBF00"}, {"Postcode": "SP13ST", "PinColour": "#FFBF00"}, {"Postcode": "SP13TS", "PinColour": "#FFBF00"}, {"Postcode": "SP13TS", "PinColour": "#FFBF00"}, {"Postcode": "SP27PY", "PinColour": "#FFBF00"}, {"Postcode": "SP27SU", "PinColour": "#FFBF00"}, {"Postcode": "SP27YS", "PinColour": "#FFBF00"}, {"Postcode": "SP27YS", "PinColour": "#FFBF00"}, {"Postcode": "SP27YS"}, {"Postcode": "SP27YS", "PinColour": "#FFBF00"}, {"Postcode": "SP27YS", "PinColour": "#FFBF00"}, {"Postcode": "SP28BJ", "PinColour": "#FFBF00"}, {"Postcode": "SP28RH", "PinColour": "#FFBF00"}, {"Postcode": "SP29LE", "PinColour": "#FFBF00"}, {"Postcode": "SP29LE", "PinColour": "#FFBF00"}, {"Postcode": "SP11DP", "PinColour": "#FFBF00"}, {"Postcode": "SP11DP", "PinColour": "#FFBF00"}, {"Postcode": "SP11DP", "PinColour": "#FFBF00"}, {"Postcode": "SP12DD", "PinColour": "#FFBF00"}, {"Postcode": "SP12DD", "PinColour": "#FFBF00"}, {"Postcode": "SP12PU", "PinColour": "#FFBF00"}, {"Postcode": "SP12PU", "PinColour": "#FFBF00"}, {"Postcode": "SP12PU", "PinColour": "#FFBF00"}, {"Postcode": "SP12PU", "PinColour": "#FFBF00"}, {"Postcode": "SP12PU", "PinColour": "#FFBF00"}, {"Postcode": "SP12PU", "PinColour": "#FFBF00"}, {"Postcode": "SP12PU", "PinColour": "#FFBF00"}, {"Postcode": "SP13QS", "PinColour": "#FFBF00"}, {"Postcode": "SP27NU", "PinColour": "#FFBF00"}]
};
// Loop through the postcode data array
jsonMapData.data.forEach(postcodeData => {
const postcode = postcodeData.Postcode;
const pinColour = postcodeData.PinColour;
console.log(pinColour);
//Geocode the entered postcode
const geocoder = new google.maps.Geocoder();
geocoder.geocode({address: postcode + ', UK'}, (results, status) => {
if (status === 'OK' && results[0]) {
// create a marker for each postcode
const marker = new google.maps.marker.AdvancedMarkerElement({
position: results[0].geometry.location,
map: map,
content: new PinElement({
background: pinColour,
borderColor: "#FFF",
glyphColor: "white"
}).element,
});
markers.push(marker);
console.log(marker);
} else {
console.error('Geocode was not successful for the following reason: ' + status);
}
});
});
//.catch(error => console.error('Error loading JSON data: ', error));
}
function findNearestMarkers() {
const postcodeInput = document.getElementById('postcodeInput').value;
// Geocode the entered postcode
const geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: postcodeInput + ', UK' }, (results, status) => {
if (status === 'OK' && results[0]) {
const enteredLocation = results[0].geometry.location;
// Create a marker for the entered location
const enteredLocationMarker = new google.maps.Marker({
position: enteredLocation,
map: map,
title: postcodeInput,
icon: 'https://maps.google.com/mapfiles/ms/icons/purple-dot.png'
});
// Set map center and zoom to enetered location
map.setCenter(enteredLocation);
map.setZoom(11);
// Filter nearest markers
const nearestMarkers = markers.filter(marker => {
const markerLocation = marker.position;
const distance = google.maps.geometry.spherical.computeDistanceBetween(enteredLocation, markerLocation);
const miles = distance / 1609.34;
return distance;
});
// Display nearest markers on map
clearMarkers();
nearestMarkers.forEach(marker => {
marker.setMap(map);
})
// Log nearest markers as JSON in the console
const nearestMarkersJSON = nearestMarkers.map(marker => ({
Position: results[0].geometry.location
}));
console.log(JSON.stringify(nearestMarkersJSON));
} else {
console.error('Geocode was not successful for the following reason: ' + status);
}
});
}
// Clear all markers from map
function clearMarkers() {
markers.forEach(marker => {
marker.setMap(null);
});
}
</script>
</body>
</html>