As per this codepen I have created a Google map using the Maps Javascript API.
I have then added a number of custom postcodes boundaries to this using the data-driven styling for data sets (Preview) feature
I then added a search box using the places search API and advanced markers.
I now need to check if the result from the places search is contained within the data driven styling dataset and so I can display information about delivery costs available for the location the user searched for.
Can anyone please advise how I can do this?
KML file can be found here:
I see there's a containsLocation() function in the Geometry library, but that seems to require creating a polygon from a path from co-ordinates. My KML file contains many regions (multiple postcodes) and is hosted is cloud console as per advise here
Edit: Updated with codepen here and kml file above.
Thank you
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// Initialize and add the map
// let map;
async function initMap() {
// The location of UK
// const position = { lat: 51.50630746850154, lng: -0.1393693718019947 }; // London
const position = { lat: 51.611060072110845, lng: -0.59 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary('maps');
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
'marker'
);
const { places } = await google.maps.importLibrary('places');
// The map, centered at UK
const mapDiv = document.getElementById('map');
const options = {
mapId: 'a7a2b6274c1716e2',
zoom: 8,
center: position,
streetViewControl: false,
mapTypeControl: false,
scaleControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER,
},
fullscreenControl: true,
fullscreenControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER,
},
// zoomControlOptions: {
// position: google.maps.ControlPosition.RIGHT_BOTTOM,
// },
// Restrict map bounds and zoom
maxZoom: 9.5,
minZoom: 7,
restriction: {
latLngBounds: {
north: 59,
south: 48,
east: 6,
west: -12,
},
},
};
const map = new google.maps.Map(mapDiv, options);
// Add Custom Postcode Data Set
const PostcodeDatasetId = '33f0902c-7f7d-4e84-b832-0997e0567100';
// Add layer
const DatasetLayer = map.getDatasetFeatureLayer(PostcodeDatasetId);
DatasetLayer.style = (params) => {
return {
fillColor: '#ffffff',
fillOpacity: 0.7,
// pointRadius: 3,
strokeColor: 'green',
strokeOpacity: 1.0,
strokeWeight: 1,
};
};
// Create the search box and link it to the UI element.
const input = document.getElementById('pac-input');
const searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', () => {
searchBox.setBounds(map.getBounds());
});
let markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', () => {
const places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach((marker) => {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
const bounds = new google.maps.LatLngBounds();
places.forEach((place) => {
if (!place.geometry || !place.geometry.location) {
console.log('Returned place contains no geometry');
return;
}
const icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(50, 50),
zIndex: 6000,
};
// Create a marker for each place.
markers.push(
new google.maps.marker.AdvancedMarkerView({
map,
content: new PinElement({
scale: 1.5,
}).element,
title: place.name,
position: place.geometry.location,
})
);
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
initMap();