diff --git a/dist/samples/test-example/app/index.html b/dist/samples/test-example/app/index.html index 82aa3c89..1db090c1 100644 --- a/dist/samples/test-example/app/index.html +++ b/dist/samples/test-example/app/index.html @@ -11,17 +11,23 @@ + + + +

Maps Test Example

-
+ + + + + - - \ No newline at end of file diff --git a/dist/samples/test-example/app/index.ts b/dist/samples/test-example/app/index.ts index eba9c3b8..3f08941f 100644 --- a/dist/samples/test-example/app/index.ts +++ b/dist/samples/test-example/app/index.ts @@ -3,33 +3,46 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ +/* + * This is a special sample! Having a dedicated test sample makes it easier to + * test changes in a world where sometimes changes must be merged in order to + * test them. This way we can avoid making changes to published content. + */ + // TEST COMMENT 007 // [START maps_test_example] -// Initialize and add the map. -let map; +// Declare the gmp-map element. +const mapElement = document.querySelector("gmp-map") as google.maps.MapElement; +let innerMap; +const advancedMarkerElement = document.querySelector( + "gmp-advanced-marker" +) as google.maps.marker.AdvancedMarkerElement; +let center; + async function initMap(): Promise { // [START maps_test_example_instantiate_map] - // The location of Uluru. - const position = {lat: -25.344, lng: 131.031}; - // Request the needed libraries. - const {Map} = - await google.maps.importLibrary('maps') as google.maps.MapsLibrary; - const {AdvancedMarkerElement} = - await google.maps.importLibrary('marker') as google.maps.MarkerLibrary; + const { Map } = (await google.maps.importLibrary( + "maps" + )) as google.maps.MapsLibrary; + const { AdvancedMarkerElement } = (await google.maps.importLibrary( + "marker" + )) as google.maps.MarkerLibrary; - // The map, centered at Uluru. - map = new Map(document.getElementById('map') as HTMLElement, { - zoom: 4, - center: position, - mapId: 'DEMO_MAP_ID', + // Get the inner map from the gmp-map element. + innerMap = mapElement.innerMap; + innerMap.setOptions({ + mapTypeControl: false, }); // [END maps_test_example_instantiate_map] + // Get the lat/lng from the inner map. + center = innerMap.getCenter(); + // [START maps_test_example_instantiate_marker] - // The marker, positioned at Uluru. - const marker = new AdvancedMarkerElement({map, position, title: 'Uluru'}); - // [END maps_test_example_instantiate_marker] + // Add a marker, positioned at Uluru. + const marker = new AdvancedMarkerElement({ map: innerMap, position: center, title: "Uluru" }); + // [END maps_test_example_instantiate_marker] } initMap(); // [END maps_test_example] diff --git a/dist/samples/test-example/app/style.css b/dist/samples/test-example/app/style.css index 041ac325..d265d093 100644 --- a/dist/samples/test-example/app/style.css +++ b/dist/samples/test-example/app/style.css @@ -4,22 +4,21 @@ * SPDX-License-Identifier: Apache-2.0 */ /* [START maps_test_example] */ - /* +/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ - #map { - height: 100%; - } - - /* +gmp-map { + height: 100%; +} + +/* * Optional: Makes the sample page fill the window. */ - html, - body { - height: 100%; - margin: 0; - padding: 0; - } - /* [END maps_test_example] */ - \ No newline at end of file +html, +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_test_example] */ diff --git a/dist/samples/test-example/dist/assets/index-35dha72j.js b/dist/samples/test-example/dist/assets/index-35dha72j.js deleted file mode 100644 index 549d7c48..00000000 --- a/dist/samples/test-example/dist/assets/index-35dha72j.js +++ /dev/null @@ -1,5 +0,0 @@ -(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))s(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const n of t.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&s(n)}).observe(document,{childList:!0,subtree:!0});function i(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function s(e){if(e.ep)return;e.ep=!0;const t=i(e);fetch(e.href,t)}})();/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */let c;async function a(){const o={lat:-25.344,lng:131.031},{Map:r}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:i}=await google.maps.importLibrary("marker");c=new r(document.getElementById("map"),{zoom:4,center:o,mapId:"DEMO_MAP_ID"}),new i({map:c,position:o,title:"Uluru"})}a(); diff --git a/dist/samples/test-example/dist/assets/index-kz-ac4rW.css b/dist/samples/test-example/dist/assets/index-BQyHTEHy.css similarity index 61% rename from dist/samples/test-example/dist/assets/index-kz-ac4rW.css rename to dist/samples/test-example/dist/assets/index-BQyHTEHy.css index c4e6ccdb..5cc1b1b1 100644 --- a/dist/samples/test-example/dist/assets/index-kz-ac4rW.css +++ b/dist/samples/test-example/dist/assets/index-BQyHTEHy.css @@ -2,4 +2,4 @@ * @license * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 - */#map{height:100%}html,body{height:100%;margin:0;padding:0} + */gmp-map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/test-example/dist/assets/index-Bu9F1ASI.js b/dist/samples/test-example/dist/assets/index-Bu9F1ASI.js new file mode 100644 index 00000000..e4b33ee3 --- /dev/null +++ b/dist/samples/test-example/dist/assets/index-Bu9F1ASI.js @@ -0,0 +1,5 @@ +(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const n of t.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&i(n)}).observe(document,{childList:!0,subtree:!0});function a(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function i(e){if(e.ep)return;e.ep=!0;const t=a(e);fetch(e.href,t)}})();/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const l=document.querySelector("gmp-map");let o;document.querySelector("gmp-advanced-marker");let s;async function p(){const{Map:c}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:r}=await google.maps.importLibrary("marker");o=l.innerMap,o.setOptions({mapTypeControl:!1}),s=o.getCenter(),new r({map:o,position:s,title:"Uluru"})}p(); diff --git a/dist/samples/test-example/dist/index.html b/dist/samples/test-example/dist/index.html index 46fb0b36..b50d61ca 100644 --- a/dist/samples/test-example/dist/index.html +++ b/dist/samples/test-example/dist/index.html @@ -9,19 +9,25 @@ Add a Map - - + + + + + +

