diff --git a/samples/advanced-markers-basic-style/index.html b/samples/advanced-markers-basic-style/index.html index 8bdfa9b9..c1aca1ab 100644 --- a/samples/advanced-markers-basic-style/index.html +++ b/samples/advanced-markers-basic-style/index.html @@ -11,13 +11,12 @@ - - -
- + + + diff --git a/samples/advanced-markers-basic-style/index.ts b/samples/advanced-markers-basic-style/index.ts index 2d6a73bb..a5bf853c 100644 --- a/samples/advanced-markers-basic-style/index.ts +++ b/samples/advanced-markers-basic-style/index.ts @@ -6,24 +6,22 @@ // [START maps_advanced_markers_basic_style] const parser = new DOMParser(); +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +let innerMap; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; - const map = new Map(document.getElementById('map') as HTMLElement, { - center: { lat: 37.419, lng: -122.02 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); + innerMap = mapElement.innerMap; // Each PinElement is paired with a MarkerView to demonstrate setting each parameter. // [START maps_advanced_markers_basic_style_title] // Default marker with title text (no PinElement). const markerViewWithText = new AdvancedMarkerElement({ - map, + map: innerMap, position: { lat: 37.419, lng: -122.03 }, title: 'Title text for the marker at lat: 37.419, lng: -122.03', }); @@ -35,7 +33,7 @@ async function initMap() { scale: 1.5, }); const markerViewScaled = new AdvancedMarkerElement({ - map, + map: innerMap, position: { lat: 37.419, lng: -122.02 }, content: pinScaled.element, }); @@ -47,7 +45,7 @@ async function initMap() { background: '#FBBC04', }); const markerViewBackground = new AdvancedMarkerElement({ - map, + map: innerMap, position: { lat: 37.419, lng: -122.01 }, content: pinBackground.element, }); @@ -59,7 +57,7 @@ async function initMap() { borderColor: '#137333', }); const markerViewBorder = new AdvancedMarkerElement({ - map, + map: innerMap, position: { lat: 37.415, lng: -122.035 }, content: pinBorder.element, }); @@ -71,7 +69,7 @@ async function initMap() { glyphColor: 'white', }); const markerViewGlyph = new AdvancedMarkerElement({ - map, + map: innerMap, position: { lat: 37.415, lng: -122.025 }, content: pinGlyph.element, }); @@ -83,7 +81,7 @@ async function initMap() { glyphColor: 'white', }); const markerViewGlyphText = new AdvancedMarkerElement({ - map, + map: innerMap, position: { lat: 37.415, lng: -122.015 }, content: pinTextGlyph.element, }); @@ -95,7 +93,7 @@ async function initMap() { glyph: '', }); const markerViewNoGlyph = new AdvancedMarkerElement({ - map, + map: innerMap, position: { lat: 37.415, lng: -122.005 }, content: pinNoGlyph.element, }); @@ -104,4 +102,4 @@ async function initMap() { } initMap(); -// [END maps_advanced_markers_basic_style] \ No newline at end of file +// [END maps_advanced_markers_basic_style] diff --git a/samples/advanced-markers-basic-style/style.css b/samples/advanced-markers-basic-style/style.css index 66a5f08a..57f4b29d 100644 --- a/samples/advanced-markers-basic-style/style.css +++ b/samples/advanced-markers-basic-style/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/samples/advanced-markers-collision/index.html b/samples/advanced-markers-collision/index.html index c9d4e412..b4725575 100644 --- a/samples/advanced-markers-collision/index.html +++ b/samples/advanced-markers-collision/index.html @@ -21,10 +21,13 @@ + +
-
+
- - - diff --git a/samples/advanced-markers-collision/index.ts b/samples/advanced-markers-collision/index.ts index 4fb454db..c82310b6 100644 --- a/samples/advanced-markers-collision/index.ts +++ b/samples/advanced-markers-collision/index.ts @@ -6,33 +6,30 @@ // eslint-disable no-undef // [START maps_advanced_markers_collision] -let map: google.maps.Map; +const mapElement = document.querySelector("gmp-map") as google.maps.MapElement; +let innerMap; // Initialize and add the map async function initMap(): Promise { // Request 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; + let markers: google.maps.marker.AdvancedMarkerElement[] = []; let collisionBehavior = google.maps.CollisionBehavior.REQUIRED; - map = new Map( - document.getElementById("map") as HTMLElement, - { - mapId: "6ff586e93e18149f", - center: { lat: 47.609414458375674, lng: -122.33897030353548 }, - zoom: 17, - } as google.maps.MapOptions - ); + innerMap = mapElement.innerMap; // @ts-ignore const select = new mdc.select.MDCSelect( document.querySelector(".mdc-select") as HTMLElement ); - select.listen("MDCSelect:change", () => { collisionBehavior = select.value; markers.forEach((marker) => { @@ -63,7 +60,7 @@ async function initMap(): Promise { // [START maps_advanced_markers_collision_create_marker] const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), - map, + map: innerMap, collisionBehavior: collisionBehavior, }); // [END maps_advanced_markers_collision_create_marker] @@ -72,4 +69,4 @@ async function initMap(): Promise { } initMap(); -// [END maps_advanced_markers_collision] \ No newline at end of file +// [END maps_advanced_markers_collision] diff --git a/samples/advanced-markers-collision/style.css b/samples/advanced-markers-collision/style.css index e59fa27b..b5ead478 100644 --- a/samples/advanced-markers-collision/style.css +++ b/samples/advanced-markers-collision/style.css @@ -40,13 +40,13 @@ body { flex-basis: 15rem; flex-grow: 1; padding: 1rem; - max-width: 30rem; + max-width: 33rem; height: 100%; box-sizing: border-box; overflow: auto; } -#map { +gmp-map { flex-basis: 0; flex-grow: 4; height: 100%; diff --git a/samples/advanced-markers-draggable/index.html b/samples/advanced-markers-draggable/index.html index e61373da..e1df7bfc 100644 --- a/samples/advanced-markers-draggable/index.html +++ b/samples/advanced-markers-draggable/index.html @@ -11,13 +11,12 @@ - - -
- + + + diff --git a/samples/advanced-markers-draggable/index.ts b/samples/advanced-markers-draggable/index.ts index b7268104..a5e3639e 100644 --- a/samples/advanced-markers-draggable/index.ts +++ b/samples/advanced-markers-draggable/index.ts @@ -5,35 +5,31 @@ */ // [START maps_advanced_markers_draggable] +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; + async function initMap() { // Request needed libraries. const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; - - const map = new Map(document.getElementById('map') as HTMLElement, { - center: {lat: 37.39094933041195, lng: -122.02503913145092}, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); const infoWindow = new InfoWindow(); // [START maps_advanced_markers_draggable_marker] const draggableMarker = new AdvancedMarkerElement({ - map, position: {lat: 37.39094933041195, lng: -122.02503913145092}, gmpDraggable: true, title: "This marker is draggable.", }); + mapElement.append(draggableMarker); // [END maps_advanced_markers_draggable_marker] + draggableMarker.addListener('dragend', (event) => { const position = draggableMarker.position as google.maps.LatLng; infoWindow.close(); infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`); infoWindow.open(draggableMarker.map, draggableMarker); }); - } initMap(); -// [END maps_advanced_markers_draggable] \ No newline at end of file +// [END maps_advanced_markers_draggable] diff --git a/samples/advanced-markers-draggable/style.css b/samples/advanced-markers-draggable/style.css index 316c1899..1d28b1cb 100644 --- a/samples/advanced-markers-draggable/style.css +++ b/samples/advanced-markers-draggable/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/samples/advanced-markers-html-simple/index.html b/samples/advanced-markers-html-simple/index.html index 5b177756..63f996e1 100644 --- a/samples/advanced-markers-html-simple/index.html +++ b/samples/advanced-markers-html-simple/index.html @@ -1,4 +1,4 @@ - + + + + diff --git a/samples/advanced-markers-html-simple/index.ts b/samples/advanced-markers-html-simple/index.ts index a722b171..1f777db1 100644 --- a/samples/advanced-markers-html-simple/index.ts +++ b/samples/advanced-markers-html-simple/index.ts @@ -6,26 +6,26 @@ // [START maps_advanced_markers_html_simple] // [START maps_advanced_markers_html_simple_snippet] +const mapElement = document.querySelector("gmp-map") as google.maps.MapElement; + async function initMap() { // Request 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 = new Map(document.getElementById('map') as HTMLElement, { - center: { lat: 37.42, lng: -122.1 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); + const { Map } = (await google.maps.importLibrary( + "maps" + )) as google.maps.MapsLibrary; + const { AdvancedMarkerElement } = (await google.maps.importLibrary( + "marker" + )) as google.maps.MarkerLibrary; - const priceTag = document.createElement('div'); - priceTag.className = 'price-tag'; - priceTag.textContent = '$2.5M'; + const priceTag = document.createElement("div"); + priceTag.className = "price-tag"; + priceTag.textContent = "$2.5M"; const marker = new AdvancedMarkerElement({ - map, position: { lat: 37.42, lng: -122.1 }, content: priceTag, }); + mapElement.append(marker); } // [END maps_advanced_markers_html_simple_snippet] initMap(); diff --git a/samples/advanced-markers-html-simple/style.css b/samples/advanced-markers-html-simple/style.css index 489a5547..5f17b9d8 100644 --- a/samples/advanced-markers-html-simple/style.css +++ b/samples/advanced-markers-html-simple/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } @@ -24,9 +24,9 @@ body { /* HTML marker styles */ .price-tag { - background-color: #4285F4; + background-color: #4285f4; border-radius: 8px; - color: #FFFFFF; + color: #ffffff; font-size: 14px; padding: 10px 15px; position: relative; @@ -43,7 +43,7 @@ body { height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; - border-top: 8px solid #4285F4; + border-top: 8px solid #4285f4; } -/* [END maps_advanced_markers_html_simple] */ \ No newline at end of file +/* [END maps_advanced_markers_html_simple] */ diff --git a/samples/advanced-markers-simple/index.html b/samples/advanced-markers-simple/index.html index 95330d1e..26efc246 100644 --- a/samples/advanced-markers-simple/index.html +++ b/samples/advanced-markers-simple/index.html @@ -11,13 +11,12 @@ - - -
- + + + diff --git a/samples/advanced-markers-simple/index.ts b/samples/advanced-markers-simple/index.ts index 29439274..99ebd78a 100644 --- a/samples/advanced-markers-simple/index.ts +++ b/samples/advanced-markers-simple/index.ts @@ -6,22 +6,21 @@ // [START maps_advanced_markers_simple] // [START maps_advanced_markers_simple_snippet] +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +let innerMap; + async function initMap() { // Request 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 = new Map(document.getElementById('map') as HTMLElement, { - center: { lat: 37.4239163, lng: -122.0947209 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); + innerMap = mapElement.innerMap; const marker = new AdvancedMarkerElement({ - map, + map: innerMap, position: { lat: 37.4239163, lng: -122.0947209 }, }); } // [END maps_advanced_markers_simple_snippet] initMap(); -// [END maps_advanced_markers_simple] \ No newline at end of file +// [END maps_advanced_markers_simple] diff --git a/samples/advanced-markers-simple/style.css b/samples/advanced-markers-simple/style.css index 0cc9310b..8b0e49d9 100644 --- a/samples/advanced-markers-simple/style.css +++ b/samples/advanced-markers-simple/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/samples/advanced-markers-zoom/index.html b/samples/advanced-markers-zoom/index.html index 968569cd..8f4c39ce 100644 --- a/samples/advanced-markers-zoom/index.html +++ b/samples/advanced-markers-zoom/index.html @@ -1,4 +1,4 @@ - + + + + diff --git a/samples/advanced-markers-zoom/index.ts b/samples/advanced-markers-zoom/index.ts index b513872a..78c5a76d 100644 --- a/samples/advanced-markers-zoom/index.ts +++ b/samples/advanced-markers-zoom/index.ts @@ -1,4 +1,3 @@ - /** * @license * Copyright 2019 Google LLC. All Rights Reserved. @@ -6,53 +5,56 @@ */ // [START maps_advanced_markers_zoom] +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +let innerMap; + async function initMap() { - // Request 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 = new Map(document.getElementById('map') as HTMLElement, { - center: {lat: 37.424563902650114, lng: -122.09512859577026}, - zoom: 17, - mapId: '4504f8b37365c3d0', - }); - - const marker01 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4239163, lng: -122.094 }, - title: 'This marker is visible at zoom level 15 and higher.' - }); - - const marker02 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4245, lng: -122.096 }, - title: 'This marker is visible at zoom level 16 and higher.' - }); - - const marker03 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4249, lng: -122.095 }, - title: 'This marker is visible at zoom level 17 and higher.' - }); - - const marker04 = new AdvancedMarkerElement({ - map, - position: { lat: 37.425, lng: -122.0955 }, - title: 'This marker is visible at zoom level 18 and higher.' - }); - // [START maps_advanced_markers_zoom_listener] - map.addListener('zoom_changed', () => { - const zoom = map.getZoom(); - if (zoom) { - // Only show each marker above a certain zoom level. - marker01.map = zoom > 14 ? map : null; - marker02.map = zoom > 15 ? map : null; - marker03.map = zoom > 16 ? map : null; - marker04.map = zoom > 17 ? map : null; - } - }); - // [END maps_advanced_markers_zoom_listener] + // Request needed libraries. + const { Map } = (await google.maps.importLibrary( + "maps" + )) as google.maps.MapsLibrary; + const { AdvancedMarkerElement } = (await google.maps.importLibrary( + "marker" + )) as google.maps.MarkerLibrary; + + innerMap = mapElement.innerMap; + + const marker01 = new AdvancedMarkerElement({ + map: innerMap, + position: { lat: 37.4239163, lng: -122.094 }, + title: "This marker is visible at zoom level 15 and higher.", + }); + + const marker02 = new AdvancedMarkerElement({ + map: innerMap, + position: { lat: 37.4245, lng: -122.096 }, + title: "This marker is visible at zoom level 16 and higher.", + }); + + const marker03 = new AdvancedMarkerElement({ + map: innerMap, + position: { lat: 37.4249, lng: -122.095 }, + title: "This marker is visible at zoom level 17 and higher.", + }); + + const marker04 = new AdvancedMarkerElement({ + map: innerMap, + position: { lat: 37.425, lng: -122.0955 }, + title: "This marker is visible at zoom level 18 and higher.", + }); + // [START maps_advanced_markers_zoom_listener] + innerMap.addListener("zoom_changed", () => { + const zoom = innerMap.getZoom(); + if (zoom) { + // Only show each marker above a certain zoom level. + marker01.map = zoom > 14 ? innerMap : null; + marker02.map = zoom > 15 ? innerMap : null; + marker03.map = zoom > 16 ? innerMap : null; + marker04.map = zoom > 17 ? innerMap : null; + } + }); + // [END maps_advanced_markers_zoom_listener] } initMap(); -// [END maps_advanced_markers_zoom] \ No newline at end of file +// [END maps_advanced_markers_zoom] diff --git a/samples/advanced-markers-zoom/style.css b/samples/advanced-markers-zoom/style.css index a748b5a2..b70100d0 100644 --- a/samples/advanced-markers-zoom/style.css +++ b/samples/advanced-markers-zoom/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; }