docs: update InstantSearch example (#593)

* docs(examples): use the built-in GeoSearch widget * docs(examples): use configure rather than searchParameters * docs: add Google API Key * docs(examples): add title to marker * docs: add Google API Key for build
algolia · Sep 17, 2018 · 31430d3 · 31430d3
1 parent f5b7558
commit 31430d3
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/docs/config.rb b/docs/config.rb
@@ -31,9 +31,8 @@
   config[:places_lib_url] = 'places'
   config[:places_autocomplete_dataset_lib_url] = 'placesAutocompleteDataset'
   config[:places_instantsearch_widget_lib_url] = 'placesInstantsearchWidget'
-  config[:instantsearch_lib_url] = 'https://cdn.jsdelivr.net/instantsearch.js/1.6.0/instantsearch.min.js'
-  config[:instantsearch_googlemaps_lib_url] = 'https://cdn.jsdelivr.net/instantsearch-googlemaps/1.2.4/instantsearch-googlemaps.min.js'
-  config[:google_maps_lib_url] = 'https://maps.googleapis.com/maps/api/js'
+  config[:instantsearch_lib_url] = 'https://cdn.jsdelivr.net/instantsearch.js/2.10.1/instantsearch.min.js'
+  config[:google_maps_lib_url] = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBawL8VbstJDdU5397SUX7pEt9DslAwWgQ'
   activate :external_pipeline,
     name: 'places',
     command: 'npm run js:watch -- --output-path docs/.webpack/js',
@@ -78,9 +77,8 @@ def nav_active(path)
   config[:places_lib_url] = config[:places_cdn_url]
   config[:places_autocomplete_dataset_lib_url] = config[:places_autocomplete_dataset_cdn_url]
   config[:places_instantsearch_widget_lib_url] = config[:places_instantsearch_widget_cdn_url]
-  config[:instantsearch_lib_url] = 'https://cdn.jsdelivr.net/instantsearch.js/1.6.0/instantsearch.min.js'
-  config[:instantsearch_googlemaps_lib_url] = 'https://cdn.jsdelivr.net/instantsearch-googlemaps/1.2.4/instantsearch-googlemaps.min.js'
-  config[:google_maps_lib_url] = 'https://maps.googleapis.com/maps/api/js'
+  config[:instantsearch_lib_url] = 'https://cdn.jsdelivr.net/instantsearch.js/2.10.1/instantsearch.min.js'
+  config[:google_maps_lib_url] = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBawL8VbstJDdU5397SUX7pEt9DslAwWgQ'
   # this may trigger bad behavior, if so, see
   # https://github.com/middleman/middleman-minify-html
   activate :minify_html

diff --git a/docs/source/examples.html.md.erb b/docs/source/examples.html.md.erb
@@ -2,6 +2,8 @@
 title: Examples
 layout: documentation
 ---
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/instantsearch.js/2.10.1/instantsearch.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/instantsearch.js/2.10.1/instantsearch-theme-algolia.min.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1/leaflet.css" />
 <script src="https://cdn.jsdelivr.net/leaflet/1/leaflet.js"></script>
 

diff --git a/docs/source/partials/examples/_instantsearch.html.erb b/docs/source/partials/examples/_instantsearch.html.erb
@@ -7,35 +7,38 @@
 
 <%= javascript_include_tag config[:instantsearch_lib_url] %>
 <%= javascript_include_tag config[:places_instantsearch_widget_lib_url] %>
-<%= javascript_include_tag config[:instantsearch_googlemaps_lib_url] %>
 <%= javascript_include_tag config[:google_maps_lib_url] %>
 <script>
 (function() {
 var search = instantsearch({
   appId: 'latency',
   apiKey: 'ffc36feb6e9df06e1c3c4549b5af2b31',
   indexName: 'starbucks',
-  searchParameters: {
-    hitsPerPage: 50
-  }
+});
+
+var configure = instantsearch.widgets.configure({
+  hitsPerPage: 25,
 });
 
 var searchBox = placesInstantsearchWidget({
   container: document.querySelector('#input-map-instantsearch')
 });
 
-var map = instantsearchGoogleMaps({
-  container: document.querySelector('#map-instantsearch-container'),
-  prepareMarkerData: ({Brand, Name, 'Street Combined': street}) => {
-    return {
-      title: `${Brand} - ${Name}`
-    };
-  },
-  refineOnMapInteraction: true
+var geosearch = instantsearch.widgets.geoSearch({
+  container: '#map-instantsearch-container',
+  googleReference: window.google,
+  builtInMarker: {
+    createOptions: function(item) {
+      return {
+        title: item.Brand + ' ' + item.Name
+      };
+    }
+  }
 });
 
+search.addWidget(configure);
 search.addWidget(searchBox);
-search.addWidget(map);
+search.addWidget(geosearch);
 search.start();
 })();
 </script>