feat: add beta samples (#199)

Former-commit-id: 9f8d8dc Former-commit-id: ee023d731667979da361b72faba7f94c90ded15d
googlemaps · Jun 15, 2020 · 2cc1791 · 2cc1791
1 parent bdbdfbf
commit 2cc1791
Show file tree

Hide file tree

Showing 42 changed files with 1,939 additions and 2 deletions.
diff --git a/data.json b/data.json
@@ -81,6 +81,7 @@
     "Showing Pixel and Tile Coordinates": "map-coordinates",
     "Map Events Explorer": "map-events",
     "Geolocation": "map-geolocation",
+    "Map Id Style": "map-id-style",
     "Localizing the Map": "map-language",
     "Lat/Lng Object Literal": "map-latlng-literal",
     "Custom Map Projections": "map-projection-simple",
@@ -96,6 +97,7 @@
     "Marker Animations With setTimeout()": "marker-animations-iteration",
     "Marker Animations": "marker-animations",
     "Marker Clustering": "marker-clustering",
+    "Marker Collision Management": "marker-collision-management",
     "Marker Labels": "marker-labels",
     "Removing Markers": "marker-remove",
     "Simple Markers": "marker-simple",
@@ -147,6 +149,7 @@
     "Street View Side-By-Side": "streetview-simple",
     "Styled Maps - Night Mode": "style-array",
     "Styled Map Selection": "style-selector",
-    "User-Editable Shapes": "user-editable-shapes"
+    "User-Editable Shapes": "user-editable-shapes",
+    "Vector Initial Static Load": "vector-use-static-map"
   }
 }
