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

Maps Test Example

-
+ + + + + - - \ No newline at end of file diff --git a/samples/test-example/index.ts b/samples/test-example/index.ts index eba9c3b8..3f08941f 100644 --- a/samples/test-example/index.ts +++ b/samples/test-example/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/samples/test-example/style.css b/samples/test-example/style.css index 041ac325..d265d093 100644 --- a/samples/test-example/style.css +++ b/samples/test-example/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] */