Google Maps search

pages/js/config.js

@@ -1,64 +1,59 @@
 const initConfig = {
-  acceleratorSample: {
-    language: "en",
-    searchURL:
-      "https://searchcloud-2-us-east-1.searchstax.com/29847/corpsiteuxsamples-1442/emselect",
-    suggesterURL:
-      "https://searchcloud-2-us-east-1.searchstax.com/29847/corpsiteuxsamples-1442_suggester/emsuggest",
-    searchAuth: "b065448ad1484e205f4851f0ce89d128e704e2f4",
-    trackApiKey: "DPAOKNB9c5chZZDwN1Il9dLUCLMGF1ggehy0dWewZwk",
-    authType: "token",
-    relatedSearchesURL:
-      "https://app.searchstax.com/api/v1/1442/related-search/",
-    relatedSearchesAPIKey: "fac98ad405cc50e0c0693331e8d2119de592f0e3",
-    analyticsBaseUrl: "https://analytics-us.searchstax.com",
-    questionURL: "https://search-ai-us.searchstax.com/api/v1/1442/answer/",
-    model: "Default",
-    appId: "1442",
-  },
-  acceleratorRelatedSearchSample: {
-    relatedSearchesURL:
-      "https://app.searchstax.com/api/v1/1442/related-search/",
-    relatedSearchesAPIKey: "fac98ad405cc50e0c0693331e8d2119de592f0e3",
-    model: "Default",
-  },
-  jobSearchSample: {
-    language: "en",
-    searchURL:
-      "https://searchcloud-2-us-east-1.searchstax.com/29847/jobsearchuxsample-1447/emselect",
-    suggesterURL:
-      "https://searchcloud-2-us-east-1.searchstax.com/29847/jobsearchuxsample-1447_suggester/emsuggest",
-    searchAuth: "9c77f740418413b6701fe7a98cc7c640987a9af1",
-    trackApiKey: "Cnpe2IL7uXaztPzavTIuDAiAmfydOa12f0iAGE0hLlY",
-    authType: "token",
-    analyticsBaseUrl: "https://analytics-us.searchstax.com",
-    model: "Default",
-  },
-  jobSearchRelatedSearchSample: {
-    relatedSearchesURL:
-      "https://app.searchstax.com/api/v1/1447/related-search/",
-    relatedSearchesAPIKey: "3014f9d0276906ac17fff16c500e5ee75b20d73c",
-    analyticsBaseUrl: "https://analytics-us.searchstax.com",
-    model: "Default",
-  },
-  searchStandaloneSearchSample: {
-    language: "en",
-    searchURL:
-      "",
-    suggesterURL:
-      "",
-    searchAuth: "",
-    trackApiKey: "DPAOKNB9c5chZZDwN1Il9dLUCLMGF1ggehy0dWewZwk",
-    authType: "token",
-    relatedSearchesURL:
-      "https://app.searchstax.com/api/v1/1442/related-search/",
-    relatedSearchesAPIKey: "fac98ad405cc50e0c0693331e8d2119de592f0e3",
-    analyticsBaseUrl: "https://analytics-us.searchstax.com",
-    questionURL: "https://search-ai-us.searchstax.com/api/v1/1442/answer/",
-    model: "Default",
-    appId: "1442",
-  },
-};
+    acceleratorSample: {
+      language: "en",
+      searchURL:
+        "https://searchcloud-2-us-east-1.searchstax.com/29847/corpsiteuxsamples-1442/emselect",
+      suggesterURL:
+        "https://searchcloud-2-us-east-1.searchstax.com/29847/corpsiteuxsamples-1442_suggester/emsuggest",
+      searchAuth: "b065448ad1484e205f4851f0ce89d128e704e2f4",
+      trackApiKey: "DPAOKNB9c5chZZDwN1Il9dLUCLMGF1ggehy0dWewZwk",
+      authType: "token",
+      relatedSearchesURL:
+        "https://app.searchstax.com/api/v1/1442/related-search/",
+      relatedSearchesAPIKey: "fac98ad405cc50e0c0693331e8d2119de592f0e3",
+      analyticsBaseUrl: 'https://analytics-us.searchstax.com',
+      questionURL: "https://search-ai-us.searchstax.com/api/v1/1442/answer/",
+    },
+    acceleratorRelatedSearchSample: {
+      relatedSearchesURL:
+        "https://app.searchstax.com/api/v1/1442/related-search/",
+      relatedSearchesAPIKey: "fac98ad405cc50e0c0693331e8d2119de592f0e3",
+    },
+    jobSearchSample: {
+      language: "en",
+      searchURL:
+        "https://searchcloud-2-us-east-1.searchstax.com/29847/jobsearchuxsample-1447/emselect",
+      suggesterURL:
+        "https://searchcloud-2-us-east-1.searchstax.com/29847/jobsearchuxsample-1447_suggester/emsuggest",
+      searchAuth: "9c77f740418413b6701fe7a98cc7c640987a9af1",
+      trackApiKey: "Cnpe2IL7uXaztPzavTIuDAiAmfydOa12f0iAGE0hLlY",
+      authType: "token",
+      analyticsBaseUrl: 'https://analytics-us.searchstax.com'
+    },
+    jobSearchRelatedSearchSample: {
+      relatedSearchesURL:
+        "https://app.searchstax.com/api/v1/1447/related-search/",
+      relatedSearchesAPIKey: "3014f9d0276906ac17fff16c500e5ee75b20d73c",
+      analyticsBaseUrl: 'https://analytics-us.searchstax.com'
+    },
+    locationSearchSample: {
+      language: "en",
+      searchURL:
+        "https://searchcloud-2-us-east-1.searchstax.com/29847/fiveguyslocationsdemo-4848/emselect",
+      suggesterURL:
+        "https://searchcloud-2-us-east-1.searchstax.com/29847/fiveguyslocationsdemo-4848_suggester/emsuggest",
+      searchAuth: "1641be461786e5b311905176ea67bcb8416c442d",
+      trackApiKey: "qYQh2M9XAE3sfBX2uUbNQ6UPTRK9zEoxptZ9tkfluVU",
+      authType: "token",
+      relatedSearchesURL:
+        "https://app.searchstax.com/api/v1/4848/related-search/",
+      relatedSearchesAPIKey: "9f755acd4eb7ba0935c318e7cb08f43cd0751257",
+      analyticsBaseUrl: 'https://analytics-us.searchstax.com',
+      questionURL: "https://search-ai-us.searchstax.com/api/v1/4848/answer/",
+      geocodingAPIKey: "**__add_your_own_**",
+      googleMapsApiKey: "**__add_your_own_**",
+    }
+  };
 
 const renderConfig = {
   inputWidget: {},

pages/js/location-search/README.md

@@ -0,0 +1,46 @@
+## Location Search with Google Maps Integration
+
+### Setting up Google Maps Integration
+
+- Create a project on [Google API Console](https://console.cloud.google.com)
+- Enable `Maps JavaScript API` for map integration
+- Enable `Places API` for geocoding integration
+- Go to "Credentials" and create an API key
+- Add API key to `googleMapsApiKey` field in config.js
+
+### Usage
+
+- Run the commands:
+```shell
+$ npm install
+$ npm run dev
+```
+- Open [http://localhost:5173](http://localhost:5173)
+
+### Search Page Layout
+
+The search page layout and functionality is defined in `src/main.ts`. Map results are loaded into the `searchstax-location-map` element.
+
+### JavaScript Functions
+
+Google Maps are added to the page and configured using several functions:
+
+- `loadGoogleMaps` adds the Google Maps code to the search page
+- `clearMarkers` removes and resets map pins when search results change
+- `processMapResults` looks for location results in the search response and creates map pins for each location
+
+The `searchstax.dataLayer.$searchResults.subscribe` function is used to watch for updated search results. If a `location` field is found in the response `metadata` then the location results are sent to `processMapResults` to display the appropriate map pins.
+
+```JS
+searchstax.dataLayer.$searchResults.subscribe((results) => {
+  const metadata = searchstax.dataLayer.$searchResultsMetadata.getValue();
+  if (metadata?.location?.field) {
+    locationField = metadata.location.field;
+    processMapResults(results);
+  } else {
+    clearMarkers();
+    locationField = '';
+  }
+  return results;
+});
+```