Skip to content

Commit 169e4b1

Browse files
StriftStrift
committed
Fix google maps display
1 parent ba24fb2 commit 169e4b1

File tree

5 files changed

+80
-75
lines changed

5 files changed

+80
-75
lines changed

‎playgrounds/geo-javascript/.env‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
GOOGLE_API=AIzaSyDOaUaar4GL0i99LpN2zQHzfWXL1wu_JQo
1+
VITE_GOOGLE_MAPS_KEY=AIzaSyAdTxSaQG1L1kMborkwbUOM-gnHLYr7vGk

‎playgrounds/geo-javascript/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,16 @@ <h2>Search in world cities</h2>
3232
</div>
3333

3434
<div class="right-panel">
35-
<div id="searchbox" class="ais-SearchBox"></div>
36-
<!-- <div id="maps" style="height: 500px; width: 500px"></div> -->
35+
<div id="searchbox"></div>
36+
<div id="maps" style="height: 500px; width: 500px"></div>
3737
<br />
3838
<div id="hits"></div>
3939
<div id="pagination"></div>
4040
</div>
4141
</div>
4242

4343
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
44+
</script>
4445
<script type="module" src="./src/app.js"></script>
4546
</body>
4647
</html>

‎playgrounds/geo-javascript/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
],
1313
"license": "MIT",
1414
"dependencies": {
15-
"@meilisearch/instant-meilisearch": "0.28.0",
16-
"scriptjs": "^2.5.9"
15+
"@googlemaps/js-api-loader": "^2.0.1",
16+
"@meilisearch/instant-meilisearch": "*"
1717
}
1818
}

‎playgrounds/geo-javascript/src/app.js‎

Lines changed: 66 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,73 @@
11
/* eslint-disable no-undef */
22
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
3-
import injectScript from 'scriptjs'
3+
import { setOptions, importLibrary } from '@googlemaps/js-api-loader'
44

5-
const GOOGLE_API = import.meta.env.GOOGLE_API
5+
const GOOGLE_API_KEY = import.meta.env.VITE_GOOGLE_MAPS_KEY
66

