diff --git a/samples/js-api-loader-map/README.md b/samples/js-api-loader-map/README.md
new file mode 100644
index 00000000..e89ad5bb
--- /dev/null
+++ b/samples/js-api-loader-map/README.md
@@ -0,0 +1,32 @@
+# Google Maps JavaScript Sample
+
+This sample is generated from @googlemaps/js-samples located at
+https://github.com/googlemaps-samples/js-api-samples.
+
+## Setup
+
+### Before starting run:
+
+`$npm i`
+
+### Run an example on a local web server
+
+First `cd` to the folder for the sample to run, then:
+
+`$npm start`
+
+### Build an individual example
+
+From `samples/`:
+
+`$npm run build --workspace=sample-name/`
+
+### Build all of the examples.
+
+From `samples/`:
+`$npm run build-all`
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
\ No newline at end of file
diff --git a/samples/js-api-loader-map/index.html b/samples/js-api-loader-map/index.html
new file mode 100644
index 00000000..95fcfa8c
--- /dev/null
+++ b/samples/js-api-loader-map/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+ @googlemaps/js-api-loader map
+
+
+
+
+
+
@googlemaps/js-api-loader map
+
+
+
+
+
diff --git a/samples/js-api-loader-map/index.ts b/samples/js-api-loader-map/index.ts
new file mode 100644
index 00000000..000ad32f
--- /dev/null
+++ b/samples/js-api-loader-map/index.ts
@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_js_api_loader_map]
+import { Loader } from "@googlemaps/js-api-loader";
+
+const API_KEY = "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8";
+
+async function initMap(): Promise {
+ const loader = new Loader({ apiKey: API_KEY });
+ const { Map } = await loader.importLibrary("maps") as google.maps.MapsLibrary;
+
+ const mapOptions: google.maps.MapOptions = {
+ center: { lat: 48.8566, lng: 2.3522 },
+ zoom: 3,
+ };
+
+ const map = new Map(document.getElementById("map") as HTMLElement, mapOptions);
+
+}
+
+initMap();
+// [END maps_js_api_loader_map]
\ No newline at end of file
diff --git a/samples/js-api-loader-map/package.json b/samples/js-api-loader-map/package.json
new file mode 100644
index 00000000..15cdfa6d
--- /dev/null
+++ b/samples/js-api-loader-map/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "@js-api-samples/js-api-loader-map",
+ "version": "1.0.0",
+ "description": "Demonstrates loading the Google Maps JavaScript API dynamically using @googlemaps/js-api-loader.",
+ "scripts": {
+ "build": "tsc && parcel build index.html",
+ "test": "tsc",
+ "start": "parcel index.html --port 5173",
+ "preview": "npm run start"
+ },
+ "keywords": [],
+ "author": "",
+ "license": "MIT",
+ "dependencies": {
+ "@googlemaps/js-api-loader": "^1.0.0"
+ },
+ "devDependencies": {
+ "@types/google.maps": "^3.49.2",
+ "parcel": "^2.8.3",
+ "typescript": "^4.9.5"
+ }
+}
diff --git a/samples/js-api-loader-map/style.css b/samples/js-api-loader-map/style.css
new file mode 100644
index 00000000..2d3dc247
--- /dev/null
+++ b/samples/js-api-loader-map/style.css
@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_js_api_loader_map] */
+html, body {
+ height: calc(100vh - 100px);
+ padding: 0;
+ font-family:Arial, Helvetica, sans-serif ;
+}
+
+#map {
+ height: calc(100vh - 100px);
+}
+
+h1{
+ height:30px
+}
+
+@media screen and (max-width: 600px) {
+ h1 {
+ font-size: 1.2em;
+ }
+}
+/* [END maps_js_api_loader_map] */
\ No newline at end of file
diff --git a/samples/js-api-loader-map/tsconfig.json b/samples/js-api-loader-map/tsconfig.json
new file mode 100644
index 00000000..8b901b2f
--- /dev/null
+++ b/samples/js-api-loader-map/tsconfig.json
@@ -0,0 +1,13 @@
+{
+ "compilerOptions": {
+ "target": "es2020",
+ "module": "es2020",
+ "lib": ["dom", "es2020"],
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "moduleResolution": "node"
+ },
+ "include": ["index.ts"]
+}
\ No newline at end of file