Skip to content

Commit bb6ea4a

Browse files
ejhaseldenejhaselden
committed
Update and migrate PlaceID Finder sample
1 parent 998519a commit bb6ea4a

File tree

6 files changed

+261
-0
lines changed

6 files changed

+261
-0
lines changed

‎samples/places-placeid-finder/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Google Maps JavaScript Sample
2+
3+
## places-placeid-finder
4+
5+
Place ID Finder
6+
7+
## Setup
8+
9+
### Before starting run:
10+
11+
`npm i`
12+
13+
### Run an example on a local web server
14+
15+
`cd samples/places-placeid-finder`
16+
`npm start`
17+
18+
### Build an individual example
19+
20+
`cd samples/places-placeid-finder`
21+
`npm run build`
22+
23+
From 'samples':
24+
25+
`npm run build --workspace=places-placeid-finder/`
26+
27+
### Build all of the examples.
28+
29+
From 'samples':
30+
31+
`npm run build-all`
32+
33+
### Run lint to check for problems
34+
35+
`cd samples/places-placeid-finder`
36+
`npx eslint index.ts`
37+
38+
## Feedback
39+
40+
For feedback related to this sample, please open a new issue on
41+
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).

‎samples/places-placeid-finder/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<!--
3+
@license
4+
Copyright 2019 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
<!-- [START maps_places_placeid_finder] -->
8+
<html>
9+
<head>
10+
<title>Place ID Finder</title>
11+
12+
<link rel="stylesheet" type="text/css" href="./style.css" />
13+
<script type="module" src="./index.js"></script>
14+
<!-- prettier-ignore -->
15+
<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))})
16+
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
17+
</head>
18+
<body>
19+
<gmp-map center="-33.8688, 151.2195" zoom="13" map-id="DEMO_MAP_ID">
20+
<gmp-place-autocomplete slot="control-inline-start-block-start"></gmp-place-autocomplete>></gmp-place-autocomplete>
21+
</gmp-map>
22+
<div id="infowindow-content">
23+
<span id="place-name" class="title"></span><br />
24+
<strong>Place ID:</strong> <span id="place-id"></span><br />
25+
<span id="place-address"></span>
26+
</div>
27+
</html>
28+
<!-- [END maps_places_placeid_finder] -->

