-
Notifications
You must be signed in to change notification settings - Fork 820
/
index.ts
102 lines (87 loc) · 2.64 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_place_search_pagination]
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap(): void {
// Create the map.
const pyrmont = { lat: -33.866, lng: 151.196 };
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
center: pyrmont,
zoom: 17,
mapId: "8d193001f940fde3",
} as google.maps.MapOptions
);
// Create the places service.
const service = new google.maps.places.PlacesService(map);
let getNextPage: () => void | false;
const moreButton = document.getElementById("more") as HTMLButtonElement;
moreButton. () {
moreButton.disabled = true;
if (getNextPage) {
getNextPage();
}
};
// Perform a nearby search.
service.nearbySearch(
{ location: pyrmont, radius: 500, type: "store" },
(
results: google.maps.places.PlaceResult[] | null,
status: google.maps.places.PlacesServiceStatus,
pagination: google.maps.places.PlaceSearchPagination | null
) => {
if (status !== "OK" || !results) return;
addPlaces(results, map);
moreButton.disabled = !pagination || !pagination.hasNextPage;
if (pagination && pagination.hasNextPage) {
getNextPage = () => {
// Note: nextPage will call the same handler function as the initial call
pagination.nextPage();
};
}
}
);
}
function addPlaces(
places: google.maps.places.PlaceResult[],
map: google.maps.Map
) {
const placesList = document.getElementById("places") as HTMLElement;
for (const place of places) {
if (place.geometry && place.geometry.location) {
const image = {
url: place.icon!,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25),
};
new google.maps.Marker({
map,
icon: image,
title: place.name!,
position: place.geometry.location,
});
const li = document.createElement("li");
li.textContent = place.name!;
placesList.appendChild(li);
li.addEventListener("click", () => {
map.setCenter(place.geometry!.location!);
});
}
}
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
// [END maps_place_search_pagination]
export {};