-
Notifications
You must be signed in to change notification settings - Fork 823
/
index.ts
40 lines (34 loc) · 1.35 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
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_advanced_markers_draggable]
async function initMap() {
// Request needed libraries.
const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
const map = new Map(document.getElementById('map') as HTMLElement, {
center: {lat: 37.39094933041195, lng: -122.02503913145092},
zoom: 14,
mapId: '4504f8b37365c3d0',
});
const infoWindow = new InfoWindow();
// [START maps_advanced_markers_draggable_marker]
const draggableMarker = new AdvancedMarkerElement({
map,
position: {lat: 37.39094933041195, lng: -122.02503913145092},
gmpDraggable: true,
title: "This marker is draggable.",
});
// [END maps_advanced_markers_draggable_marker]
draggableMarker.addListener('dragend', (event) => {
const position = draggableMarker.position as google.maps.LatLng;
infoWindow.close();
infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
infoWindow.open(draggableMarker.map, draggableMarker);
});
}
initMap();
// [END maps_advanced_markers_draggable]
export { };