Skip to content

Commit 6214773

Browse files
anglarettwillum070
anglarett
and
willum070
authored
Add js-api-loader-map sample using @googlemaps/js-api-loader (#809)
* Add js-api-loader-map folder * v2 * v2 --------- Co-authored-by: William French <[email protected]>
1 parent d7f885c commit 6214773

File tree

6 files changed

+140
-0
lines changed

6 files changed

+140
-0
lines changed

‎samples/js-api-loader-map/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Google Maps JavaScript Sample
2+
3+
This sample is generated from @googlemaps/js-samples located at
4+
https://github.com/googlemaps-samples/js-api-samples.
5+
6+
## Setup
7+
8+
### Before starting run:
9+
10+
`$npm i`
11+
12+
### Run an example on a local web server
13+
14+
First `cd` to the folder for the sample to run, then:
15+
16+
`$npm start`
17+
18+
### Build an individual example
19+
20+
From `samples/`:
21+
22+
`$npm run build --workspace=sample-name/`
23+
24+
### Build all of the examples.
25+
26+
From `samples/`:
27+
`$npm run build-all`
28+
29+
## Feedback
30+
31+
For feedback related to this sample, please open a new issue on
32+
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).

‎samples/js-api-loader-map/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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_js_api_loader_map] -->
8+
<html lang="en">
9+
<head>
10+
<title>@googlemaps/js-api-loader map</title>
11+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
12+
<meta charset="utf-8">
13+
<link rel="stylesheet" href="./style.css">
14+
</head>
15+
<body>
16+
<h1>@googlemaps/js-api-loader map</h1>
17+
<div id="map"></div>
18+
<script type="module" src="./index.ts"></script>
19+
</body>
20+
</html>
21+
<!-- [END maps_js_api_loader_map] -->

‎samples/js-api-loader-map/index.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* @license
3+
* Copyright 2019 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
// [START maps_js_api_loader_map]
8+
import { Loader } from "@googlemaps/js-api-loader";
9+
10+
const API_KEY = "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8";
11+
12+
async function initMap(): Promise<void> {
13+
const loader = new Loader({ apiKey: API_KEY });
14+
const { Map } = await loader.importLibrary("maps") as google.maps.MapsLibrary;
15+
16+
const mapOptions: google.maps.MapOptions = {
17+
center: { lat: 48.8566, lng: 2.3522 },
18+
zoom: 3,
19+
};
20+
21+
const map = new Map(document.getElementById("map") as HTMLElement, mapOptions);
22+
23+
}
24+
25+
initMap();
26+
// [END maps_js_api_loader_map]

‎samples/js-api-loader-map/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "@js-api-samples/js-api-loader-map",
3+
"version": "1.0.0",
4+
"description": "Demonstrates loading the Google Maps JavaScript API dynamically using @googlemaps/js-api-loader.",
5+
"scripts": {
6+
"build": "tsc && parcel build index.html",
7+
"test": "tsc",
8+
"start": "parcel index.html --port 5173",
9+
"preview": "npm run start"
10+
},
11+
"keywords": [],
12+
"author": "",
13+
"license": "MIT",
14+
"dependencies": {
15+
"@googlemaps/js-api-loader": "^1.0.0"
16+
},
17+
"devDependencies": {
18+
"@types/google.maps": "^3.49.2",
19+
"parcel": "^2.8.3",
20+
"typescript": "^4.9.5"
21+
}
22+
}

‎samples/js-api-loader-map/style.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* @license
3+
* Copyright 2019 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
/* [START maps_js_api_loader_map] */
7+
html, body {
8+
height: calc(100vh - 100px);
9+
padding: 0;
10+
font-family:Arial, Helvetica, sans-serif ;
11+
}
12+
13+
#map {
14+
height: calc(100vh - 100px);
15+
}
16+
17+
h1{
18+
height:30px
19+
}
20+
21+
@media screen and (max-width: 600px) {
22+
h1 {
23+
font-size: 1.2em;
24+
}
25+
}
26+
/* [END maps_js_api_loader_map] */

‎samples/js-api-loader-map/tsconfig.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es2020",
4+
"module": "es2020",
5+
"lib": ["dom", "es2020"],
6+
"strict": true,
7+
"esModuleInterop": true,
8+
"skipLibCheck": true,
9+
"forceConsistentCasingInFileNames": true,
10+
"moduleResolution": "node"
11+
},
12+
"include": ["index.ts"]
13+
}

0 commit comments

Comments
 (0)