GoogleMapsTSHelper/index.html at master · samialateya/GoogleMapsTSHelper · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Maps TypeScript API</title>

    <!-- import google maps SDK-->
    <script src="https://maps.googleapis.com/maps/api/js?key={your-key}" defer></script>
    <!-- import javascript file-->
    <script src="./src/main.ts" type="module" defer></script>
  </head>
  <body>
    <!-- google maps container element -->
    <div class="maps-container"></div>

		<!-- ==================== Street View ====================================== -->
		<!-- street view container -->
		<div class="street-view-container d-none"></div>
		<!-- close street view button -->
		<button class="maps-btn close-btn d-none" id="close-street-view-btn"><span>&#10008;</span></button>
    <script type="module" src="/src/main.ts"></script>

		<!-- ==================== Maps Buttons ====================================== -->
		<!-- locate current location button -->
		<button class="maps-btn" id="locate-me-btn" style="--left:1rem;"
			title="Get your current location"><span>&#10018;</span></button>
		<!-- street view -->
		<button class="maps-btn" id="street-view-btn" style="--left:4rem;" title="Street view"><span>&#10147;</span></button>
		<!-- calculate distance button  -->
		<button class="maps-btn" id="distance-btn" style="--left:7rem;"
			title="Calculate distance"><span>&Dstrok;</span></button>
  </body>
</html>