diff --git a/dist/index.html b/dist/index.html index d5f0f2200..eb2e27a4c 100644 --- a/dist/index.html +++ b/dist/index.html @@ -34,6 +34,8 @@

Maps JSAPI Samples

  • add-map
  • address-validation
  • advanced-markers-animation
    • +
  • advanced-markers-html
    • +
  • advanced-markers-html-simple
  • deckgl-heatmap
  • deckgl-kml
  • deckgl-kml-updated
    • diff --git a/dist/samples/advanced-markers-html-simple/app/.eslintsrc.json b/dist/samples/advanced-markers-html-simple/app/.eslintsrc.json new file mode 100644 index 000000000..4c44dab04 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/app/.eslintsrc.json @@ -0,0 +1,13 @@ +{ + "extends": [ + "plugin:@typescript-eslint/recommended" + ], + "parser": "@typescript-eslint/parser", + "rules": { + "@typescript-eslint/ban-ts-comment": 0, + "@typescript-eslint/no-this-alias": 1, + "@typescript-eslint/no-empty-function": 1, + "@typescript-eslint/explicit-module-boundary-types": 1, + "@typescript-eslint/no-unused-vars": 1 + } +} diff --git a/dist/samples/advanced-markers-html-simple/app/README.md b/dist/samples/advanced-markers-html-simple/app/README.md new file mode 100644 index 000000000..385d89239 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/app/README.md @@ -0,0 +1,33 @@ +# Google Maps JavaScript Sample + +This sample is generated from @googlemaps/js-samples located at +https://github.com/googlemaps-samples/js-api-samples. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +First `cd` to the folder for the sample to run, then: + +`npm start` + +### Build an individual example + +From `samples/`: + +`npm run build --workspace=sample-name/` + +### Build all of the examples. + +From `samples/`: + +`npm run build-all` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). diff --git a/dist/samples/advanced-markers-html-simple/app/index.html b/dist/samples/advanced-markers-html-simple/app/index.html new file mode 100644 index 000000000..2ab0adce1 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/app/index.html @@ -0,0 +1,23 @@ + + + + + + Advanced Marker Simple HTML + + + + + +
    + + + + + + diff --git a/dist/samples/advanced-markers-html-simple/app/index.ts b/dist/samples/advanced-markers-html-simple/app/index.ts new file mode 100644 index 000000000..a722b1718 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/app/index.ts @@ -0,0 +1,32 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_advanced_markers_html_simple] +// [START maps_advanced_markers_html_simple_snippet] +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 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, + }); +} +// [END maps_advanced_markers_html_simple_snippet] +initMap(); +// [END maps_advanced_markers_html_simple] diff --git a/dist/samples/advanced-markers-html-simple/app/package.json b/dist/samples/advanced-markers-html-simple/app/package.json new file mode 100644 index 000000000..bb2170a5f --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/app/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/advanced-markers-html-simple", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh advanced-markers-html-simple && bash ../app.sh advanced-markers-html-simple && bash ../docs.sh advanced-markers-html-simple && npm run build:vite --workspace=. && bash ../dist.sh advanced-markers-html-simple", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/dist/samples/advanced-markers-html-simple/app/style.css b/dist/samples/advanced-markers-html-simple/app/style.css new file mode 100644 index 000000000..489a55472 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/app/style.css @@ -0,0 +1,49 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_advanced_markers_html_simple] */ +/* + * 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; +} + +/* HTML marker styles */ +.price-tag { + background-color: #4285F4; + border-radius: 8px; + color: #FFFFFF; + font-size: 14px; + padding: 10px 15px; + position: relative; + transform: translateY(-8px); +} + +.price-tag::after { + content: ""; + position: absolute; + left: 50%; + top: 100%; + transform: translate(-50%, 0); + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 8px solid #4285F4; +} + +/* [END maps_advanced_markers_html_simple] */ \ No newline at end of file diff --git a/dist/samples/advanced-markers-html-simple/app/tsconfig.json b/dist/samples/advanced-markers-html-simple/app/tsconfig.json new file mode 100644 index 000000000..366aabb04 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/app/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} diff --git a/dist/samples/advanced-markers-html-simple/dist/assets/index-Bzi1-kwo.css b/dist/samples/advanced-markers-html-simple/dist/assets/index-Bzi1-kwo.css new file mode 100644 index 000000000..a88e35fb0 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/dist/assets/index-Bzi1-kwo.css @@ -0,0 +1,5 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */#map{height:100%}html,body{height:100%;margin:0;padding:0}.price-tag{background-color:#4285f4;border-radius:8px;color:#fff;font-size:14px;padding:10px 15px;position:relative;transform:translateY(-8px)}.price-tag:after{content:"";position:absolute;left:50%;top:100%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #4285F4} diff --git a/dist/samples/advanced-markers-html-simple/dist/assets/index-CLyJqEP7.js b/dist/samples/advanced-markers-html-simple/dist/assets/index-CLyJqEP7.js new file mode 100644 index 000000000..e5c95aa96 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/dist/assets/index-CLyJqEP7.js @@ -0,0 +1,5 @@ +(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))r(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const i of t.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&r(i)}).observe(document,{childList:!0,subtree:!0});function n(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 r(e){if(e.ep)return;e.ep=!0;const t=n(e);fetch(e.href,t)}})();/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */async function s(){const{Map:c}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:o}=await google.maps.importLibrary("marker"),n=new c(document.getElementById("map"),{center:{lat:37.42,lng:-122.1},zoom:14,mapId:"4504f8b37365c3d0"}),r=document.createElement("div");r.className="price-tag",r.textContent="$2.5M",new o({map:n,position:{lat:37.42,lng:-122.1},content:r})}s(); diff --git a/dist/samples/advanced-markers-html-simple/dist/index.html b/dist/samples/advanced-markers-html-simple/dist/index.html new file mode 100644 index 000000000..4bbfc3241 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/dist/index.html @@ -0,0 +1,23 @@ + + + + + + Advanced Marker Simple HTML + + + + + +
    + + + + + + diff --git a/dist/samples/advanced-markers-html-simple/docs/index.html b/dist/samples/advanced-markers-html-simple/docs/index.html new file mode 100644 index 000000000..2ab0adce1 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/docs/index.html @@ -0,0 +1,23 @@ + + + + + + Advanced Marker Simple HTML + + + + + +
    + + + + + + diff --git a/dist/samples/advanced-markers-html-simple/docs/index.js b/dist/samples/advanced-markers-html-simple/docs/index.js new file mode 100644 index 000000000..433faacfc --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/docs/index.js @@ -0,0 +1,29 @@ +"use strict"; +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_advanced_markers_html_simple] +// [START maps_advanced_markers_html_simple_snippet] +async function initMap() { + // Request needed libraries. + const { Map } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + const map = new Map(document.getElementById('map'), { + center: { lat: 37.42, lng: -122.1 }, + zoom: 14, + mapId: '4504f8b37365c3d0', + }); + 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, + }); +} +// [END maps_advanced_markers_html_simple_snippet] +initMap(); +// [END maps_advanced_markers_html_simple] diff --git a/dist/samples/advanced-markers-html-simple/docs/index.ts b/dist/samples/advanced-markers-html-simple/docs/index.ts new file mode 100644 index 000000000..a722b1718 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/docs/index.ts @@ -0,0 +1,32 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_advanced_markers_html_simple] +// [START maps_advanced_markers_html_simple_snippet] +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 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, + }); +} +// [END maps_advanced_markers_html_simple_snippet] +initMap(); +// [END maps_advanced_markers_html_simple] diff --git a/dist/samples/advanced-markers-html-simple/docs/style.css b/dist/samples/advanced-markers-html-simple/docs/style.css new file mode 100644 index 000000000..489a55472 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/docs/style.css @@ -0,0 +1,49 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_advanced_markers_html_simple] */ +/* + * 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; +} + +/* HTML marker styles */ +.price-tag { + background-color: #4285F4; + border-radius: 8px; + color: #FFFFFF; + font-size: 14px; + padding: 10px 15px; + position: relative; + transform: translateY(-8px); +} + +.price-tag::after { + content: ""; + position: absolute; + left: 50%; + top: 100%; + transform: translate(-50%, 0); + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 8px solid #4285F4; +} + +/* [END maps_advanced_markers_html_simple] */ \ No newline at end of file diff --git a/dist/samples/advanced-markers-html-simple/jsfiddle/demo.css b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.css new file mode 100644 index 000000000..c033273b8 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.css @@ -0,0 +1,48 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * 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%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* HTML marker styles */ +.price-tag { + background-color: #4285F4; + border-radius: 8px; + color: #FFFFFF; + font-size: 14px; + padding: 10px 15px; + position: relative; + transform: translateY(-8px); +} + +.price-tag::after { + content: ""; + position: absolute; + left: 50%; + top: 100%; + transform: translate(-50%, 0); + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 8px solid #4285F4; +} + diff --git a/dist/samples/advanced-markers-html-simple/jsfiddle/demo.details b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.details new file mode 100644 index 000000000..884a5404c --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: advanced-markers-html-simple +authors: + - Geo Developer IX Documentation Team +tags: + - google maps +load_type: h +description: Sample code supporting Google Maps Platform JavaScript API documentation. diff --git a/dist/samples/advanced-markers-html-simple/jsfiddle/demo.html b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.html new file mode 100644 index 000000000..74704c2d4 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.html @@ -0,0 +1,23 @@ + + + + + + Advanced Marker Simple HTML + + + + + +
    + + + + + + diff --git a/dist/samples/advanced-markers-html-simple/jsfiddle/demo.js b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.js new file mode 100644 index 000000000..9fd3697ea --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.js @@ -0,0 +1,29 @@ +"use strict"; +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + + +async function initMap() { + // Request needed libraries. + const { Map } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + const map = new Map(document.getElementById('map'), { + center: { lat: 37.42, lng: -122.1 }, + zoom: 14, + mapId: '4504f8b37365c3d0', + }); + 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, + }); +} + +initMap(); + diff --git a/dist/samples/advanced-markers-html/app/.eslintsrc.json b/dist/samples/advanced-markers-html/app/.eslintsrc.json new file mode 100644 index 000000000..4c44dab04 --- /dev/null +++ b/dist/samples/advanced-markers-html/app/.eslintsrc.json @@ -0,0 +1,13 @@ +{ + "extends": [ + "plugin:@typescript-eslint/recommended" + ], + "parser": "@typescript-eslint/parser", + "rules": { + "@typescript-eslint/ban-ts-comment": 0, + "@typescript-eslint/no-this-alias": 1, + "@typescript-eslint/no-empty-function": 1, + "@typescript-eslint/explicit-module-boundary-types": 1, + "@typescript-eslint/no-unused-vars": 1 + } +} diff --git a/dist/samples/advanced-markers-html/app/README.md b/dist/samples/advanced-markers-html/app/README.md new file mode 100644 index 000000000..385d89239 --- /dev/null +++ b/dist/samples/advanced-markers-html/app/README.md @@ -0,0 +1,33 @@ +# Google Maps JavaScript Sample + +This sample is generated from @googlemaps/js-samples located at +https://github.com/googlemaps-samples/js-api-samples. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +First `cd` to the folder for the sample to run, then: + +`npm start` + +### Build an individual example + +From `samples/`: + +`npm run build --workspace=sample-name/` + +### Build all of the examples. + +From `samples/`: + +`npm run build-all` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). diff --git a/dist/samples/advanced-markers-html/app/index.html b/dist/samples/advanced-markers-html/app/index.html new file mode 100644 index 000000000..2ff97bff9 --- /dev/null +++ b/dist/samples/advanced-markers-html/app/index.html @@ -0,0 +1,25 @@ + + + + + + Advanced Markers with HTML + + + + + + + +
    + + + + + + diff --git a/dist/samples/advanced-markers-html/app/index.ts b/dist/samples/advanced-markers-html/app/index.ts new file mode 100644 index 000000000..3fbe3263d --- /dev/null +++ b/dist/samples/advanced-markers-html/app/index.ts @@ -0,0 +1,203 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_advanced_markers_html] +// [START maps_advanced_markers_html_snippet] +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 center = {lat: 37.43238031167444, lng: -122.16795397128632}; + const map = new Map(document.getElementById("map") as HTMLElement, { + zoom: 11, + center, + mapId: "4504f8b37365c3d0", + }); + + for (const property of properties) { + const AdvancedMarkerElement = new google.maps.marker.AdvancedMarkerElement({ + map, + content: buildContent(property), + position: property.position, + title: property.description, + }); + + AdvancedMarkerElement.addListener("click", () => { + toggleHighlight(AdvancedMarkerElement, property); + }); + } +} + +function toggleHighlight(markerView, property) { + if (markerView.content.classList.contains("highlight")) { + markerView.content.classList.remove("highlight"); + markerView.zIndex = null; + } else { + markerView.content.classList.add("highlight"); + markerView.zIndex = 1; + } +} + +function buildContent(property) { + const content = document.createElement("div"); + content.classList.add("property"); + content.innerHTML = ` +
    + + ${property.type} +
    +
    +
    ${property.price}
    +
    ${property.address}
    +
    +
    + + bedroom + ${property.bed} +
    +
    + + bathroom + ${property.bath} +
    +
    + + size + ${property.size} ft2 +
    +
    +
    + `; + return content; +} + +const properties = [{ + address: '215 Emily St, MountainView, CA', + description: 'Single family house with modern design', + price: '$ 3,889,000', + type: 'home', + bed: 5, + bath: 4.5, + size: 300, + position: { + lat: 37.50024109655184, + lng: -122.28528451834352, + }, +}, { + address: '108 Squirrel Ln 🐿, Menlo Park, CA', + description: 'Townhouse with friendly neighbors', + price: '$ 3,050,000', + type: 'building', + bed: 4, + bath: 3, + size: 200, + position: { + lat: 37.44440882321596, + lng: -122.2160620727, + }, +}, +// [END maps_advanced_markers_html_snippet] +{ + address: '100 Chris St, Portola Valley, CA', + description: 'Spacious warehouse great for small business', + price: '$ 3,125,000', + type: 'warehouse', + bed: 4, + bath: 4, + size: 800, + position: { + lat: 37.39561833718522, + lng: -122.21855116258479, + }, +}, { + address: '98 Aleh Ave, Palo Alto, CA', + description: 'A lovely store on busy road', + price: '$ 4,225,000', + type: 'store-alt', + bed: 2, + bath: 1, + size: 210, + position: { + lat: 37.423928529779644, + lng: -122.1087629822001, + }, +}, { + address: '2117 Su St, MountainView, CA', + description: 'Single family house near golf club', + price: '$ 1,700,000', + type: 'home', + bed: 4, + bath: 3, + size: 200, + position: { + lat: 37.40578635332598, + lng: -122.15043378466069, + }, +}, { + address: '197 Alicia Dr, Santa Clara, CA', + description: 'Multifloor large warehouse', + price: '$ 5,000,000', + type: 'warehouse', + bed: 5, + bath: 4, + size: 700, + position: { + lat: 37.36399747905774, + lng: -122.10465384268522, + }, +}, { + address: '700 Jose Ave, Sunnyvale, CA', + description: '3 storey townhouse with 2 car garage', + price: '$ 3,850,000', + type: 'building', + bed: 4, + bath: 4, + size: 600, + position: { + lat: 37.38343706184458, + lng: -122.02340436985183, + }, +}, { + address: '868 Will Ct, Cupertino, CA', + description: 'Single family house in great school zone', + price: '$ 2,500,000', + type: 'home', + bed: 3, + bath: 2, + size: 100, + position: { + lat: 37.34576403052, + lng: -122.04455090047453, + }, +}, { + address: '655 Haylee St, Santa Clara, CA', + description: '2 storey store with large storage room', + price: '$ 2,500,000', + type: 'store-alt', + bed: 3, + bath: 2, + size: 450, + position: { + lat: 37.362863347890716, + lng: -121.97802139023555, + }, +}, { + address: '2019 Natasha Dr, San Jose, CA', + description: 'Single family house', + price: '$ 2,325,000', + type: 'home', + bed: 4, + bath: 3.5, + size: 500, + position: { + lat: 37.41391636421949, + lng: -121.94592071575907, + }, +}]; + +initMap(); +// [END maps_advanced_markers_html] diff --git a/dist/samples/advanced-markers-html/app/package.json b/dist/samples/advanced-markers-html/app/package.json new file mode 100644 index 000000000..18d467c0b --- /dev/null +++ b/dist/samples/advanced-markers-html/app/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/advanced-markers-html", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh advanced-markers-html && bash ../app.sh advanced-markers-html && bash ../docs.sh advanced-markers-html && npm run build:vite --workspace=. && bash ../dist.sh advanced-markers-html", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/dist/samples/advanced-markers-html/app/style.css b/dist/samples/advanced-markers-html/app/style.css new file mode 100644 index 000000000..52df28ceb --- /dev/null +++ b/dist/samples/advanced-markers-html/app/style.css @@ -0,0 +1,209 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_advanced_markers_html] */ +:root { + --building-color: #FF9800; + --house-color: #0288D1; + --shop-color: #7B1FA2; + --warehouse-color: #558B2F; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; + width: 100%; +} + +/* + * Property styles in unhighlighted state. + */ +.property { + align-items: center; + background-color: #FFFFFF; + border-radius: 50%; + color: #263238; + display: flex; + font-size: 14px; + gap: 15px; + height: 30px; + justify-content: center; + padding: 4px; + position: relative; + position: relative; + transition: all 0.3s ease-out; + width: 30px; + transform: translateY(-9px) +} + +.property::after { + border-left: 9px solid transparent; + border-right: 9px solid transparent; + border-top: 9px solid #FFFFFF; + content: ""; + height: 0; + left: 50%; + position: absolute; + top: 95%; + transform: translate(-50%, 0); + transition: all 0.3s ease-out; + width: 0; + z-index: 1; +} + +.property .icon { + align-items: center; + display: flex; + justify-content: center; + color: #FFFFFF; +} + +.property .icon svg { + height: 20px; + width: auto; +} + +.property .details { + display: none; + flex-direction: column; + flex: 1; +} + +.property .address { + color: #9E9E9E; + font-size: 10px; + margin-bottom: 10px; + margin-top: 5px; +} + +.property .features { + align-items: flex-end; + display: flex; + flex-direction: row; + gap: 10px; +} + +.property .features > div { + align-items: center; + background: #F5F5F5; + border-radius: 5px; + border: 1px solid #ccc; + display: flex; + font-size: 10px; + gap: 5px; + padding: 5px; +} + +/* + * Property styles in highlighted state. + */ +.property.highlight { + background-color: #FFFFFF; + border-radius: 8px; + box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2); + height: 80px; + padding: 8px 15px; + width: auto; +} + +.property.highlight::after { + border-top: 9px solid #FFFFFF; +} + +.property.highlight .details { + display: flex; +} + +.property.highlight .icon svg { + width: 50px; + height: 50px; +} + +.property .bed { + color: #FFA000; +} + +.property .bath { + color: #03A9F4; +} + +.property .size { + color: #388E3C; +} + +/* + * House icon colors. + */ +.property.highlight:has(.fa-house) .icon { + color: var(--house-color); +} + +.property:not(.highlight):has(.fa-house) { + background-color: var(--house-color); +} + +.property:not(.highlight):has(.fa-house)::after { + border-top: 9px solid var(--house-color); +} + +/* + * Building icon colors. + */ +.property.highlight:has(.fa-building) .icon { + color: var(--building-color); +} + +.property:not(.highlight):has(.fa-building) { + background-color: var(--building-color); +} + +.property:not(.highlight):has(.fa-building)::after { + border-top: 9px solid var(--building-color); +} + +/* + * Warehouse icon colors. + */ +.property.highlight:has(.fa-warehouse) .icon { + color: var(--warehouse-color); +} + +.property:not(.highlight):has(.fa-warehouse) { + background-color: var(--warehouse-color); +} + +.property:not(.highlight):has(.fa-warehouse)::after { + border-top: 9px solid var(--warehouse-color); +} + +/* + * Shop icon colors. + */ +.property.highlight:has(.fa-shop) .icon { + color: var(--shop-color); +} + +.property:not(.highlight):has(.fa-shop) { + background-color: var(--shop-color); +} + +.property:not(.highlight):has(.fa-shop)::after { + border-top: 9px solid var(--shop-color); +} + +/* [END maps_advanced_markers_html] */ \ No newline at end of file diff --git a/dist/samples/advanced-markers-html/app/tsconfig.json b/dist/samples/advanced-markers-html/app/tsconfig.json new file mode 100644 index 000000000..366aabb04 --- /dev/null +++ b/dist/samples/advanced-markers-html/app/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} diff --git a/dist/samples/advanced-markers-html/dist/assets/index-ByNSGz5B.js b/dist/samples/advanced-markers-html/dist/assets/index-ByNSGz5B.js new file mode 100644 index 000000000..52a1d7aa6 --- /dev/null +++ b/dist/samples/advanced-markers-html/dist/assets/index-ByNSGz5B.js @@ -0,0 +1,31 @@ +(function(){const s=document.createElement("link").relList;if(s&&s.supports&&s.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))a(e);new MutationObserver(e=>{for(const i of e)if(i.type==="childList")for(const n of i.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&a(n)}).observe(document,{childList:!0,subtree:!0});function o(e){const i={};return e.integrity&&(i.integrity=e.integrity),e.referrerPolicy&&(i.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?i.credentials="include":e.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function a(e){if(e.ep)return;e.ep=!0;const i=o(e);fetch(e.href,i)}})();/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */async function r(){const{Map:t}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:s}=await google.maps.importLibrary("marker"),o={lat:37.43238031167444,lng:-122.16795397128632},a=new t(document.getElementById("map"),{zoom:11,center:o,mapId:"4504f8b37365c3d0"});for(const e of c){const i=new google.maps.marker.AdvancedMarkerElement({map:a,content:d(e),position:e.position,title:e.description});i.addListener("click",()=>{l(i)})}}function l(t,s){t.content.classList.contains("highlight")?(t.content.classList.remove("highlight"),t.zIndex=null):(t.content.classList.add("highlight"),t.zIndex=1)}function d(t){const s=document.createElement("div");return s.classList.add("property"),s.innerHTML=` +
    + + ${t.type} +
    +
    +
    ${t.price}
    +
    ${t.address}
    +
    +
    + + bedroom + ${t.bed} +
    +
    + + bathroom + ${t.bath} +
    +
    + + size + ${t.size} ft2 +
    +
    +
    + `,s}const c=[{address:"215 Emily St, MountainView, CA",description:"Single family house with modern design",price:"$ 3,889,000",type:"home",bed:5,bath:4.5,size:300,position:{lat:37.50024109655184,lng:-122.28528451834352}},{address:"108 Squirrel Ln 🐿, Menlo Park, CA",description:"Townhouse with friendly neighbors",price:"$ 3,050,000",type:"building",bed:4,bath:3,size:200,position:{lat:37.44440882321596,lng:-122.2160620727}},{address:"100 Chris St, Portola Valley, CA",description:"Spacious warehouse great for small business",price:"$ 3,125,000",type:"warehouse",bed:4,bath:4,size:800,position:{lat:37.39561833718522,lng:-122.21855116258479}},{address:"98 Aleh Ave, Palo Alto, CA",description:"A lovely store on busy road",price:"$ 4,225,000",type:"store-alt",bed:2,bath:1,size:210,position:{lat:37.423928529779644,lng:-122.1087629822001}},{address:"2117 Su St, MountainView, CA",description:"Single family house near golf club",price:"$ 1,700,000",type:"home",bed:4,bath:3,size:200,position:{lat:37.40578635332598,lng:-122.15043378466069}},{address:"197 Alicia Dr, Santa Clara, CA",description:"Multifloor large warehouse",price:"$ 5,000,000",type:"warehouse",bed:5,bath:4,size:700,position:{lat:37.36399747905774,lng:-122.10465384268522}},{address:"700 Jose Ave, Sunnyvale, CA",description:"3 storey townhouse with 2 car garage",price:"$ 3,850,000",type:"building",bed:4,bath:4,size:600,position:{lat:37.38343706184458,lng:-122.02340436985183}},{address:"868 Will Ct, Cupertino, CA",description:"Single family house in great school zone",price:"$ 2,500,000",type:"home",bed:3,bath:2,size:100,position:{lat:37.34576403052,lng:-122.04455090047453}},{address:"655 Haylee St, Santa Clara, CA",description:"2 storey store with large storage room",price:"$ 2,500,000",type:"store-alt",bed:3,bath:2,size:450,position:{lat:37.362863347890716,lng:-121.97802139023555}},{address:"2019 Natasha Dr, San Jose, CA",description:"Single family house",price:"$ 2,325,000",type:"home",bed:4,bath:3.5,size:500,position:{lat:37.41391636421949,lng:-121.94592071575907}}];r(); diff --git a/dist/samples/advanced-markers-html/dist/assets/index-D60bRyLB.css b/dist/samples/advanced-markers-html/dist/assets/index-D60bRyLB.css new file mode 100644 index 000000000..94369a9d2 --- /dev/null +++ b/dist/samples/advanced-markers-html/dist/assets/index-D60bRyLB.css @@ -0,0 +1,5 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */:root{--building-color: #FF9800;--house-color: #0288D1;--shop-color: #7B1FA2;--warehouse-color: #558B2F}html,body{height:100%;margin:0;padding:0}#map{height:100%;width:100%}.property{align-items:center;background-color:#fff;border-radius:50%;color:#263238;display:flex;font-size:14px;gap:15px;height:30px;justify-content:center;padding:4px;position:relative;transition:all .3s ease-out;width:30px;transform:translateY(-9px)}.property:after{border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #FFFFFF;content:"";height:0;left:50%;position:absolute;top:95%;transform:translate(-50%);transition:all .3s ease-out;width:0;z-index:1}.property .icon{align-items:center;display:flex;justify-content:center;color:#fff}.property .icon svg{height:20px;width:auto}.property .details{display:none;flex-direction:column;flex:1}.property .address{color:#9e9e9e;font-size:10px;margin-bottom:10px;margin-top:5px}.property .features{align-items:flex-end;display:flex;flex-direction:row;gap:10px}.property .features>div{align-items:center;background:#f5f5f5;border-radius:5px;border:1px solid #ccc;display:flex;font-size:10px;gap:5px;padding:5px}.property.highlight{background-color:#fff;border-radius:8px;box-shadow:10px 10px 5px #0003;height:80px;padding:8px 15px;width:auto}.property.highlight:after{border-top:9px solid #FFFFFF}.property.highlight .details{display:flex}.property.highlight .icon svg{width:50px;height:50px}.property .bed{color:#ffa000}.property .bath{color:#03a9f4}.property .size{color:#388e3c}.property.highlight:has(.fa-house) .icon{color:var(--house-color)}.property:not(.highlight):has(.fa-house){background-color:var(--house-color)}.property:not(.highlight):has(.fa-house):after{border-top:9px solid var(--house-color)}.property.highlight:has(.fa-building) .icon{color:var(--building-color)}.property:not(.highlight):has(.fa-building){background-color:var(--building-color)}.property:not(.highlight):has(.fa-building):after{border-top:9px solid var(--building-color)}.property.highlight:has(.fa-warehouse) .icon{color:var(--warehouse-color)}.property:not(.highlight):has(.fa-warehouse){background-color:var(--warehouse-color)}.property:not(.highlight):has(.fa-warehouse):after{border-top:9px solid var(--warehouse-color)}.property.highlight:has(.fa-shop) .icon{color:var(--shop-color)}.property:not(.highlight):has(.fa-shop){background-color:var(--shop-color)}.property:not(.highlight):has(.fa-shop):after{border-top:9px solid var(--shop-color)} diff --git a/dist/samples/advanced-markers-html/dist/index.html b/dist/samples/advanced-markers-html/dist/index.html new file mode 100644 index 000000000..254318ba1 --- /dev/null +++ b/dist/samples/advanced-markers-html/dist/index.html @@ -0,0 +1,25 @@ + + + + + + Advanced Markers with HTML + + + + + + + +
    + + + + + + diff --git a/dist/samples/advanced-markers-html/docs/index.html b/dist/samples/advanced-markers-html/docs/index.html new file mode 100644 index 000000000..2ff97bff9 --- /dev/null +++ b/dist/samples/advanced-markers-html/docs/index.html @@ -0,0 +1,25 @@ + + + + + + Advanced Markers with HTML + + + + + + + +
    + + + + + + diff --git a/dist/samples/advanced-markers-html/docs/index.js b/dist/samples/advanced-markers-html/docs/index.js new file mode 100644 index 000000000..8191e80ab --- /dev/null +++ b/dist/samples/advanced-markers-html/docs/index.js @@ -0,0 +1,197 @@ +"use strict"; +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_advanced_markers_html] +// [START maps_advanced_markers_html_snippet] +async function initMap() { + // Request needed libraries. + const { Map } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + const center = { lat: 37.43238031167444, lng: -122.16795397128632 }; + const map = new Map(document.getElementById("map"), { + zoom: 11, + center, + mapId: "4504f8b37365c3d0", + }); + for (const property of properties) { + const AdvancedMarkerElement = new google.maps.marker.AdvancedMarkerElement({ + map, + content: buildContent(property), + position: property.position, + title: property.description, + }); + AdvancedMarkerElement.addListener("click", () => { + toggleHighlight(AdvancedMarkerElement, property); + }); + } +} +function toggleHighlight(markerView, property) { + if (markerView.content.classList.contains("highlight")) { + markerView.content.classList.remove("highlight"); + markerView.zIndex = null; + } + else { + markerView.content.classList.add("highlight"); + markerView.zIndex = 1; + } +} +function buildContent(property) { + const content = document.createElement("div"); + content.classList.add("property"); + content.innerHTML = ` +
    + + ${property.type} +
    +
    +
    ${property.price}
    +
    ${property.address}
    +
    +
    + + bedroom + ${property.bed} +
    +
    + + bathroom + ${property.bath} +
    +
    + + size + ${property.size} ft2 +
    +
    +
    + `; + return content; +} +const properties = [{ + address: '215 Emily St, MountainView, CA', + description: 'Single family house with modern design', + price: '$ 3,889,000', + type: 'home', + bed: 5, + bath: 4.5, + size: 300, + position: { + lat: 37.50024109655184, + lng: -122.28528451834352, + }, + }, { + address: '108 Squirrel Ln 🐿, Menlo Park, CA', + description: 'Townhouse with friendly neighbors', + price: '$ 3,050,000', + type: 'building', + bed: 4, + bath: 3, + size: 200, + position: { + lat: 37.44440882321596, + lng: -122.2160620727, + }, + }, + // [END maps_advanced_markers_html_snippet] + { + address: '100 Chris St, Portola Valley, CA', + description: 'Spacious warehouse great for small business', + price: '$ 3,125,000', + type: 'warehouse', + bed: 4, + bath: 4, + size: 800, + position: { + lat: 37.39561833718522, + lng: -122.21855116258479, + }, + }, { + address: '98 Aleh Ave, Palo Alto, CA', + description: 'A lovely store on busy road', + price: '$ 4,225,000', + type: 'store-alt', + bed: 2, + bath: 1, + size: 210, + position: { + lat: 37.423928529779644, + lng: -122.1087629822001, + }, + }, { + address: '2117 Su St, MountainView, CA', + description: 'Single family house near golf club', + price: '$ 1,700,000', + type: 'home', + bed: 4, + bath: 3, + size: 200, + position: { + lat: 37.40578635332598, + lng: -122.15043378466069, + }, + }, { + address: '197 Alicia Dr, Santa Clara, CA', + description: 'Multifloor large warehouse', + price: '$ 5,000,000', + type: 'warehouse', + bed: 5, + bath: 4, + size: 700, + position: { + lat: 37.36399747905774, + lng: -122.10465384268522, + }, + }, { + address: '700 Jose Ave, Sunnyvale, CA', + description: '3 storey townhouse with 2 car garage', + price: '$ 3,850,000', + type: 'building', + bed: 4, + bath: 4, + size: 600, + position: { + lat: 37.38343706184458, + lng: -122.02340436985183, + }, + }, { + address: '868 Will Ct, Cupertino, CA', + description: 'Single family house in great school zone', + price: '$ 2,500,000', + type: 'home', + bed: 3, + bath: 2, + size: 100, + position: { + lat: 37.34576403052, + lng: -122.04455090047453, + }, + }, { + address: '655 Haylee St, Santa Clara, CA', + description: '2 storey store with large storage room', + price: '$ 2,500,000', + type: 'store-alt', + bed: 3, + bath: 2, + size: 450, + position: { + lat: 37.362863347890716, + lng: -121.97802139023555, + }, + }, { + address: '2019 Natasha Dr, San Jose, CA', + description: 'Single family house', + price: '$ 2,325,000', + type: 'home', + bed: 4, + bath: 3.5, + size: 500, + position: { + lat: 37.41391636421949, + lng: -121.94592071575907, + }, + }]; +initMap(); +// [END maps_advanced_markers_html] diff --git a/dist/samples/advanced-markers-html/docs/index.ts b/dist/samples/advanced-markers-html/docs/index.ts new file mode 100644 index 000000000..3fbe3263d --- /dev/null +++ b/dist/samples/advanced-markers-html/docs/index.ts @@ -0,0 +1,203 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_advanced_markers_html] +// [START maps_advanced_markers_html_snippet] +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 center = {lat: 37.43238031167444, lng: -122.16795397128632}; + const map = new Map(document.getElementById("map") as HTMLElement, { + zoom: 11, + center, + mapId: "4504f8b37365c3d0", + }); + + for (const property of properties) { + const AdvancedMarkerElement = new google.maps.marker.AdvancedMarkerElement({ + map, + content: buildContent(property), + position: property.position, + title: property.description, + }); + + AdvancedMarkerElement.addListener("click", () => { + toggleHighlight(AdvancedMarkerElement, property); + }); + } +} + +function toggleHighlight(markerView, property) { + if (markerView.content.classList.contains("highlight")) { + markerView.content.classList.remove("highlight"); + markerView.zIndex = null; + } else { + markerView.content.classList.add("highlight"); + markerView.zIndex = 1; + } +} + +function buildContent(property) { + const content = document.createElement("div"); + content.classList.add("property"); + content.innerHTML = ` +
    + + ${property.type} +
    +
    +
    ${property.price}
    +
    ${property.address}
    +
    +
    + + bedroom + ${property.bed} +
    +
    + + bathroom + ${property.bath} +
    +
    + + size + ${property.size} ft2 +
    +
    +
    + `; + return content; +} + +const properties = [{ + address: '215 Emily St, MountainView, CA', + description: 'Single family house with modern design', + price: '$ 3,889,000', + type: 'home', + bed: 5, + bath: 4.5, + size: 300, + position: { + lat: 37.50024109655184, + lng: -122.28528451834352, + }, +}, { + address: '108 Squirrel Ln 🐿, Menlo Park, CA', + description: 'Townhouse with friendly neighbors', + price: '$ 3,050,000', + type: 'building', + bed: 4, + bath: 3, + size: 200, + position: { + lat: 37.44440882321596, + lng: -122.2160620727, + }, +}, +// [END maps_advanced_markers_html_snippet] +{ + address: '100 Chris St, Portola Valley, CA', + description: 'Spacious warehouse great for small business', + price: '$ 3,125,000', + type: 'warehouse', + bed: 4, + bath: 4, + size: 800, + position: { + lat: 37.39561833718522, + lng: -122.21855116258479, + }, +}, { + address: '98 Aleh Ave, Palo Alto, CA', + description: 'A lovely store on busy road', + price: '$ 4,225,000', + type: 'store-alt', + bed: 2, + bath: 1, + size: 210, + position: { + lat: 37.423928529779644, + lng: -122.1087629822001, + }, +}, { + address: '2117 Su St, MountainView, CA', + description: 'Single family house near golf club', + price: '$ 1,700,000', + type: 'home', + bed: 4, + bath: 3, + size: 200, + position: { + lat: 37.40578635332598, + lng: -122.15043378466069, + }, +}, { + address: '197 Alicia Dr, Santa Clara, CA', + description: 'Multifloor large warehouse', + price: '$ 5,000,000', + type: 'warehouse', + bed: 5, + bath: 4, + size: 700, + position: { + lat: 37.36399747905774, + lng: -122.10465384268522, + }, +}, { + address: '700 Jose Ave, Sunnyvale, CA', + description: '3 storey townhouse with 2 car garage', + price: '$ 3,850,000', + type: 'building', + bed: 4, + bath: 4, + size: 600, + position: { + lat: 37.38343706184458, + lng: -122.02340436985183, + }, +}, { + address: '868 Will Ct, Cupertino, CA', + description: 'Single family house in great school zone', + price: '$ 2,500,000', + type: 'home', + bed: 3, + bath: 2, + size: 100, + position: { + lat: 37.34576403052, + lng: -122.04455090047453, + }, +}, { + address: '655 Haylee St, Santa Clara, CA', + description: '2 storey store with large storage room', + price: '$ 2,500,000', + type: 'store-alt', + bed: 3, + bath: 2, + size: 450, + position: { + lat: 37.362863347890716, + lng: -121.97802139023555, + }, +}, { + address: '2019 Natasha Dr, San Jose, CA', + description: 'Single family house', + price: '$ 2,325,000', + type: 'home', + bed: 4, + bath: 3.5, + size: 500, + position: { + lat: 37.41391636421949, + lng: -121.94592071575907, + }, +}]; + +initMap(); +// [END maps_advanced_markers_html] diff --git a/dist/samples/advanced-markers-html/docs/style.css b/dist/samples/advanced-markers-html/docs/style.css new file mode 100644 index 000000000..52df28ceb --- /dev/null +++ b/dist/samples/advanced-markers-html/docs/style.css @@ -0,0 +1,209 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_advanced_markers_html] */ +:root { + --building-color: #FF9800; + --house-color: #0288D1; + --shop-color: #7B1FA2; + --warehouse-color: #558B2F; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; + width: 100%; +} + +/* + * Property styles in unhighlighted state. + */ +.property { + align-items: center; + background-color: #FFFFFF; + border-radius: 50%; + color: #263238; + display: flex; + font-size: 14px; + gap: 15px; + height: 30px; + justify-content: center; + padding: 4px; + position: relative; + position: relative; + transition: all 0.3s ease-out; + width: 30px; + transform: translateY(-9px) +} + +.property::after { + border-left: 9px solid transparent; + border-right: 9px solid transparent; + border-top: 9px solid #FFFFFF; + content: ""; + height: 0; + left: 50%; + position: absolute; + top: 95%; + transform: translate(-50%, 0); + transition: all 0.3s ease-out; + width: 0; + z-index: 1; +} + +.property .icon { + align-items: center; + display: flex; + justify-content: center; + color: #FFFFFF; +} + +.property .icon svg { + height: 20px; + width: auto; +} + +.property .details { + display: none; + flex-direction: column; + flex: 1; +} + +.property .address { + color: #9E9E9E; + font-size: 10px; + margin-bottom: 10px; + margin-top: 5px; +} + +.property .features { + align-items: flex-end; + display: flex; + flex-direction: row; + gap: 10px; +} + +.property .features > div { + align-items: center; + background: #F5F5F5; + border-radius: 5px; + border: 1px solid #ccc; + display: flex; + font-size: 10px; + gap: 5px; + padding: 5px; +} + +/* + * Property styles in highlighted state. + */ +.property.highlight { + background-color: #FFFFFF; + border-radius: 8px; + box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2); + height: 80px; + padding: 8px 15px; + width: auto; +} + +.property.highlight::after { + border-top: 9px solid #FFFFFF; +} + +.property.highlight .details { + display: flex; +} + +.property.highlight .icon svg { + width: 50px; + height: 50px; +} + +.property .bed { + color: #FFA000; +} + +.property .bath { + color: #03A9F4; +} + +.property .size { + color: #388E3C; +} + +/* + * House icon colors. + */ +.property.highlight:has(.fa-house) .icon { + color: var(--house-color); +} + +.property:not(.highlight):has(.fa-house) { + background-color: var(--house-color); +} + +.property:not(.highlight):has(.fa-house)::after { + border-top: 9px solid var(--house-color); +} + +/* + * Building icon colors. + */ +.property.highlight:has(.fa-building) .icon { + color: var(--building-color); +} + +.property:not(.highlight):has(.fa-building) { + background-color: var(--building-color); +} + +.property:not(.highlight):has(.fa-building)::after { + border-top: 9px solid var(--building-color); +} + +/* + * Warehouse icon colors. + */ +.property.highlight:has(.fa-warehouse) .icon { + color: var(--warehouse-color); +} + +.property:not(.highlight):has(.fa-warehouse) { + background-color: var(--warehouse-color); +} + +.property:not(.highlight):has(.fa-warehouse)::after { + border-top: 9px solid var(--warehouse-color); +} + +/* + * Shop icon colors. + */ +.property.highlight:has(.fa-shop) .icon { + color: var(--shop-color); +} + +.property:not(.highlight):has(.fa-shop) { + background-color: var(--shop-color); +} + +.property:not(.highlight):has(.fa-shop)::after { + border-top: 9px solid var(--shop-color); +} + +/* [END maps_advanced_markers_html] */ \ No newline at end of file diff --git a/dist/samples/advanced-markers-html/jsfiddle/demo.css b/dist/samples/advanced-markers-html/jsfiddle/demo.css new file mode 100644 index 000000000..18eb72fc0 --- /dev/null +++ b/dist/samples/advanced-markers-html/jsfiddle/demo.css @@ -0,0 +1,208 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +:root { + --building-color: #FF9800; + --house-color: #0288D1; + --shop-color: #7B1FA2; + --warehouse-color: #558B2F; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; + width: 100%; +} + +/* + * Property styles in unhighlighted state. + */ +.property { + align-items: center; + background-color: #FFFFFF; + border-radius: 50%; + color: #263238; + display: flex; + font-size: 14px; + gap: 15px; + height: 30px; + justify-content: center; + padding: 4px; + position: relative; + position: relative; + transition: all 0.3s ease-out; + width: 30px; + transform: translateY(-9px) +} + +.property::after { + border-left: 9px solid transparent; + border-right: 9px solid transparent; + border-top: 9px solid #FFFFFF; + content: ""; + height: 0; + left: 50%; + position: absolute; + top: 95%; + transform: translate(-50%, 0); + transition: all 0.3s ease-out; + width: 0; + z-index: 1; +} + +.property .icon { + align-items: center; + display: flex; + justify-content: center; + color: #FFFFFF; +} + +.property .icon svg { + height: 20px; + width: auto; +} + +.property .details { + display: none; + flex-direction: column; + flex: 1; +} + +.property .address { + color: #9E9E9E; + font-size: 10px; + margin-bottom: 10px; + margin-top: 5px; +} + +.property .features { + align-items: flex-end; + display: flex; + flex-direction: row; + gap: 10px; +} + +.property .features > div { + align-items: center; + background: #F5F5F5; + border-radius: 5px; + border: 1px solid #ccc; + display: flex; + font-size: 10px; + gap: 5px; + padding: 5px; +} + +/* + * Property styles in highlighted state. + */ +.property.highlight { + background-color: #FFFFFF; + border-radius: 8px; + box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2); + height: 80px; + padding: 8px 15px; + width: auto; +} + +.property.highlight::after { + border-top: 9px solid #FFFFFF; +} + +.property.highlight .details { + display: flex; +} + +.property.highlight .icon svg { + width: 50px; + height: 50px; +} + +.property .bed { + color: #FFA000; +} + +.property .bath { + color: #03A9F4; +} + +.property .size { + color: #388E3C; +} + +/* + * House icon colors. + */ +.property.highlight:has(.fa-house) .icon { + color: var(--house-color); +} + +.property:not(.highlight):has(.fa-house) { + background-color: var(--house-color); +} + +.property:not(.highlight):has(.fa-house)::after { + border-top: 9px solid var(--house-color); +} + +/* + * Building icon colors. + */ +.property.highlight:has(.fa-building) .icon { + color: var(--building-color); +} + +.property:not(.highlight):has(.fa-building) { + background-color: var(--building-color); +} + +.property:not(.highlight):has(.fa-building)::after { + border-top: 9px solid var(--building-color); +} + +/* + * Warehouse icon colors. + */ +.property.highlight:has(.fa-warehouse) .icon { + color: var(--warehouse-color); +} + +.property:not(.highlight):has(.fa-warehouse) { + background-color: var(--warehouse-color); +} + +.property:not(.highlight):has(.fa-warehouse)::after { + border-top: 9px solid var(--warehouse-color); +} + +/* + * Shop icon colors. + */ +.property.highlight:has(.fa-shop) .icon { + color: var(--shop-color); +} + +.property:not(.highlight):has(.fa-shop) { + background-color: var(--shop-color); +} + +.property:not(.highlight):has(.fa-shop)::after { + border-top: 9px solid var(--shop-color); +} + diff --git a/dist/samples/advanced-markers-html/jsfiddle/demo.details b/dist/samples/advanced-markers-html/jsfiddle/demo.details new file mode 100644 index 000000000..d0f136a87 --- /dev/null +++ b/dist/samples/advanced-markers-html/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: advanced-markers-html +authors: + - Geo Developer IX Documentation Team +tags: + - google maps +load_type: h +description: Sample code supporting Google Maps Platform JavaScript API documentation. diff --git a/dist/samples/advanced-markers-html/jsfiddle/demo.html b/dist/samples/advanced-markers-html/jsfiddle/demo.html new file mode 100644 index 000000000..67d2035f4 --- /dev/null +++ b/dist/samples/advanced-markers-html/jsfiddle/demo.html @@ -0,0 +1,25 @@ + + + + + + Advanced Markers with HTML + + + + + + + +
    + + + + + + diff --git a/dist/samples/advanced-markers-html/jsfiddle/demo.js b/dist/samples/advanced-markers-html/jsfiddle/demo.js new file mode 100644 index 000000000..c9eebba27 --- /dev/null +++ b/dist/samples/advanced-markers-html/jsfiddle/demo.js @@ -0,0 +1,197 @@ +"use strict"; +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + + +async function initMap() { + // Request needed libraries. + const { Map } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + const center = { lat: 37.43238031167444, lng: -122.16795397128632 }; + const map = new Map(document.getElementById("map"), { + zoom: 11, + center, + mapId: "4504f8b37365c3d0", + }); + for (const property of properties) { + const AdvancedMarkerElement = new google.maps.marker.AdvancedMarkerElement({ + map, + content: buildContent(property), + position: property.position, + title: property.description, + }); + AdvancedMarkerElement.addListener("click", () => { + toggleHighlight(AdvancedMarkerElement, property); + }); + } +} +function toggleHighlight(markerView, property) { + if (markerView.content.classList.contains("highlight")) { + markerView.content.classList.remove("highlight"); + markerView.zIndex = null; + } + else { + markerView.content.classList.add("highlight"); + markerView.zIndex = 1; + } +} +function buildContent(property) { + const content = document.createElement("div"); + content.classList.add("property"); + content.innerHTML = ` +
    + + ${property.type} +
    +
    +
    ${property.price}
    +
    ${property.address}
    +
    +
    + + bedroom + ${property.bed} +
    +
    + + bathroom + ${property.bath} +
    +
    + + size + ${property.size} ft2 +
    +
    +
    + `; + return content; +} +const properties = [{ + address: '215 Emily St, MountainView, CA', + description: 'Single family house with modern design', + price: '$ 3,889,000', + type: 'home', + bed: 5, + bath: 4.5, + size: 300, + position: { + lat: 37.50024109655184, + lng: -122.28528451834352, + }, + }, { + address: '108 Squirrel Ln 🐿, Menlo Park, CA', + description: 'Townhouse with friendly neighbors', + price: '$ 3,050,000', + type: 'building', + bed: 4, + bath: 3, + size: 200, + position: { + lat: 37.44440882321596, + lng: -122.2160620727, + }, + }, + + { + address: '100 Chris St, Portola Valley, CA', + description: 'Spacious warehouse great for small business', + price: '$ 3,125,000', + type: 'warehouse', + bed: 4, + bath: 4, + size: 800, + position: { + lat: 37.39561833718522, + lng: -122.21855116258479, + }, + }, { + address: '98 Aleh Ave, Palo Alto, CA', + description: 'A lovely store on busy road', + price: '$ 4,225,000', + type: 'store-alt', + bed: 2, + bath: 1, + size: 210, + position: { + lat: 37.423928529779644, + lng: -122.1087629822001, + }, + }, { + address: '2117 Su St, MountainView, CA', + description: 'Single family house near golf club', + price: '$ 1,700,000', + type: 'home', + bed: 4, + bath: 3, + size: 200, + position: { + lat: 37.40578635332598, + lng: -122.15043378466069, + }, + }, { + address: '197 Alicia Dr, Santa Clara, CA', + description: 'Multifloor large warehouse', + price: '$ 5,000,000', + type: 'warehouse', + bed: 5, + bath: 4, + size: 700, + position: { + lat: 37.36399747905774, + lng: -122.10465384268522, + }, + }, { + address: '700 Jose Ave, Sunnyvale, CA', + description: '3 storey townhouse with 2 car garage', + price: '$ 3,850,000', + type: 'building', + bed: 4, + bath: 4, + size: 600, + position: { + lat: 37.38343706184458, + lng: -122.02340436985183, + }, + }, { + address: '868 Will Ct, Cupertino, CA', + description: 'Single family house in great school zone', + price: '$ 2,500,000', + type: 'home', + bed: 3, + bath: 2, + size: 100, + position: { + lat: 37.34576403052, + lng: -122.04455090047453, + }, + }, { + address: '655 Haylee St, Santa Clara, CA', + description: '2 storey store with large storage room', + price: '$ 2,500,000', + type: 'store-alt', + bed: 3, + bath: 2, + size: 450, + position: { + lat: 37.362863347890716, + lng: -121.97802139023555, + }, + }, { + address: '2019 Natasha Dr, San Jose, CA', + description: 'Single family house', + price: '$ 2,325,000', + type: 'home', + bed: 4, + bath: 3.5, + size: 500, + position: { + lat: 37.41391636421949, + lng: -121.94592071575907, + }, + }]; +initMap(); + diff --git a/index.html b/index.html index d5f0f2200..eb2e27a4c 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,8 @@

    Maps JSAPI Samples

  • add-map
  • address-validation
  • advanced-markers-animation
    • +
  • advanced-markers-html
    • +
  • advanced-markers-html-simple
  • deckgl-heatmap
  • deckgl-kml
  • deckgl-kml-updated