diff --git a/dist/index.html b/dist/index.html index 02fd02e4..db081ff8 100644 --- a/dist/index.html +++ b/dist/index.html @@ -46,6 +46,7 @@

Maps JSAPI Samples

  • place-autocomplete-data-session
  • place-autocomplete-element
  • place-autocomplete-map
    • +
  • place-class
  • place-text-search
  • test-example
  • ui-kit-customization
    • diff --git a/dist/samples/place-class/app/.eslintsrc.json b/dist/samples/place-class/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/place-class/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/place-class/app/README.md b/dist/samples/place-class/app/README.md new file mode 100644 index 00000000..385d8923 --- /dev/null +++ b/dist/samples/place-class/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/place-class/app/index.html b/dist/samples/place-class/app/index.html new file mode 100644 index 00000000..ec840061 --- /dev/null +++ b/dist/samples/place-class/app/index.html @@ -0,0 +1,23 @@ + + + + + + Place Class + + + + + +
    + + + + + + diff --git a/dist/samples/place-class/app/index.ts b/dist/samples/place-class/app/index.ts new file mode 100644 index 00000000..6b0c8d8b --- /dev/null +++ b/dist/samples/place-class/app/index.ts @@ -0,0 +1,52 @@ +/** + * @license + * Copyright 2022 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_place_class] +let map: google.maps.Map; +let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; + +async function initMap() { + const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + + map = new Map(document.getElementById('map') as HTMLElement, { + center: centerCoordinates, + zoom: 14, + // [START_EXCLUDE] + mapId: '4504f8b37365c3d0', + // [END_EXCLUDE] + }); + + getPlaceDetails(); +} + +// [START maps_place_class_fetchfields] +async function getPlaceDetails() { + const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + // Use place ID to create a new Place instance. + const place = new Place({ + id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', + requestedLanguage: 'en', // optional + }); + + // Call fetchFields, passing the desired data fields. + await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); + + // Log the result + console.log(place.displayName); + console.log(place.formattedAddress); + + // Add an Advanced Marker + const marker = new AdvancedMarkerElement({ + map, + position: place.location, + title: place.displayName, + }); +} +// [END maps_place_class_fetchfields] + +initMap(); +// [END maps_place_class] \ No newline at end of file diff --git a/dist/samples/place-class/app/package.json b/dist/samples/place-class/app/package.json new file mode 100644 index 00000000..c4b334e3 --- /dev/null +++ b/dist/samples/place-class/app/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/place-class", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh place-class && bash ../app.sh place-class && bash ../docs.sh place-class && npm run build:vite --workspace=. && bash ../dist.sh place-class", + "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/place-class/app/style.css b/dist/samples/place-class/app/style.css new file mode 100644 index 00000000..db1f7a06 --- /dev/null +++ b/dist/samples/place-class/app/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_place_class] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_place_class] */ \ No newline at end of file diff --git a/dist/samples/place-class/app/tsconfig.json b/dist/samples/place-class/app/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/dist/samples/place-class/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/place-class/dist/assets/index-CLgMNE7p.js b/dist/samples/place-class/dist/assets/index-CLgMNE7p.js new file mode 100644 index 00000000..8dc215fc --- /dev/null +++ b/dist/samples/place-class/dist/assets/index-CLgMNE7p.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"]'))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 o(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=o(e);fetch(e.href,t)}})();/** + * @license + * Copyright 2022 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */let a,c={lat:37.4161493,lng:-122.0812166};async function l(){const{Map:i}=await google.maps.importLibrary("maps");a=new i(document.getElementById("map"),{center:c,zoom:14,mapId:"4504f8b37365c3d0"}),d()}async function d(){const{Place:i}=await google.maps.importLibrary("places"),{AdvancedMarkerElement:r}=await google.maps.importLibrary("marker"),o=new i({id:"ChIJN5Nz71W3j4ARhx5bwpTQEGg",requestedLanguage:"en"});await o.fetchFields({fields:["displayName","formattedAddress","location"]}),console.log(o.displayName),console.log(o.formattedAddress),new r({map:a,position:o.location,title:o.displayName})}l(); diff --git a/dist/samples/place-class/dist/assets/index-DW_Ml_OD.css b/dist/samples/place-class/dist/assets/index-DW_Ml_OD.css new file mode 100644 index 00000000..672cb7cc --- /dev/null +++ b/dist/samples/place-class/dist/assets/index-DW_Ml_OD.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} diff --git a/dist/samples/place-class/dist/index.html b/dist/samples/place-class/dist/index.html new file mode 100644 index 00000000..f4d51932 --- /dev/null +++ b/dist/samples/place-class/dist/index.html @@ -0,0 +1,23 @@ + + + + + + Place Class + + + + + +
    + + + + + + diff --git a/dist/samples/place-class/docs/index.html b/dist/samples/place-class/docs/index.html new file mode 100644 index 00000000..ec840061 --- /dev/null +++ b/dist/samples/place-class/docs/index.html @@ -0,0 +1,23 @@ + + + + + + Place Class + + + + + +
    + + + + + + diff --git a/dist/samples/place-class/docs/index.js b/dist/samples/place-class/docs/index.js new file mode 100644 index 00000000..bfecdd73 --- /dev/null +++ b/dist/samples/place-class/docs/index.js @@ -0,0 +1,44 @@ +"use strict"; +/** + * @license + * Copyright 2022 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_place_class] +let map; +let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; +async function initMap() { + const { Map } = await google.maps.importLibrary("maps"); + map = new Map(document.getElementById('map'), { + center: centerCoordinates, + zoom: 14, + // [START_EXCLUDE] + mapId: '4504f8b37365c3d0', + // [END_EXCLUDE] + }); + getPlaceDetails(); +} +// [START maps_place_class_fetchfields] +async function getPlaceDetails() { + const { Place } = await google.maps.importLibrary("places"); + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + // Use place ID to create a new Place instance. + const place = new Place({ + id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', + requestedLanguage: 'en', // optional + }); + // Call fetchFields, passing the desired data fields. + await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); + // Log the result + console.log(place.displayName); + console.log(place.formattedAddress); + // Add an Advanced Marker + const marker = new AdvancedMarkerElement({ + map, + position: place.location, + title: place.displayName, + }); +} +// [END maps_place_class_fetchfields] +initMap(); +// [END maps_place_class] diff --git a/dist/samples/place-class/docs/index.ts b/dist/samples/place-class/docs/index.ts new file mode 100644 index 00000000..6b0c8d8b --- /dev/null +++ b/dist/samples/place-class/docs/index.ts @@ -0,0 +1,52 @@ +/** + * @license + * Copyright 2022 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_place_class] +let map: google.maps.Map; +let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; + +async function initMap() { + const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + + map = new Map(document.getElementById('map') as HTMLElement, { + center: centerCoordinates, + zoom: 14, + // [START_EXCLUDE] + mapId: '4504f8b37365c3d0', + // [END_EXCLUDE] + }); + + getPlaceDetails(); +} + +// [START maps_place_class_fetchfields] +async function getPlaceDetails() { + const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + // Use place ID to create a new Place instance. + const place = new Place({ + id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', + requestedLanguage: 'en', // optional + }); + + // Call fetchFields, passing the desired data fields. + await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); + + // Log the result + console.log(place.displayName); + console.log(place.formattedAddress); + + // Add an Advanced Marker + const marker = new AdvancedMarkerElement({ + map, + position: place.location, + title: place.displayName, + }); +} +// [END maps_place_class_fetchfields] + +initMap(); +// [END maps_place_class] \ No newline at end of file diff --git a/dist/samples/place-class/docs/style.css b/dist/samples/place-class/docs/style.css new file mode 100644 index 00000000..db1f7a06 --- /dev/null +++ b/dist/samples/place-class/docs/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_place_class] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_place_class] */ \ No newline at end of file diff --git a/dist/samples/place-class/jsfiddle/demo.css b/dist/samples/place-class/jsfiddle/demo.css new file mode 100644 index 00000000..fa4d8cd3 --- /dev/null +++ b/dist/samples/place-class/jsfiddle/demo.css @@ -0,0 +1,24 @@ +/** + * @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; +} + diff --git a/dist/samples/place-class/jsfiddle/demo.details b/dist/samples/place-class/jsfiddle/demo.details new file mode 100644 index 00000000..a5acdaea --- /dev/null +++ b/dist/samples/place-class/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: place-class +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/place-class/jsfiddle/demo.html b/dist/samples/place-class/jsfiddle/demo.html new file mode 100644 index 00000000..33a3a2d6 --- /dev/null +++ b/dist/samples/place-class/jsfiddle/demo.html @@ -0,0 +1,23 @@ + + + + + + Place Class + + + + + +
    + + + + + + diff --git a/dist/samples/place-class/jsfiddle/demo.js b/dist/samples/place-class/jsfiddle/demo.js new file mode 100644 index 00000000..a891ba74 --- /dev/null +++ b/dist/samples/place-class/jsfiddle/demo.js @@ -0,0 +1,44 @@ +"use strict"; +/** + * @license + * Copyright 2022 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +let map; +let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; +async function initMap() { + const { Map } = await google.maps.importLibrary("maps"); + map = new Map(document.getElementById('map'), { + center: centerCoordinates, + zoom: 14, + + mapId: '4504f8b37365c3d0', + + }); + getPlaceDetails(); +} + +async function getPlaceDetails() { + const { Place } = await google.maps.importLibrary("places"); + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + // Use place ID to create a new Place instance. + const place = new Place({ + id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', + requestedLanguage: 'en', // optional + }); + // Call fetchFields, passing the desired data fields. + await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); + // Log the result + console.log(place.displayName); + console.log(place.formattedAddress); + // Add an Advanced Marker + const marker = new AdvancedMarkerElement({ + map, + position: place.location, + title: place.displayName, + }); +} + +initMap(); + diff --git a/package-lock.json b/package-lock.json index 4701b5a0..c69a7e98 100644 --- a/package-lock.json +++ b/package-lock.json @@ -621,6 +621,10 @@ "resolved": "samples/place-autocomplete-map", "link": true }, + "node_modules/@js-api-samples/place-class": { + "resolved": "samples/place-class", + "link": true + }, "node_modules/@js-api-samples/place-text-search": { "resolved": "samples/place-text-search", "link": true @@ -2441,6 +2445,10 @@ "name": "@js-api-samples/place-autocomplete-map", "version": "1.0.0" }, + "samples/place-class": { + "name": "@js-api-samples/place-class", + "version": "1.0.0" + }, "samples/place-text-search": { "name": "@js-api-samples/place-text-search", "version": "1.0.0"