Skip to content

Commit ae3cdf8

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

File tree

3 files changed

+204
-0
lines changed

3 files changed

+204
-0
lines changed

‎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/style.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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+
.place-autocomplete-card {
27+
background-color: #fff;
28+
border-radius: 5px;
29+
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
30+
margin: 10px;
31+
padding: 5px;
32+
font-family: Roboto, sans-serif;
33+
font-size: large;
34+
font-weight: bold;
35+
}
36+
37+
.title {
38+
font-weight: bold;
39+
}
40+
41+
#infowindow-content {
42+
display: none;
43+
}
44+
45+
gmp-map #infowindow-content {
46+
display: inline;
47+
}
48+
49+
gmp-place-autocomplete {
50+
position: absolute;
51+
height: 30px;
52+
width: 500px;
53+
top: 10px;
54+
left: 10px;
55+
box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
56+
color-scheme: light;
57+
border-radius: 10px;
58+
}
59+
60+
/* [END maps_places_placeid_finder] */

0 commit comments

Comments
 (0)