diff --git a/data.json b/data.json index fe072dfc03..4b7ad6b05d 100644 --- 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 index f44dc028a9..dff0db2ba1 100644 --- a/dist/index.html.REMOVED.git-id +++ b/dist/index.html.REMOVED.git-id @@ -1 +1 @@ -078076acf36baf240c68f0cb3ae916aa1683d9d7 \ No newline at end of file +30e82d874c2de6e2217e4d82f2e2bb787ab09c63 \ No newline at end of file diff --git a/dist/samples/map-id-style/app.js b/dist/samples/map-id-style/app.js new file mode 100755 index 0000000000..f3f9e10340 --- /dev/null +++ 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 new file mode 100755 index 0000000000..0be518dd2a --- /dev/null +++ b/dist/samples/map-id-style/iframe.html @@ -0,0 +1,40 @@ + + + + + +
diff --git a/dist/samples/map-id-style/index.html b/dist/samples/map-id-style/index.html new file mode 100755 index 0000000000..8066f59dd3 --- /dev/null +++ b/dist/samples/map-id-style/index.html @@ -0,0 +1,47 @@ + + + + Using a Map Id + + + + + + +
+ + diff --git a/dist/samples/map-id-style/inline.html b/dist/samples/map-id-style/inline.html new file mode 100755 index 0000000000..9e3fb0991c --- /dev/null +++ b/dist/samples/map-id-style/inline.html @@ -0,0 +1,47 @@ + + + + Using a Map Id + + + + + + +
+ + diff --git a/dist/samples/map-id-style/jsfiddle.html b/dist/samples/map-id-style/jsfiddle.html new file mode 100755 index 0000000000..b8a16a52f3 --- /dev/null +++ b/dist/samples/map-id-style/jsfiddle.html @@ -0,0 +1,15 @@ + + + + Using a Map Id + + + + + +
+ + diff --git a/dist/samples/map-id-style/sample.html b/dist/samples/map-id-style/sample.html new file mode 100755 index 0000000000..6d219e81f4 --- /dev/null +++ b/dist/samples/map-id-style/sample.html @@ -0,0 +1,22 @@ + + + + + Using a Map Id + + + + + + + + + +
+ + + + diff --git a/dist/samples/map-id-style/style.css b/dist/samples/map-id-style/style.css new file mode 100755 index 0000000000..29eeda3066 --- /dev/null +++ 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 new file mode 100755 index 0000000000..d308ef1d56 --- /dev/null +++ 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 || {})); diff --git a/dist/samples/marker-collision-management/iframe.html b/dist/samples/marker-collision-management/iframe.html new file mode 100755 index 0000000000..2baa742d66 --- /dev/null +++ b/dist/samples/marker-collision-management/iframe.html @@ -0,0 +1,237 @@ + + + + + + + + +
+ diff --git a/dist/samples/marker-collision-management/index.html b/dist/samples/marker-collision-management/index.html new file mode 100755 index 0000000000..e5ffac0028 --- /dev/null +++ b/dist/samples/marker-collision-management/index.html @@ -0,0 +1,247 @@ + + + + Marker Collision Management + + + + + + + + + +
+ + + diff --git a/dist/samples/marker-collision-management/inline.html b/dist/samples/marker-collision-management/inline.html new file mode 100755 index 0000000000..7ca8097364 --- /dev/null +++ b/dist/samples/marker-collision-management/inline.html @@ -0,0 +1,162 @@ + + + + Marker Collision Management + + + + + + + + + +
+ + + diff --git a/dist/samples/marker-collision-management/jsfiddle.html b/dist/samples/marker-collision-management/jsfiddle.html new file mode 100755 index 0000000000..dd82b718c6 --- /dev/null +++ b/dist/samples/marker-collision-management/jsfiddle.html @@ -0,0 +1,52 @@ + + + + Marker Collision Management + + + + + + + + +
+ + + diff --git a/dist/samples/marker-collision-management/sample.html b/dist/samples/marker-collision-management/sample.html new file mode 100755 index 0000000000..3e75ff610d --- /dev/null +++ b/dist/samples/marker-collision-management/sample.html @@ -0,0 +1,59 @@ + + + + + Marker Collision Management + + + + + + + + + + + + +
+ + + + + diff --git a/dist/samples/marker-collision-management/style.css b/dist/samples/marker-collision-management/style.css new file mode 100755 index 0000000000..8056438c20 --- /dev/null +++ b/dist/samples/marker-collision-management/style.css @@ -0,0 +1,37 @@ +/* [START maps_marker_collision_management] */ +:root { + --mdc-theme-primary: #1a73e8; + --mdc-theme-secondary: #rgb(225, 245, 254); + --mdc-theme-on-primary: #fff; + --mdc-theme-on-secondary: rgb(1, 87, 155); +} + +.mdc-select--focused .mdc-select__dropdown-icon { + background: url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E) + no-repeat center; +} + +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%; +} + +.mdc-select__anchor, +.mdc-select__menu { + width: 100%; +} + +/* [END maps_marker_collision_management] */ diff --git a/dist/samples/vector-use-static-map/app.js b/dist/samples/vector-use-static-map/app.js new file mode 100755 index 0000000000..cb664b2a1a --- /dev/null +++ b/dist/samples/vector-use-static-map/app.js @@ -0,0 +1,28 @@ +(function(exports) { + "use strict"; + + // 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 + }); + new google.maps.Map(document.getElementById("right"), { + ...sharedOptions, + mapId: "ed1309c122a3dfcb", + useStaticMap: true + }); + } + + exports.initMap = initMap; +})((this.window = this.window || {})); diff --git a/dist/samples/vector-use-static-map/iframe.html b/dist/samples/vector-use-static-map/iframe.html new file mode 100755 index 0000000000..b758c363fe --- /dev/null +++ b/dist/samples/vector-use-static-map/iframe.html @@ -0,0 +1,130 @@ + + + + + +
+
+ +
diff --git a/dist/samples/vector-use-static-map/index.html b/dist/samples/vector-use-static-map/index.html new file mode 100755 index 0000000000..00f14b08ca --- /dev/null +++ b/dist/samples/vector-use-static-map/index.html @@ -0,0 +1,137 @@ + + + + Vector Initial Static Map + + + + + + +
+
+ +
+ + diff --git a/dist/samples/vector-use-static-map/inline.html b/dist/samples/vector-use-static-map/inline.html new file mode 100755 index 0000000000..bc1a8d6311 --- /dev/null +++ b/dist/samples/vector-use-static-map/inline.html @@ -0,0 +1,68 @@ + + + + Vector Initial Static Map + + + + + + +
+
+ +
+ + diff --git a/dist/samples/vector-use-static-map/jsfiddle.html b/dist/samples/vector-use-static-map/jsfiddle.html new file mode 100755 index 0000000000..64cfb44318 --- /dev/null +++ b/dist/samples/vector-use-static-map/jsfiddle.html @@ -0,0 +1,18 @@ + + + + Vector Initial Static Map + + + + + +
+
+ +
+ + diff --git a/dist/samples/vector-use-static-map/sample.html b/dist/samples/vector-use-static-map/sample.html new file mode 100755 index 0000000000..72e2158e43 --- /dev/null +++ b/dist/samples/vector-use-static-map/sample.html @@ -0,0 +1,25 @@ + + + + + Vector Initial Static Map + + + + + + + + + +
+
+ +
+ + + + 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 %} + +
+ + +{% 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%; +}