7-
injectScript(
8-
`https://maps.googleapis.com/maps/api/js?v=quarterly&key=${GOOGLE_API}`,
9-
() => {
10-
const search = instantsearch({
11-
indexName: 'world_cities_geojson',
12-
searchClient: instantMeiliSearch(
13-
'https://edge.meilisearch.com',
14-
'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303',
15-
{}
16-
).searchClient,
17-
})
7+
setOptions({
8+
apiKey: GOOGLE_API_KEY,
9+
version: 'weekly',
10+
})
1811

19-
search.addWidgets([
20-
instantsearch.widgets.sortBy({
21-
container: '#sort-by',
22-
items: [
23-
{ value: 'world_cities_geojson', label: 'Relevant' },
24-
{
25-
value: 'world_cities_geojson:population:desc',
26-
label: 'Most Populated',
27-
},
28-
{
29-
value: 'world_cities_geojson:population:asc',
30-
label: 'Least Populated',
31-
},
32-
],
33-
}),
34-
instantsearch.widgets.searchBox({
35-
container: '#searchbox',
36-
}),
37-
instantsearch.widgets.configure({
38-
hitsPerPage: 20,
39-
}),
40-
// instantsearch.widgets.geoSearch({
41-
// container: '#maps',
42-
// googleReference: window.google,
43-
// initialZoom: 7,
44-
// initialPosition: {
45-
// lat: 50.655250871381355,
46-
// lng: 4.843585698860502,
47-
// },
48-
// }),
49-
instantsearch.widgets.infiniteHits({
50-
container: '#hits',
51-
templates: {
52-
item: `
53-
<div>
54-
<div class="hit-name">
55-
City: {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
56-
</div>
57-
<div class="hit-name">
58-
Country: {{#helpers.highlight}}{ "attribute": "country" }{{/helpers.highlight}}
59-
</div>
60-
<div class="hit-name">
61-
Population: {{#helpers.highlight}}{ "attribute": "population" }{{/helpers.highlight}}
62-
</div>
63-
</div>
64-
`,
12+
importLibrary('maps').then(() => {
13+
const search = instantsearch({
14+
indexName: 'world_cities_geojson',
15+
searchClient: instantMeiliSearch(
16+
'https://edge.meilisearch.com',
17+
'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303',
18+
{}
19+
).searchClient,
20+
})
21+
22+
search.addWidgets([
23+
instantsearch.widgets.sortBy({
24+
container: '#sort-by',
25+
items: [
26+
{ value: 'world_cities_geojson', label: 'Relevant' },
27+
{
28+
value: 'world_cities_geojson:population:desc',
29+
label: 'Most Populated',
30+
},
31+
{
32+
value: 'world_cities_geojson:population:asc',
33+
label: 'Least Populated',
6534
},
66-
}),
67-
])
35+
],
36+
}),
37+
instantsearch.widgets.searchBox({
38+
container: '#searchbox',
39+
}),
40+
instantsearch.widgets.configure({
41+
hitsPerPage: 20,
42+
}),
43+
instantsearch.widgets.geoSearch({
44+
container: '#maps',
45+
googleReference: window.google,
46+
initialZoom: 7,
47+
initialPosition: {
48+
lat: 50.655250871381355,
49+
lng: 4.843585698860502,
50+
},
51+
}),
52+
instantsearch.widgets.infiniteHits({
53+
container: '#hits',
54+
templates: {
55+
item: `
56+
<div>
57+
<div class="hit-name">
58+
City: {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
59+
</div>
60+
<div class="hit-name">
61+
Country: {{#helpers.highlight}}{ "attribute": "country" }{{/helpers.highlight}}
62+
</div>
63+
<div class="hit-name">
64+
Population: {{#helpers.highlight}}{ "attribute": "population" }{{/helpers.highlight}}
65+
</div>
66+
</div>
67+
`,
68+
},
69+
}),
70+
])
6871

69-
search.start()
70-
}
71-
)
72+
search.start()
73+
})

‎yarn.lock‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -909,6 +909,13 @@
909909
"@eslint/core" "^0.10.0"
910910
levn "^0.4.1"
911911

912+
"@googlemaps/js-api-loader@^2.0.1":
913+
version "2.0.1"
914+
resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-2.0.1.tgz#98ee96786a00de2d100f8a103738b3644a1cbb25"
915+
integrity sha512-YUtKJSWH6FiE/6Ii+NP+WfkvoZ55DLwyqthKmVYxZZwn/ny310dvz9Zw3cO1besEhGxA9lW7Ctjmzae1putjXQ==
916+
dependencies:
917+
"@types/google.maps" "^3.53.1"
918+
912919
"@humanfs/core@^0.19.1":
913920
version "0.19.1"
914921
resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.1.tgz#17c55ca7d426733fe3c561906b8173c336b40a77"
@@ -1202,7 +1209,7 @@
12021209
resolved "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.45.6.tgz"
12031210
integrity sha512-BzGzxs8UXFxeP8uN/0nRgGbsbpYQxSCKsv/7S8OitU7wwhfFcqQSm5aAcL1nbwueMiJ/VVmIZKPq69s0kX5W+Q==
12041211

1205-
"@types/google.maps@^3.55.12":
1212+
"@types/google.maps@^3.53.1", "@types/google.maps@^3.55.12":
12061213
version "3.58.1"
12071214
resolved "https://registry.yarnpkg.com/@types/google.maps/-/google.maps-3.58.1.tgz#71ce3dec44de1452f56641d2c87c7dd8ea964b4d"
12081215
integrity sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==
@@ -6162,11 +6169,6 @@ scheduler@^0.23.2:
61626169
dependencies:
61636170
loose-envify "^1.1.0"
61646171

6165-
scriptjs@^2.5.9:
6166-
version "2.5.9"
6167-
resolved "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz"
6168-
integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
6169-
61706172
search-insights@^2.17.2, search-insights@^2.17.3:
61716173
version "2.17.3"
61726174
resolved "https://registry.yarnpkg.com/search-insights/-/search-insights-2.17.3.tgz#8faea5d20507bf348caba0724e5386862847b661"

0 commit comments

Comments
 (0)