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();
0

There are 0 best solutions below