Added support for Place class and searchByText (#63)

aws-geospatial · Jun 28, 2024 · e68e6b6 · e68e6b6
1 parent 65a0b1d
commit e68e6b6
Show file tree

Hide file tree

Showing 9 changed files with 555 additions and 3 deletions.
diff --git a/examples/landingPage.html b/examples/landingPage.html
@@ -20,6 +20,11 @@ <h1>Amazon Location Migration Adapter Examples</h1>
       <span><a href="./autoComplete/google.html" target="_blank">(Google)</a></span>
     </div>
 
+    <div>
+      <span class="example-links"><a href="./newPlaces/index.html" target="_blank">New Places API</a></span>
+      <span><a href="./newPlaces/google.html" target="_blank">(Google)</a></span>
+    </div>
+
     <div>
       <span class="example-links"><a href="./directions/index.html" target="_blank">Directions</a></span>
       <span><a href="./directions/google.html" target="_blank">(Google)</a></span>

diff --git a/examples/newPlaces/example.js b/examples/newPlaces/example.js
@@ -0,0 +1,59 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+// This example showcases the new Places API.
+//
+// This is meant to be showcased as the client logic that is able to remain untouched
+// and retain the same functionality when using the migration adapter.
+
+const austinCoords = { lat: 30.268193, lng: -97.7457518 }; // Austin, TX :)
+
+let map;
+let center;
+
+async function initMap() {
+  const { Map } = await google.maps.importLibrary("maps");
+
+  map = new Map(document.getElementById("map"), {
+    center: austinCoords,
+    zoom: 11,
+    mapId: "DEMO_MAP_ID",
+  });
+
+  findPlaces();
+}
+
+async function findPlaces() {
+  const { Place } = await google.maps.importLibrary("places");
+  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
+  const request = {
+    textQuery: "Whataburger in Austin",
+    fields: ["displayName", "location", "utcOffsetMinutes"],
+    locationBias: austinCoords,
+    language: "en-US",
+    maxResultCount: 15,
+  };
+
+  const { places } = await Place.searchByText(request);
+
+  if (places.length) {
+    const { LatLngBounds } = await google.maps.importLibrary("core");
+    const bounds = new LatLngBounds();
+
+    // Loop through and get all the results.
+    places.forEach((place) => {
+      const markerView = new AdvancedMarkerElement({
+        map,
+        position: place.location,
+        title: place.displayName,
+      });
+
+      bounds.extend(place.location);
+    });
+    map.fitBounds(bounds);
+  } else {
+    console.log("No results");
+  }
+}
+
+initMap();
diff --git a/examples/newPlaces/google.template.html b/examples/newPlaces/google.template.html
@@ -0,0 +1,59 @@
+<html>
+  <head>
+    <title>New Places Example - Google</title>
+    <link rel="stylesheet" type="text/css" href="../common/style.css" />
+
+    <!-- jQuery imports for example -->
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
+    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
+
+    <!-- Client logic example -->
+    <script type="module" src="./example.js"></script>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <!-- Google Maps API import -->
+    <script>
+      ((g) => {
+        var h,
+          a,
+          k,
+          p = "The Google Maps JavaScript API",
+          c = "google",
+          l = "importLibrary",
+          q = "__ib__",
+          m = document,
+          b = window;
+        b = b[c] || (b[c] = {});
+        var d = b.maps || (b.maps = {}),
+          r = new Set(),
+          e = new URLSearchParams(),
+          u = () =>
+            h ||
+            (h = new Promise(async (f, n) => {
+              await (a = m.createElement("script"));
+              e.set("libraries", [...r] + "");
+              for (k in g)
+                e.set(
+                  k.replace(/[A-Z]/g, (t) => "_" + t[0].toLowerCase()),
+                  g[k],
+                );
+              e.set("callback", c + ".maps." + q);
+              a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
+              d[q] = f;
+              a.onerror = () => (h = n(Error(p + " could not load.")));
+              a.nonce = m.querySelector("script[nonce]")?.nonce || "";
+              m.head.append(a);
+            }));
+        d[l]
+          ? console.warn(p + " only loads once. Ignoring:", g)
+          : (d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)));
+      })({
+        key: "{{GOOGLE_API_KEY}}",
+        v: "weekly",
+      });
+    </script>
+  </body>
+</html>
diff --git a/examples/newPlaces/index.template.html b/examples/newPlaces/index.template.html
@@ -0,0 +1,20 @@
+<html>
+  <head>
+    <title>New Places Example - Migration Adapter</title>
+    <link rel="stylesheet" type="text/css" href="../common/style.css" />
+
+    <!-- jQuery imports for example -->
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
+    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
+
+    <!-- Client logic example -->
+    <script type="module" src="./example.js"></script>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <!-- Migration script import -->
+    <script src="../../dist/amazonLocationMigrationAdapter.js?region={{REGION}}&map={{MAP_NAME}}&placeIndex={{PLACE_INDEX}}&apiKey={{AMAZON_LOCATION_API_KEY}}"></script>
+  </body>
+</html>
diff --git a/src/googleCommon.ts b/src/googleCommon.ts
@@ -10,7 +10,7 @@ export interface LatLngLiteral {
 
 export type LatLngLike = LatLngLiteral | MigrationLatLng;
 
-interface LatLngBoundsLiteral {
+export interface LatLngBoundsLiteral {
   east: number;
   north: number;
   south: number;

diff --git a/src/index.ts b/src/index.ts
@@ -17,6 +17,7 @@ import { MigrationMarker } from "./markers";
 import {
   MigrationAutocomplete,
   MigrationAutocompleteService,
+  MigrationPlace,
   MigrationPlacesService,
   MigrationSearchBox,
 } from "./places";
@@ -86,6 +87,8 @@ const migrationInit = async function () {
   MigrationAutocomplete.prototype._placeIndexName = placeIndexName;
   MigrationAutocompleteService.prototype._client = client;
   MigrationAutocompleteService.prototype._placeIndexName = placeIndexName;
+  MigrationPlace._client = client;
+  MigrationPlace._placeIndexName = placeIndexName;
   MigrationPlacesService.prototype._client = client;
   MigrationPlacesService.prototype._placeIndexName = placeIndexName;
   MigrationSearchBox.prototype._client = client;
@@ -124,6 +127,7 @@ const migrationInit = async function () {
       places: {
         Autocomplete: MigrationAutocomplete,
         AutocompleteService: MigrationAutocompleteService,
+        Place: MigrationPlace,
         PlacesService: MigrationPlacesService,
         PlacesServiceStatus: PlacesServiceStatus,
         SearchBox: MigrationSearchBox,
@@ -161,6 +165,7 @@ const migrationInit = async function () {
               resolve({
                 Autocomplete: MigrationAutocomplete,
                 AutocompleteService: MigrationAutocompleteService,
+                Place: MigrationPlace,
                 PlacesService: MigrationPlacesService,
                 PlacesServiceStatus: PlacesServiceStatus,
                 SearchBox: MigrationSearchBox,