Maps Test Example

-
+ + + + + - - \ No newline at end of file diff --git a/dist/samples/test-example/docs/index.html b/dist/samples/test-example/docs/index.html index 82aa3c89..1db090c1 100644 --- a/dist/samples/test-example/docs/index.html +++ b/dist/samples/test-example/docs/index.html @@ -11,17 +11,23 @@ + + + +

Maps Test Example

-
+ + + + + - - \ No newline at end of file diff --git a/dist/samples/test-example/docs/index.js b/dist/samples/test-example/docs/index.js index 5598979e..271b179d 100644 --- a/dist/samples/test-example/docs/index.js +++ b/dist/samples/test-example/docs/index.js @@ -4,28 +4,35 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ +/* + * This is a special sample! Having a dedicated test sample makes it easier to + * test changes in a world where sometimes changes must be merged in order to + * test them. This way we can avoid making changes to published content. + */ // TEST COMMENT 007 // [START maps_test_example] -// Initialize and add the map. -let map; +// Declare the gmp-map element. +const mapElement = document.querySelector("gmp-map"); +let innerMap; +const advancedMarkerElement = document.querySelector("gmp-advanced-marker"); +let center; async function initMap() { // [START maps_test_example_instantiate_map] - // The location of Uluru. - const position = { lat: -25.344, lng: 131.031 }; // Request the needed libraries. - const { Map } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); - // The map, centered at Uluru. - map = new Map(document.getElementById('map'), { - zoom: 4, - center: position, - mapId: 'DEMO_MAP_ID', + const { Map } = (await google.maps.importLibrary("maps")); + const { AdvancedMarkerElement } = (await google.maps.importLibrary("marker")); + // Get the inner map from the gmp-map element. + innerMap = mapElement.innerMap; + innerMap.setOptions({ + mapTypeControl: false, }); // [END maps_test_example_instantiate_map] + // Get the lat/lng from the inner map. + center = innerMap.getCenter(); // [START maps_test_example_instantiate_marker] - // The marker, positioned at Uluru. - const marker = new AdvancedMarkerElement({ map, position, title: 'Uluru' }); - // [END maps_test_example_instantiate_marker] + // Add a marker, positioned at Uluru. + const marker = new AdvancedMarkerElement({ map: innerMap, position: center, title: "Uluru" }); + // [END maps_test_example_instantiate_marker] } initMap(); // [END maps_test_example] diff --git a/dist/samples/test-example/docs/index.ts b/dist/samples/test-example/docs/index.ts index eba9c3b8..3f08941f 100644 --- a/dist/samples/test-example/docs/index.ts +++ b/dist/samples/test-example/docs/index.ts @@ -3,33 +3,46 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ +/* + * This is a special sample! Having a dedicated test sample makes it easier to + * test changes in a world where sometimes changes must be merged in order to + * test them. This way we can avoid making changes to published content. + */ + // TEST COMMENT 007 // [START maps_test_example] -// Initialize and add the map. -let map; +// Declare the gmp-map element. +const mapElement = document.querySelector("gmp-map") as google.maps.MapElement; +let innerMap; +const advancedMarkerElement = document.querySelector( + "gmp-advanced-marker" +) as google.maps.marker.AdvancedMarkerElement; +let center; + async function initMap(): Promise { // [START maps_test_example_instantiate_map] - // The location of Uluru. - const position = {lat: -25.344, lng: 131.031}; - // Request the needed libraries. - const {Map} = - await google.maps.importLibrary('maps') as google.maps.MapsLibrary; - const {AdvancedMarkerElement} = - await google.maps.importLibrary('marker') as google.maps.MarkerLibrary; + const { Map } = (await google.maps.importLibrary( + "maps" + )) as google.maps.MapsLibrary; + const { AdvancedMarkerElement } = (await google.maps.importLibrary( + "marker" + )) as google.maps.MarkerLibrary; - // The map, centered at Uluru. - map = new Map(document.getElementById('map') as HTMLElement, { - zoom: 4, - center: position, - mapId: 'DEMO_MAP_ID', + // Get the inner map from the gmp-map element. + innerMap = mapElement.innerMap; + innerMap.setOptions({ + mapTypeControl: false, }); // [END maps_test_example_instantiate_map] + // Get the lat/lng from the inner map. + center = innerMap.getCenter(); + // [START maps_test_example_instantiate_marker] - // The marker, positioned at Uluru. - const marker = new AdvancedMarkerElement({map, position, title: 'Uluru'}); - // [END maps_test_example_instantiate_marker] + // Add a marker, positioned at Uluru. + const marker = new AdvancedMarkerElement({ map: innerMap, position: center, title: "Uluru" }); + // [END maps_test_example_instantiate_marker] } initMap(); // [END maps_test_example] diff --git a/dist/samples/test-example/docs/style.css b/dist/samples/test-example/docs/style.css index 041ac325..d265d093 100644 --- a/dist/samples/test-example/docs/style.css +++ b/dist/samples/test-example/docs/style.css @@ -4,22 +4,21 @@ * SPDX-License-Identifier: Apache-2.0 */ /* [START maps_test_example] */ - /* +/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ - #map { - height: 100%; - } - - /* +gmp-map { + height: 100%; +} + +/* * Optional: Makes the sample page fill the window. */ - html, - body { - height: 100%; - margin: 0; - padding: 0; - } - /* [END maps_test_example] */ - \ No newline at end of file +html, +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_test_example] */ diff --git a/dist/samples/test-example/jsfiddle/demo.css b/dist/samples/test-example/jsfiddle/demo.css index d8f64de3..50925f19 100644 --- a/dist/samples/test-example/jsfiddle/demo.css +++ b/dist/samples/test-example/jsfiddle/demo.css @@ -4,22 +4,21 @@ * SPDX-License-Identifier: Apache-2.0 */ - /* +/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ - #map { - height: 100%; - } - - /* +gmp-map { + height: 100%; +} + +/* * Optional: Makes the sample page fill the window. */ - html, - body { - height: 100%; - margin: 0; - padding: 0; - } - - \ No newline at end of file +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + diff --git a/dist/samples/test-example/jsfiddle/demo.html b/dist/samples/test-example/jsfiddle/demo.html index 32d11de0..4bcebe54 100644 --- a/dist/samples/test-example/jsfiddle/demo.html +++ b/dist/samples/test-example/jsfiddle/demo.html @@ -11,16 +11,22 @@ + + + +

