Adrian is fortunate to live at Nutbourne Place, a fine country house in West Sussex with a great pub, The Rising Sun, down the road.
The Annexe at Nutbourne Place is available for holiday rentals through Airbnb.
To highlight useful links to walks, attractions and a history of the house for visitors Adrian put the nutbourneplace.com website together. Several of his pages, e.g., the Walks page, feature a series of customised Google Maps within the WordPress site.
The process of creating this geographical content was reasonably straightforward, if slightly demanding:
- Walks were undertaken, enjoyably, with a smart watch recording the route using Google Fit.
- The smart watch recorded direction, elevation and pace in GPS Exchange Format (GPX) files.
- These files could be downloaded by visiting the Google Takeout site, selecting Google Fit data.
- Each GPX file was converted to Keyhole Markup Language (KML) using an online converter for use in Google Maps.
Finally, the resulting KML files could be uploaded to the webserver hosting the nutbourneplace.com website.
Coding required one large JavaScript block specifying all of the maps used on the site.
<script>
// Initialize and add the map
function initMap() {
// The location of NP
const NP = { lat: 50.960043, lng: -0.470723 };
// Map #1, centered at NP
const map_1 = new google.maps.Map(document.getElementById("map_1"), {
mapTypeId: 'satellite',
center: NP,
});
// NP marker on this map
const marker_1 = new google.maps.Marker({
position: NP,
title: 'Nutbourne Place',
label: 'NP',
map: map_1,
});
// Map #2, centered at NP
const map_2 = new google.maps.Map(document.getElementById("map_2"), {
mapTypeId: 'satellite',
center: NP,
});
// NP marker on this map
const marker_2 = new google.maps.Marker({
position: NP,
title: 'Nutbourne Place',
label: 'NP',
map: map_2,
});
// Map #3, centered at NP
const map_3 = new google.maps.Map(document.getElementById("map_3"), {
mapTypeId: 'satellite',
center: NP,
});
// NP marker on this map
const marker_3 = new google.maps.Marker({
position: NP,
title: 'Nutbourne Place',
label: 'NP',
map: map_3,
});
// Map #4, centered at NP
const map_4 = new google.maps.Map(document.getElementById("map_4"), {
mapTypeId: 'satellite',
center: NP,
});
// NP marker on this map
const marker_4 = new google.maps.Marker({
position: NP,
title: 'Nutbourne Place',
label: 'NP',
map: map_4,
});
// KML - long_sheep_loop
const long_sheep_loop_Layer = new google.maps.KmlLayer({
url: "https://www.nutbourneplace.com/wp-content/uploads/2021/06/2021-05-10_long_sheep_loop.kml",
map: map_1,
});
// KML - gunnera_nyetimber_woods
const gunnera_nyetimber_woods_Layer = new google.maps.KmlLayer({
url: "https://www.nutbourneplace.com/wp-content/uploads/2021/06/2021-05-13_gunnera_nyetimber_woods.kml",
map: map_2,
});
// KML - local_llama_loop
const local_llama_loop_Layer = new google.maps.KmlLayer({
url: "https://www.nutbourneplace.com/wp-content/uploads/2021/06/2021-05-19_local_llama_loop.kml",
map: map_3,
});
// KML - long sheep loop
const woodland_lake_millpond_Layer = new google.maps.KmlLayer({
url: "https://www.nutbourneplace.com/wp-content/uploads/2021/06/2021-05-25_woodland_lake_millpond.kml",
map: map_4,
});
}
</script>Each map was named so that individual maps could be pulled into pages through DIVs, e.g., map_1.
<!-- The div element for the map -->
<div id="map_1" style="height: 400px; width: 100%;"></div>This sort of process illustrates what can be achieved with modern technology. Additional setup was required to enable the Google Maps API within the Google Cloud Platform, and more coding was required to initialise the Maps clients through JavaScript calls with API keys. Try it and you may well get there eventually…
Sadly, of course, it can all sometimes go a bit pear! Similar data collection and mapping of US Army personnel’s exercise routines on Strava has created perfect maps of overseas bases.
No wonder it is sometimes advisable to turn our smart devices off!