‎samples/places-placeid-finder/index.ts‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/**
2+
* @license
3+
* Copyright 2019 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
// [START maps_places_placeid_finder]
8+
// This sample uses the Place Autocomplete widget to allow the user to search
9+
// for and select a place. The sample then displays an info window containing
10+
// the place ID and other information about the place that the user has
11+
// selected.
12+
13+
// This example requires the Places library. Include the libraries=places
14+
// parameter when you first load the API. For example:
15+
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
16+
17+
async function initMap(): Promise<void> {
18+
// Request needed libraries.
19+
const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
20+
google.maps.importLibrary('maps') as Promise<google.maps.MapsLibrary>,
21+
google.maps.importLibrary(
22+
'marker'
23+
) as Promise<google.maps.MarkerLibrary>,
24+
google.maps.importLibrary(
25+
'places'
26+
) as Promise<google.maps.PlacesLibrary>,
27+
]);
28+
29+
const mapElement = document.querySelector(
30+
'gmp-map'
31+
) as google.maps.MapElement;
32+
const map = mapElement.innerMap as google.maps.Map;
33+
34+
const placeAutocomplete = document.querySelector(
35+
'gmp-place-autocomplete'
36+
) as google.maps.places.PlaceAutocompleteElement;
37+
38+
// Set the map options.
39+
map.setOptions({
40+
clickableIcons: false,
41+
mapTypeControl: false,
42+
streetViewControl: false,
43+
});
44+
45+
// Use the bounds_changed event to bias results to the current map bounds.
46+
map.addListener('bounds_changed', () => {
47+
const bounds = map.getBounds();
48+
if (bounds) {
49+
placeAutocomplete.locationBias = bounds;
50+
}
51+
});
52+
53+
const infowindow = new InfoWindow();
54+
const infowindowContent = document.getElementById(
55+
'infowindow-content'
56+
) as HTMLElement;
57+
58+
infowindow.setContent(infowindowContent);
59+
60+
const marker = new AdvancedMarkerElement({
61+
map: map,
62+
collisionBehavior:
63+
google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,
64+
});
65+
66+
marker.addListener('click', () => {
67+
infowindow.open(map, marker);
68+
});
69+
70+
placeAutocomplete.addEventListener(
71+
'gmp-select',
72+
async ({ placePrediction }: any) => {
73+
infowindow.close();
74+
75+
const place = placePrediction.toPlace();
76+
77+
await place.fetchFields({
78+
fields: ['displayName', 'formattedAddress', 'location', 'id'],
79+
});
80+
81+
if (!place.location) {
82+
return;
83+
}
84+
85+
if (place.viewport) {
86+
map.fitBounds(place.viewport);
87+
} else {
88+
map.setCenter(place.location);
89+
map.setZoom(17);
90+
}
91+
92+
// Set the position of the marker using the place ID and location.
93+
marker.position = place.location;
94+
// marker.setVisible(true); // AdvancedMarkerElement is visible by default when map and position are set.
95+
96+
(
97+
infowindowContent.children.namedItem(
98+
'place-name'
99+
) as HTMLElement
100+
).textContent = place.displayName as string;
101+
(
102+
infowindowContent.children.namedItem('place-id') as HTMLElement
103+
).textContent = place.id as string;
104+
(
105+
infowindowContent.children.namedItem(
106+
'place-address'
107+
) as HTMLElement
108+
).textContent = place.formattedAddress as string;
109+
infowindow.open(map, marker);
110+
}
111+
);
112+
}
113+
114+
initMap();
115+
// [END maps_places_placeid_finder]
116+
export {};

‎samples/places-placeid-finder/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "@js-api-samples/places-placeid-finder",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"build": "tsc && bash ../jsfiddle.sh places-placeid-finder && bash ../app.sh places-placeid-finder && bash ../docs.sh places-placeid-finder && npm run build:vite --workspace=. && bash ../dist.sh places-placeid-finder",
6+
"test": "tsc && npm run build:vite --workspace=.",
7+
"start": "tsc && vite build --base './' && vite",
8+
"build:vite": "vite build --base './'",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
13+
}
14+
}

‎samples/places-placeid-finder/style.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/**
2+
* @license
3+
* Copyright 2019 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
/* [START maps_places_placeid_finder] */
7+
/*
8+
* Always set the map height explicitly to define the size of the div element
9+
* that contains the map.
10+
*/
11+
gmp-map {
12+
height: 100%;
13+
}
14+
15+
/*
16+
* Optional: Makes the sample page fill the window.
17+
*/
18+
html,
19+
body {
20+
height: 100%;
21+
margin: 0;
22+
padding: 0;
23+
font-family: Arial, Helvetica, sans-serif;
24+
}
25+
26+
#infowindow-content {
27+
display: none;
28+
}
29+
30+
gmp-map #infowindow-content {
31+
display: inline;
32+
}
33+
34+
gmp-place-autocomplete {
35+
position: absolute;
36+
height: 30px;
37+
width: 500px;
38+
top: 10px;
39+
left: 10px;
40+
box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
41+
color-scheme: light;
42+
border-radius: 10px;
43+
}
44+
45+
/* [END maps_places_placeid_finder] */

‎samples/places-placeid-finder/tsconfig.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"compilerOptions": {
3+
"module": "esnext",
4+
"target": "esnext",
5+
"strict": true,
6+
"noImplicitAny": false,
7+
"lib": [
8+
"es2015",
9+
"esnext",
10+
"es6",
11+
"dom",
12+
"dom.iterable"
13+
],
14+
"moduleResolution": "Node",
15+
"jsx": "preserve"
16+
}
17+
}

0 commit comments

Comments
 (0)