Skip to content

Commit 1156d5b

Browse files
willum070willum070
authored
fix: Updates loader example to use new conventions. (#976)
* fix: Updates loader example to use new conventions. * Typecast imported Map library to google.maps.MapsLibrary
1 parent ccc820c commit 1156d5b

File tree

6 files changed

+149
-0
lines changed

6 files changed

+149
-0
lines changed

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Google Maps JavaScript Sample
2+
3+
## js-api-loader-map
4+
5+
The js-api-loader-map sample demonstrates how to load the Google Maps JavaScript API using the JS API Loader.
6+
7+
Follow these instructions to set up and run js-api-loader-map sample on your local computer.
8+
9+
## Setup
10+
11+
### Before starting run:
12+
13+
`$npm i`
14+
15+
### Run an example on a local web server
16+
17+
First `cd` to the folder for the sample to run, then:
18+
19+
`$npm start`
20+
21+
### Build an individual example
22+
23+
From `samples/`:
24+
25+
`$npm run build --workspace=js-api-loader-map/`
26+
27+
### Build all of the examples.
28+
29+
From `samples/`:
30+
`$npm run build-all`
31+
32+
## Feedback
33+
34+
For feedback related to this sample, please open a new issue on
35+
[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>
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" type="text/css" href="./style.css" />
14+
<script type="module" src="./index.js"></script>
15+
</head>
16+
<body>
17+
<h1>@googlemaps/js-api-loader map</h1>
18+
<div id="map"></div>
19+
</body>
20+
</html>
21+
<!-- [END maps_js_api_loader_map] -->

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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 { setOptions, importLibrary } from "@googlemaps/js-api-loader";
9+
10+
const API_KEY = "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8";
11+
12+
async function initMap(): Promise<void> {
13+
setOptions({ key: API_KEY });
14+
15+
const { Map } = await importLibrary("maps") as google.maps.MapsLibrary;
16+
17+
const mapOptions = {
18+
center: { lat: 48.8566, lng: 2.3522 },
19+
zoom: 3,
20+
};
21+
22+
const map = new Map(document.getElementById("map") as HTMLElement, mapOptions);
23+
24+
}
25+
26+
initMap();
27+
// [END maps_js_api_loader_map]

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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 && bash ../jsfiddle.sh js-api-loader-map && bash ../docs.sh js-api-loader-map && npm run build:vite --workspace=. && bash ../dist.sh js-api-loader-map",
7+
"test": "tsc",
8+
"start": "tsc && vite build --base './' && vite",
9+
"build:vite": "vite build --base './'",
10+
"preview": "npm run start"
11+
},
12+
"keywords": [],
13+
"author": "",
14+
"license": "MIT",
15+
"dependencies": {
16+
"@googlemaps/js-api-loader": "^2.0.2"
17+
},
18+
"devDependencies": {
19+
"@types/google.maps": "^3.49.2",
20+
"parcel": "^2.16.1",
21+
"typescript": "^5.9.3"
22+
}
23+
}

‎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: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"compilerOptions": {
3+
"module": "esnext",
4+
"target": "esnext",
5+
"strict": true,
6+
"noImplicitAny": false,
7+
"lib": [
8+
"es2015",
9+
"esnext",
10+
"es6",
11+
"dom",
12+
"dom.iterable"
13+
],
14+
"moduleResolution": "Node",
15+
"jsx": "preserve"
16+
}
17+
}

0 commit comments

Comments
 (0)