Maps Test Example

-
+ + + + + - - diff --git a/dist/samples/test-example/jsfiddle/demo.js b/dist/samples/test-example/jsfiddle/demo.js index 4627a693..020a080f 100644 --- a/dist/samples/test-example/jsfiddle/demo.js +++ b/dist/samples/test-example/jsfiddle/demo.js @@ -4,28 +4,35 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ +/* + * This is a special sample! Having a dedicated test sample makes it easier to + * test changes in a world where sometimes changes must be merged in order to + * test them. This way we can avoid making changes to published content. + */ // TEST COMMENT 007 -// Initialize and add the map. -let map; +// Declare the gmp-map element. +const mapElement = document.querySelector("gmp-map"); +let innerMap; +const advancedMarkerElement = document.querySelector("gmp-advanced-marker"); +let center; async function initMap() { - // The location of Uluru. - const position = { lat: -25.344, lng: 131.031 }; // Request the needed libraries. - const { Map } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); - // The map, centered at Uluru. - map = new Map(document.getElementById('map'), { - zoom: 4, - center: position, - mapId: 'DEMO_MAP_ID', + const { Map } = (await google.maps.importLibrary("maps")); + const { AdvancedMarkerElement } = (await google.maps.importLibrary("marker")); + // Get the inner map from the gmp-map element. + innerMap = mapElement.innerMap; + innerMap.setOptions({ + mapTypeControl: false, }); + // Get the lat/lng from the inner map. + center = innerMap.getCenter(); + + // Add a marker, positioned at Uluru. + const marker = new AdvancedMarkerElement({ map: innerMap, position: center, title: "Uluru" }); - // The marker, positioned at Uluru. - const marker = new AdvancedMarkerElement({ map, position, title: 'Uluru' }); - } initMap();