+
+
+
+
diff --git a/dist/samples/vector-use-static-map/style.css b/dist/samples/vector-use-static-map/style.css
new file mode 100755
index 0000000000..2d339d7b9f
--- /dev/null
+++ b/dist/samples/vector-use-static-map/style.css
@@ -0,0 +1,22 @@
+/* [START maps_vector_use_static_map] */
+html,
+body,
+.container {
+ height: 100%;
+}
+
+.container {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0;
+}
+
+.map {
+ display: flex;
+ flex-direction: column;
+ flex-basis: 100%;
+ flex: 1;
+ height: 100%;
+}
+
+/* [END maps_vector_use_static_map] */
diff --git a/rules/sample.bzl b/rules/sample.bzl
index cd387271cc..5205274bc6 100644
--- a/rules/sample.bzl
+++ b/rules/sample.bzl
@@ -59,6 +59,8 @@ def sample():
src = ":_scss_without_header.scss",
deps = [
"//shared/scss:default",
+ "//shared/scss:sidebar",
+ "//shared/scss:material-design-theme",
],
output_name = "_style.css",
sourcemap = False,
diff --git a/samples/map-id-style/BUILD.bazel b/samples/map-id-style/BUILD.bazel
new file mode 100644
index 0000000000..f1dd0452cf
--- /dev/null
+++ b/samples/map-id-style/BUILD.bazel
@@ -0,0 +1,16 @@
+ # Copyright 2019 Google LLC. All Rights Reserved.
+ #
+ # Licensed under the Apache License, Version 2.0 (the "License");
+ # you may not use this file except in compliance with the License.
+ # You may obtain a copy of the License at
+ #
+ # http://www.apache.org/licenses/LICENSE-2.0
+ #
+ # Unless required by applicable law or agreed to in writing, software
+ # distributed under the License is distributed on an "AS IS" BASIS,
+ # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ # See the License for the specific language governing permissions and
+ # limitations under the License.
+load("//rules:sample.bzl", "sample")
+
+sample()
diff --git a/samples/map-id-style/package.json b/samples/map-id-style/package.json
new file mode 100644
index 0000000000..c8f1202308
--- /dev/null
+++ b/samples/map-id-style/package.json
@@ -0,0 +1,8 @@
+{
+ "name": "map-id",
+ "title": "Using a Map Id",
+ "callback": "initMap",
+ "libraries": [],
+ "version": "weekly",
+ "tag": "map_id_style"
+}
diff --git a/samples/map-id-style/src/index.js b/samples/map-id-style/src/index.js
new file mode 100644
index 0000000000..1db0ecd506
--- /dev/null
+++ b/samples/map-id-style/src/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// [START maps_map_id_style]
+function initMap() {
+ new google.maps.Map(document.getElementById("map"), {
+ mapId: "8e0a97af9386fef",
+ center: { lat: 48.85, lng: 2.35 },
+ zoom: 12
+ });
+}
+// [END maps_map_id_style]
+export { initMap };
diff --git a/samples/map-id-style/src/index.njk b/samples/map-id-style/src/index.njk
new file mode 100644
index 0000000000..ca665d1ad5
--- /dev/null
+++ b/samples/map-id-style/src/index.njk
@@ -0,0 +1,25 @@
+
+{% extends '../../../shared/layout.njk'%} {% block api %}
+
+{% endblock %} {% block html %}
+
+
+
+{% endblock %}
diff --git a/samples/map-id-style/src/style.scss b/samples/map-id-style/src/style.scss
new file mode 100644
index 0000000000..b688c22aee
--- /dev/null
+++ b/samples/map-id-style/src/style.scss
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* [START maps_map_id_style] */
+@import "../../../shared/scss/default.scss";
+
+/* [END maps_map_id_style] */
diff --git a/samples/marker-collision-management/BUILD.bazel b/samples/marker-collision-management/BUILD.bazel
new file mode 100644
index 0000000000..f1dd0452cf
--- /dev/null
+++ b/samples/marker-collision-management/BUILD.bazel
@@ -0,0 +1,16 @@
+ # Copyright 2019 Google LLC. All Rights Reserved.
+ #
+ # Licensed under the Apache License, Version 2.0 (the "License");
+ # you may not use this file except in compliance with the License.
+ # You may obtain a copy of the License at
+ #
+ # http://www.apache.org/licenses/LICENSE-2.0
+ #
+ # Unless required by applicable law or agreed to in writing, software
+ # distributed under the License is distributed on an "AS IS" BASIS,
+ # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ # See the License for the specific language governing permissions and
+ # limitations under the License.
+load("//rules:sample.bzl", "sample")
+
+sample()
diff --git a/samples/marker-collision-management/package.json b/samples/marker-collision-management/package.json
new file mode 100644
index 0000000000..6971169d20
--- /dev/null
+++ b/samples/marker-collision-management/package.json
@@ -0,0 +1,8 @@
+{
+ "name": "marker-collision-management",
+ "title": "Marker Collision Management",
+ "callback": "initMap",
+ "libraries": [],
+ "version": "weekly",
+ "tag": "marker_collision_management"
+}
diff --git a/samples/marker-collision-management/src/index.js b/samples/marker-collision-management/src/index.js
new file mode 100644
index 0000000000..240360416f
--- /dev/null
+++ b/samples/marker-collision-management/src/index.js
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// eslint-disable no-undef
+// [START maps_marker_collision_management]
+let map;
+let select;
+
+// Initialize and add the map
+function initMap() {
+ let markers = [];
+ let collisionBehavior = google.maps.CollisionBehavior.REQUIRED;
+
+ 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);
+ }
+
+ select = new mdc.select.MDCSelect(document.querySelector(".mdc-select"));
+
+ select.listen("MDCSelect:change", () => {
+ collisionBehavior = select.value;
+ markers.forEach(function(marker) {
+ marker.set("collisionBehavior", collisionBehavior);
+ });
+ });
+
+ 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]) =>
+ // [START maps_marker_collision_management_create_marker]
+ new google.maps.Marker({
+ position: new google.maps.LatLng({ lat, lng }),
+ map: map,
+ collisionBehavior: collisionBehavior
+ })
+ // [END maps_marker_collision_management_create_marker]
+ );
+}
+// [END maps_marker_collision_management]
+export { initMap, map, select };
diff --git a/samples/marker-collision-management/src/index.njk b/samples/marker-collision-management/src/index.njk
new file mode 100644
index 0000000000..2d43a3da4d
--- /dev/null
+++ b/samples/marker-collision-management/src/index.njk
@@ -0,0 +1,49 @@
+
+{% extends '../../../shared/layout.njk'%}
+{% block external %}
+
+
+
+{% endblock %}
+{% block api %}
+
+{% endblock %}
+{% block html %}
+
+
+
+
+
+
+
+
+
+
+ Pick a Collision Behavior
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/samples/marker-collision-management/src/style.scss b/samples/marker-collision-management/src/style.scss
new file mode 100644
index 0000000000..4bbef0a767
--- /dev/null
+++ b/samples/marker-collision-management/src/style.scss
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* [START maps_marker_collision_management] */
+@import "../../../shared/scss/material-design-theme.scss";
+@import "../../../shared/scss/sidebar.scss";
+
+.mdc-select__anchor,
+.mdc-select__menu {
+ width: 100%;
+}
+
+/* [END maps_marker_collision_management] */
diff --git a/samples/samples.bzl b/samples/samples.bzl
index d2755fbaf0..1c94745816 100644
--- a/samples/samples.bzl
+++ b/samples/samples.bzl
@@ -83,6 +83,7 @@ SAMPLES = [
"map-coordinates",
"map-events",
"map-geolocation",
+ "map-id-style",
"map-language",
"map-latlng-literal",
"map-projection-simple",
@@ -98,6 +99,7 @@ SAMPLES = [
"marker-animations",
"marker-animations-iteration",
"marker-clustering",
+ "marker-collision-management",
"marker-labels",
"marker-remove",
"marker-simple",
@@ -150,4 +152,5 @@ SAMPLES = [
"style-array",
"style-selector",
"user-editable-shapes",
+ "vector-use-static-map",
]
diff --git a/samples/vector-use-static-map/BUILD.bazel b/samples/vector-use-static-map/BUILD.bazel
new file mode 100644
index 0000000000..f1dd0452cf
--- /dev/null
+++ b/samples/vector-use-static-map/BUILD.bazel
@@ -0,0 +1,16 @@
+ # Copyright 2019 Google LLC. All Rights Reserved.
+ #
+ # Licensed under the Apache License, Version 2.0 (the "License");
+ # you may not use this file except in compliance with the License.
+ # You may obtain a copy of the License at
+ #
+ # http://www.apache.org/licenses/LICENSE-2.0
+ #
+ # Unless required by applicable law or agreed to in writing, software
+ # distributed under the License is distributed on an "AS IS" BASIS,
+ # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ # See the License for the specific language governing permissions and
+ # limitations under the License.
+load("//rules:sample.bzl", "sample")
+
+sample()
diff --git a/samples/vector-use-static-map/package.json b/samples/vector-use-static-map/package.json
new file mode 100644
index 0000000000..63e47d83a9
--- /dev/null
+++ b/samples/vector-use-static-map/package.json
@@ -0,0 +1,8 @@
+{
+ "name": "vector-use-static-map",
+ "title": "Vector Initial Static Map",
+ "callback": "initMap",
+ "libraries": [],
+ "version": "weekly",
+ "tag": "vector_use_static_map"
+}
diff --git a/samples/vector-use-static-map/src/index.js b/samples/vector-use-static-map/src/index.js
new file mode 100644
index 0000000000..5cfd037a5e
--- /dev/null
+++ b/samples/vector-use-static-map/src/index.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// [START maps_vector_use_static_map]
+// Initialize and add the side by side maps
+function initMap() {
+ const sharedOptions = {
+ center: { lat: 47.609414458375674, lng: -122.33897030353548 },
+ zoom: 17,
+ disableDefaultUI: true,
+ gestureHandling: "none"
+ };
+
+ new google.maps.Map(document.getElementById("left"), {
+ ...sharedOptions,
+ mapId: "ed1309c122a3dfcb",
+ useStaticMap: false
+ });
+
+ // [START maps_vector_use_static_map_js_instantiate]
+ new google.maps.Map(document.getElementById("right"), {
+ ...sharedOptions,
+ mapId: "ed1309c122a3dfcb",
+ useStaticMap: true
+ });
+ // [END maps_vector_use_static_map_js_instantiate]
+}
+// [END maps_vector_use_static_map]
+export { initMap };
diff --git a/samples/vector-use-static-map/src/index.njk b/samples/vector-use-static-map/src/index.njk
new file mode 100644
index 0000000000..3eb9c11b9b
--- /dev/null
+++ b/samples/vector-use-static-map/src/index.njk
@@ -0,0 +1,28 @@
+
+{% extends '../../../shared/layout.njk'%} {% block api %}
+
+{% endblock %} {% block html %}
+
+
+
+
+
+
+{% endblock %}
diff --git a/samples/vector-use-static-map/src/style.scss b/samples/vector-use-static-map/src/style.scss
new file mode 100644
index 0000000000..b49f6a1737
--- /dev/null
+++ b/samples/vector-use-static-map/src/style.scss
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* [START maps_vector_use_static_map] */
+html,
+body,
+.container {
+ height: 100%;
+}
+
+.container {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0;
+}
+
+.map {
+ display: flex;
+ flex-direction: column;
+ flex-basis: 100%;
+ flex: 1;
+ height: 100%;
+}
+/* [END maps_vector_use_static_map] */
diff --git a/shared/scss/BUILD.bazel b/shared/scss/BUILD.bazel
index d6cd094695..164a12f046 100644
--- a/shared/scss/BUILD.bazel
+++ b/shared/scss/BUILD.bazel
@@ -36,3 +36,8 @@ sass_library(
name = "material-design-theme",
srcs = ["_material-design-theme.scss"],
)
+
+sass_library(
+ name = "sidebar",
+ srcs = ["_sidebar.scss"],
+)
diff --git a/shared/scss/_sidebar.scss b/shared/scss/_sidebar.scss
new file mode 100644
index 0000000000..e79058b324
--- /dev/null
+++ b/shared/scss/_sidebar.scss
@@ -0,0 +1,17 @@
+body {
+ display: flex;
+ margin: 0;
+}
+
+#sidebar {
+ flex-basis: 15rem;
+ flex-grow: 1;
+ padding: 1rem;
+ max-width: 30rem;
+}
+
+#map {
+ flex-basis: 0;
+ flex-grow: 4;
+ height: 100%;
+}