diff --git a/dist/index.html.REMOVED.git-id b/dist/index.html.REMOVED.git-id
@@ -1 +1 @@
-078076acf36baf240c68f0cb3ae916aa1683d9d7
+30e82d874c2de6e2217e4d82f2e2bb787ab09c63
diff --git a/dist/samples/map-id-style/app.js b/dist/samples/map-id-style/app.js
@@ -0,0 +1,16 @@
+(function(exports) {
+  "use strict";
+
+  function initMap() {
+    new google.maps.Map(document.getElementById("map"), {
+      mapId: "8e0a97af9386fef",
+      center: {
+        lat: 48.85,
+        lng: 2.35
+      },
+      zoom: 12
+    });
+  }
+
+  exports.initMap = initMap;
+})((this.window = this.window || {}));
diff --git a/dist/samples/map-id-style/iframe.html b/dist/samples/map-id-style/iframe.html
@@ -0,0 +1,40 @@
+<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
+<script
+  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCb1xprYSpXd0q_yDsJ1W2UGhfl9_YGKU0&callback=initMap&libraries=&v=beta&map_ids=8e0a97af9386fef"
+  defer
+></script>
+<style type="text/css">
+  /* 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;
+  }
+</style>
+<script>
+  (function(exports) {
+    "use strict";
+
+    function initMap() {
+      new google.maps.Map(document.getElementById("map"), {
+        mapId: "8e0a97af9386fef",
+        center: {
+          lat: 48.85,
+          lng: 2.35
+        },
+        zoom: 12
+      });
+    }
+
+    exports.initMap = initMap;
+  })((this.window = this.window || {}));
+</script>
+
+<div id="map"></div>
diff --git a/dist/samples/map-id-style/index.html b/dist/samples/map-id-style/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Using a Map Id</title>
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCb1xprYSpXd0q_yDsJ1W2UGhfl9_YGKU0&callback=initMap&libraries=&v=beta&map_ids=8e0a97af9386fef"
+      defer
+    ></script>
+    <style type="text/css">
+      /* 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;
+      }
+    </style>
+    <script>
+      (function(exports) {
+        "use strict";
+
+        function initMap() {
+          new google.maps.Map(document.getElementById("map"), {
+            mapId: "8e0a97af9386fef",
+            center: {
+              lat: 48.85,
+              lng: 2.35
+            },
+            zoom: 12
+          });
+        }
+
+        exports.initMap = initMap;
+      })((this.window = this.window || {}));
+    </script>
+  </head>
+  <body>
+    <div id="map"></div>
+  </body>
+</html>
diff --git a/dist/samples/map-id-style/inline.html b/dist/samples/map-id-style/inline.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Using a Map Id</title>
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=beta&map_ids=8e0a97af9386fef"
+      defer
+    ></script>
+    <style type="text/css">
+      /* 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;
+      }
+    </style>
+    <script>
+      (function(exports) {
+        "use strict";
+
+        function initMap() {
+          new google.maps.Map(document.getElementById("map"), {
+            mapId: "8e0a97af9386fef",
+            center: {
+              lat: 48.85,
+              lng: 2.35
+            },
+            zoom: 12
+          });
+        }
+
+        exports.initMap = initMap;
+      })((this.window = this.window || {}));
+    </script>
+  </head>
+  <body>
+    <div id="map"></div>
+  </body>
+</html>
diff --git a/dist/samples/map-id-style/jsfiddle.html b/dist/samples/map-id-style/jsfiddle.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Using a Map Id</title>
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=&v=beta&map_ids=8e0a97af9386fef"
+      defer
+    ></script>
+    <!-- jsFiddle will insert css and js -->
+  </head>
+  <body>
+    <div id="map"></div>
+  </body>
+</html>
diff --git a/dist/samples/map-id-style/sample.html b/dist/samples/map-id-style/sample.html
@@ -0,0 +1,22 @@
+<!-- [START maps_map_id_style] -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Using a Map Id</title>
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
+    <!-- [START maps_map_id_style_html_head_api] -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=beta&map_ids=8e0a97af9386fef"
+      defer
+    ></script>
+    <!-- [END maps_map_id_style_htmll_head_api] -->
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script src="./app.js"></script>
+  </head>
+  <body>
+    <!-- [START maps_map_id_style_html] -->
+    <div id="map"></div>
+    <!-- [END maps_map_id_style_html] -->
+  </body>
+</html>
+<!-- [END maps_map_id_style] -->
diff --git a/dist/samples/map-id-style/style.css b/dist/samples/map-id-style/style.css
@@ -0,0 +1,16 @@
+/* [START maps_map_id_style] */
+/* 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;
+}
+
+/* [END maps_map_id_style] */
diff --git a/dist/samples/marker-collision-management/app.js b/dist/samples/marker-collision-management/app.js
@@ -0,0 +1,71 @@
+(function(exports) {
+  "use strict";
+
+  // eslint-disable no-undef
+
+  // Initialize and add the map
+
+  function initMap() {
+    let markers = [];
+    let collisionBehavior = google.maps.CollisionBehavior.REQUIRED;
+    exports.map = new google.maps.Map(document.getElementById("map"), {
+      mapId: "3a3b33f0edd6ed2a",
+      center: {
+        lat: 47.609414458375674,
+        lng: -122.33897030353548
+      },
+      zoom: 17
+    });
+    const menuList = document.querySelector(".mdc-list"); // Add the behaviors to the select options
+
+    for (let [key, value] of Object.entries(google.maps.CollisionBehavior)) {
+      const item = document.createElement("LI");
+      item.classList.add("mdc-list-item");
+      item.setAttribute("data-value", key);
+      const itemText = document.createElement("SPAN");
+      itemText.classList.add("mdc-list-item__text");
+      itemText.innerText = value;
+      item.appendChild(itemText);
+      menuList.appendChild(item);
+    }
+
+    exports.select = new mdc.select.MDCSelect(
+      document.querySelector(".mdc-select")
+    );
+    exports.select.listen("MDCSelect:change", () => {
+      collisionBehavior = exports.select.value;
+      markers.forEach(function(marker) {
+        marker.set("collisionBehavior", collisionBehavior);
+      });
+    });
+    exports.select.value = collisionBehavior; // Create some markers on the map
+
+    markers = [
+      [-122.3402, 47.6093],
+      [-122.3402, 47.6094],
+      [-122.3403, 47.6094],
+      [-122.3384, 47.6098],
+      [-122.3389, 47.6095],
+      [-122.3396, 47.6095],
+      [-122.3379, 47.6097],
+      [-122.3378, 47.6097],
+      [-122.3396, 47.6091],
+      [-122.3383, 47.6089],
+      [-122.3379, 47.6093],
+      [-122.3381, 47.6095],
+      [-122.3378, 47.6095]
+    ].map(
+      ([lng, lat]) =>
+        new google.maps.Marker({
+          position: new google.maps.LatLng({
+            lat,
+            lng
+          }),
+          map: exports.map,
+          collisionBehavior: collisionBehavior
+        })
+    );
+  }
+
+  exports.initMap = initMap;
+})((this.window = this.window || {}));