test 1

ShorpAzha · web-flow · commit 8977d36f4ff5 · 2025-08-05T16:45:05.000+02:00
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,17 @@
+/* 
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map. 
+ */
+#map {
+  height: 100%;
+}
+
+/* 
+ * Optional: Makes the sample page fill the window. 
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<html>
+  <head>
+    <title>Data Layer: Simple</title>
+
+    <link rel="stylesheet" type="text/css" href="css/style.css" />
+    <script type="module" src="js/script.js"></script>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <!-- 
+      The `defer` attribute causes the script to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises. See
+      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
+      defer
+    ></script>
+  </body>
+</html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,14 @@
+let map;
+
+function initMap() {
+  map = new google.maps.Map(document.getElementById("map"), {
+    zoom: 4,
+    center: { lat: -28, lng: 137 },
+  });
+  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
+  map.data.loadGeoJson(
+    "https://storage.googleapis.com/mapsdevsite/json/google.json",
+  );
+}
+
+window.initMap = initMap;
