diff --git a/samples/routes-compute-routes/index.ts b/samples/routes-compute-routes/index.ts index 11bcf8818..08449ec00 100644 --- a/samples/routes-compute-routes/index.ts +++ b/samples/routes-compute-routes/index.ts @@ -6,7 +6,7 @@ // [START maps_routes_compute_routes] let markers: google.maps.marker.AdvancedMarkerElement[] = []; let polylines: google.maps.Polyline[] = []; -let waypointInfoWindow: google.maps.InfoWindow | null = null; +const waypointInfoWindow: google.maps.InfoWindow | null = null; interface PlaceAutocompleteSelection { predictionText: string | null; @@ -26,23 +26,14 @@ async function init() { const [ { InfoWindow }, { AdvancedMarkerElement }, - //prettier-ignore - //@ts-ignore + // @ts-expect-error - currently missing. bug fix pending { PlaceAutocompleteElement }, - //prettier-ignore - //@ts-ignore { ComputeRoutesExtraComputation, ReferenceRoute, Route, RouteLabel }, ] = await Promise.all([ - google.maps.importLibrary('maps') as Promise, - google.maps.importLibrary( - 'marker' - ) as Promise, - google.maps.importLibrary( - 'places' - ) as Promise, - google.maps.importLibrary( - 'routes' - ) as Promise, + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + google.maps.importLibrary('places'), + google.maps.importLibrary('routes'), ]); const map = document.getElementById('map') as google.maps.MapElement; @@ -99,25 +90,18 @@ async function init() { function buildComputeRoutesJsRequest( formData: FormData - //prettier-ignore - //@ts-ignore ): google.maps.routes.ComputeRoutesRequest { const travelMode = (formData.get('travel_mode') as string) === '' ? undefined - : (formData.get('travel_mode') as google.maps.TravelMode); - //prettier-ignore - //@ts-ignore + : formData.get('travel_mode'); const extraComputations: google.maps.routes.ComputeRoutesExtraComputation[] = - []; - //prettier-ignore - //@ts-ignore - const requestedReferenceRoutes: google.maps.routes.ReferenceRoute[] = []; - //prettier-ignore - //@ts-ignore + []; + const requestedReferenceRoutes: google.maps.routes.ReferenceRoute[] = + []; const transitPreference: google.maps.routes.TransitPreference = {}; - const request = { + const request: google.maps.routes.ComputeRoutesRequest = { origin: { location: buildComputeRoutesLocation( originAutocompleteSelection, @@ -150,16 +134,12 @@ async function init() { ? undefined : (formData.get( 'routing_preference' - //prettier-ignore - //@ts-ignore ) as google.maps.routes.RoutingPreference), polylineQuality: formData.get('polyline_quality') === '' ? undefined : (formData.get( 'polyline_quality' - //prettier-ignore - //@ts-ignore ) as google.maps.routes.PolylineQuality), computeAlternativeRoutes: formData.get('compute_alternative_routes') === 'on', @@ -193,16 +173,11 @@ async function init() { extraComputations.push( ComputeRoutesExtraComputation.FUEL_CONSUMPTION ); - //prettier-ignore - //@ts-ignore - (request.routeModifiers as google.maps.routes.RouteModifiers).vehicleInfo = - { - emissionType: formData.get( - 'emission_type' - //prettier-ignore - //@ts-ignore - ) as google.maps.routes.VehicleEmissionType, - }; + request.routeModifiers!.vehicleInfo = { + emissionType: formData.get( + 'emission_type' + ) as google.maps.routes.VehicleEmissionType, + }; } if (travelMode === google.maps.TravelMode.TRANSIT) { @@ -230,8 +205,6 @@ async function init() { locationInput?: FormDataEntryValue | null, headingInput?: FormDataEntryValue | null, travelModeInput?: FormDataEntryValue | null - //prettier-ignore - //@ts-ignore ): string | google.maps.routes.DirectionalLocationLiteral { if (!locationInput) { throw new Error('Location is required.'); @@ -278,8 +251,6 @@ async function init() { } async function drawRoute( - //prettier-ignore - //@ts-ignore route: google.maps.routes.Route, isPrimaryRoute: boolean ) { @@ -313,66 +284,65 @@ async function init() { addRouteLabel(route, Math.floor(route.path!.length / 2)); } - //prettier-ignore - //@ts-ignore function addRouteLabel(route: google.maps.routes.Route, index: number) { - const routeTag = document.createElement('div'); - routeTag.className = 'route-tag'; - - if (route.routeLabels && route.routeLabels.length > 0) { - const p = document.createElement('p'); - route.routeLabels.forEach((label, i) => { - if (label.includes(RouteLabel.FUEL_EFFICIENT)) { - routeTag.classList.add('eco'); - } - if (label.includes(RouteLabel.DEFAULT_ROUTE_ALTERNATE)) { - routeTag.classList.add('alternate'); - } - if (label.includes(RouteLabel.SHORTER_DISTANCE)) { - routeTag.classList.add('shorter-distance'); - } + const routeTag = document.createElement('div'); + routeTag.className = 'route-tag'; + + if (route.routeLabels && route.routeLabels.length > 0) { + const p = document.createElement('p'); + route.routeLabels.forEach((label, i) => { + if (label.includes(RouteLabel.FUEL_EFFICIENT)) { + routeTag.classList.add('eco'); + } + if (label.includes(RouteLabel.DEFAULT_ROUTE_ALTERNATE)) { + routeTag.classList.add('alternate'); + } + if (label.includes(RouteLabel.SHORTER_DISTANCE)) { + routeTag.classList.add('shorter-distance'); + } - p.appendChild(document.createTextNode(label)); - if (i < route.routeLabels!.length - 1) { - p.appendChild(document.createElement('br')); + p.appendChild(document.createTextNode(label)); + if (i < route.routeLabels!.length - 1) { + p.appendChild(document.createElement('br')); + } + }); + routeTag.appendChild(p); } - }); - routeTag.appendChild(p); - } - const detailsDiv = document.createElement('div'); - detailsDiv.className = 'details'; + const detailsDiv = document.createElement('div'); + detailsDiv.className = 'details'; - if (route.localizedValues) { - const distanceP = document.createElement('p'); - distanceP.textContent = `Distance: ${route.localizedValues.distance!}`; - detailsDiv.appendChild(distanceP); + if (route.localizedValues) { + const distanceP = document.createElement('p'); + distanceP.textContent = `Distance: ${route.localizedValues.distance!}`; + detailsDiv.appendChild(distanceP); - const durationP = document.createElement('p'); - durationP.textContent = `Duration: ${route.localizedValues.duration}`!; - detailsDiv.appendChild(durationP); - } + const durationP = document.createElement('p'); + durationP.textContent = + `Duration: ${route.localizedValues.duration}`!; + detailsDiv.appendChild(durationP); + } - if (route.travelAdvisory?.fuelConsumptionMicroliters) { - const fuelP = document.createElement('p'); - fuelP.textContent = `Fuel consumption: ${( - route.travelAdvisory.fuelConsumptionMicroliters / 1e6 - ).toFixed(2)} L`; - detailsDiv.appendChild(fuelP); - } + if (route.travelAdvisory?.fuelConsumptionMicroliters) { + const fuelP = document.createElement('p'); + fuelP.textContent = `Fuel consumption: ${( + route.travelAdvisory.fuelConsumptionMicroliters / 1e6 + ).toFixed(2)} L`; + detailsDiv.appendChild(fuelP); + } - routeTag.appendChild(detailsDiv); + routeTag.appendChild(detailsDiv); - const marker = new AdvancedMarkerElement({ - map: map.innerMap, - position: route.path![index], - content: routeTag, - zIndex: route.routeLabels?.includes(RouteLabel.DEFAULT_ROUTE) - ? 1 - : undefined, - }); - markers.push(marker); - } + const marker = new AdvancedMarkerElement({ + map: map.innerMap, + position: route.path![index], + content: routeTag, + zIndex: route.routeLabels?.includes(RouteLabel.DEFAULT_ROUTE) + ? 1 + : undefined, + }); + markers.push(marker); + } function clearMap() { markers.forEach((marker) => { @@ -499,7 +469,7 @@ async function init() { function attachAlertWindowListener() { const alertBox = document.getElementById('alert') as HTMLDivElement; - const closeBtn = alertBox.querySelector('.close') as HTMLButtonElement; + const closeBtn = alertBox.querySelector('.close')!; closeBtn.addEventListener('click', () => { if (alertBox.style.display !== 'none') { alertBox.style.display = 'none'; @@ -521,17 +491,18 @@ async function init() { ].forEach(([autocomplete, autocompleteData]) => { autocomplete.addEventListener( 'gmp-select', - //prettier-ignore - //@ts-ignore - async (event: google.maps.places.PlacePredictionSelectEvent) => { - autocompleteData.predictionText = event.placePrediction.text.text; - - const place = event.placePrediction.toPlace(); - await place.fetchFields({ - fields: ['location'], - }); - autocompleteData.location = place.location; - } + async ( + event: google.maps.places.PlacePredictionSelectEvent + ) => { + autocompleteData.predictionText = + event.placePrediction.text.text; + + const place = event.placePrediction.toPlace(); + await place.fetchFields({ + fields: ['location'], + }); + autocompleteData.location = place.location; + } ); }); diff --git a/samples/routes-compute-routes/package.json b/samples/routes-compute-routes/package.json index 2afedb694..442dc546a 100644 --- a/samples/routes-compute-routes/package.json +++ b/samples/routes-compute-routes/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/routes-compute-routes", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh routes-compute-routes && bash ../app.sh routes-compute-routes && bash ../docs.sh routes-compute-routes && npm run build:vite --workspace=. && bash ../dist.sh routes-compute-routes", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/routes-compute-routes/tsconfig.json b/samples/routes-compute-routes/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/routes-compute-routes/tsconfig.json +++ b/samples/routes-compute-routes/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/routes-get-alternatives/index.ts b/samples/routes-get-alternatives/index.ts index 19bc3b118..d8d3bd74d 100644 --- a/samples/routes-get-alternatives/index.ts +++ b/samples/routes-get-alternatives/index.ts @@ -5,13 +5,13 @@ */ // [START maps_routes_get_alternatives] let mapPolylines: google.maps.Polyline[] = []; -const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +const mapElement = document.querySelector('gmp-map')!; let innerMap; // Initialize and add the map. async function initMap() { // Request the needed libraries. - (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary; + await google.maps.importLibrary('maps'); innerMap = mapElement.innerMap; innerMap.setOptions({ @@ -26,7 +26,6 @@ async function initMap() { } async function getDirections() { - //@ts-ignore // Request the needed libraries. const [{ Route, RouteLabel }] = await Promise.all([ google.maps.importLibrary('routes'), @@ -34,7 +33,7 @@ async function getDirections() { // [START maps_routes_get_alternatives_request_full] // [START maps_routes_get_alternatives_request] // Build a request. - const request = { + const request: google.maps.routes.ComputeRoutesRequest = { origin: 'San Francisco, CA', destination: 'Sunset Dr Pacific Grove, CA 93950', travelMode: 'DRIVING', diff --git a/samples/routes-get-alternatives/package.json b/samples/routes-get-alternatives/package.json index 390186e95..7dcb301a3 100644 --- a/samples/routes-get-alternatives/package.json +++ b/samples/routes-get-alternatives/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/routes-get-alternatives", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh routes-get-alternatives && bash ../app.sh routes-get-alternatives && bash ../docs.sh routes-get-alternatives && npm run build:vite --workspace=. && bash ../dist.sh routes-get-alternatives", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/routes-get-alternatives/tsconfig.json b/samples/routes-get-alternatives/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/routes-get-alternatives/tsconfig.json +++ b/samples/routes-get-alternatives/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/routes-get-directions-panel/index.ts b/samples/routes-get-directions-panel/index.ts index f695f9743..f1185c641 100644 --- a/samples/routes-get-directions-panel/index.ts +++ b/samples/routes-get-directions-panel/index.ts @@ -7,18 +7,15 @@ // Initialize and add the map. let map; let mapPolylines: google.maps.Polyline[] = []; -let markers: google.maps.marker.AdvancedMarkerElement[] = []; -let center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA +const markers: google.maps.marker.AdvancedMarkerElement[] = []; +const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA // Initialize and add the map. async function initMap(): Promise { // Request the needed libraries. - //@ts-ignore const [{ Map }, { Route }] = await Promise.all([ - google.maps.importLibrary('maps') as Promise, - google.maps.importLibrary( - 'routes' - ) as Promise, + google.maps.importLibrary('maps'), + google.maps.importLibrary('routes'), ]); map = new Map(document.getElementById('map') as HTMLElement, { @@ -29,10 +26,13 @@ async function initMap(): Promise { }); // Define a simple directions request. - const request = { + const request: google.maps.routes.ComputeRoutesRequest = { origin: 'Mountain View, CA', destination: 'Sausalito, CA', - intermediates: ['Half Moon Bay, CA', 'Pacifica Esplanade Beach'], + intermediates: [ + { location: 'Half Moon Bay, CA' }, + { location: 'Pacifica Esplanade Beach' }, + ], travelMode: 'DRIVING', fields: ['legs', 'path'], }; @@ -44,6 +44,10 @@ async function initMap(): Promise { console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`); // Use createPolylines to create polylines for the route. + if (!routes) { + console.warn('No routes found.'); + return; + } mapPolylines = routes[0].createPolylines(); // Add polylines to the map. mapPolylines.forEach((polyline) => polyline.setMap(map)); @@ -80,7 +84,7 @@ async function initMap(): Promise { // Leg Title const legTitleElement = document.createElement('h3'); - legTitleElement.textContent = `Leg ${index + 1} of ${route.legs.length}`; + legTitleElement.textContent = `Leg ${index + 1} of ${route.legs!.length}`; legContainer.appendChild(legTitleElement); if (leg.steps && leg.steps.length > 0) { @@ -132,9 +136,7 @@ async function initMap(): Promise { // [END maps_routes_get_directions_panel_steps] // Helper function to fit the map to the path. async function fitMapToPath(path) { - const { LatLngBounds } = (await google.maps.importLibrary( - 'core' - )) as google.maps.CoreLibrary; + const { LatLngBounds } = await google.maps.importLibrary('core'); const bounds = new LatLngBounds(); path.forEach((point) => { bounds.extend(point); diff --git a/samples/routes-get-directions-panel/package.json b/samples/routes-get-directions-panel/package.json index 05e55e9f1..ebc300e40 100644 --- a/samples/routes-get-directions-panel/package.json +++ b/samples/routes-get-directions-panel/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/routes-get-directions-panel", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh routes-get-directions-panel && bash ../app.sh routes-get-directions-panel && bash ../docs.sh routes-get-directions-panel && npm run build:vite --workspace=. && bash ../dist.sh routes-get-directions-panel", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/routes-get-directions-panel/tsconfig.json b/samples/routes-get-directions-panel/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/routes-get-directions-panel/tsconfig.json +++ b/samples/routes-get-directions-panel/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/routes-get-directions/index.ts b/samples/routes-get-directions/index.ts index 82b791b0a..b9e7c0d5b 100644 --- a/samples/routes-get-directions/index.ts +++ b/samples/routes-get-directions/index.ts @@ -13,12 +13,9 @@ const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA async function initMap(): Promise { // Request the needed libraries. const [{ Map }, { Place }, { Route }] = await Promise.all([ - google.maps.importLibrary('maps') as Promise, - google.maps.importLibrary( - 'places' - ) as Promise, - //@ts-ignore - google.maps.importLibrary('routes') as Promise, + google.maps.importLibrary('maps'), + google.maps.importLibrary('places'), + google.maps.importLibrary('routes'), ]); map = new Map(document.getElementById('map') as HTMLElement, { @@ -81,7 +78,7 @@ async function initMap(): Promise { // [START maps_routes_get_directions_request_complete] // [START maps_routes_get_directions_request_simple] // Define a routes request. - const request = { + const request: google.maps.routes.ComputeRoutesRequest = { origin: 'Mountain View, CA', destination: 'San Francisco, CA', travelMode: 'DRIVING', @@ -97,6 +94,10 @@ async function initMap(): Promise { // [START maps_routes_get_directions_polyline] // Use createPolylines to create polylines for the route. + if (!routes) { + console.warn('No routes found.'); + return; + } mapPolylines = routes[0].createPolylines(); // Add polylines to the map. mapPolylines.forEach((polyline) => polyline.setMap(map)); @@ -104,7 +105,9 @@ async function initMap(): Promise { // Create markers to start and end points. const markers = await routes[0].createWaypointAdvancedMarkers(); // Add markers to the map - markers.forEach((marker) => marker.setMap(map)); + markers.forEach((marker) => { + marker.map = map; + }); // [END maps_routes_get_directions_polyline] // [END maps_routes_get_directions_request_complete] @@ -117,9 +120,7 @@ async function initMap(): Promise { // Helper function to fit the map to the path. async function fitMapToPath(path) { - const { LatLngBounds } = (await google.maps.importLibrary( - 'core' - )) as google.maps.CoreLibrary; + const { LatLngBounds } = await google.maps.importLibrary('core'); const bounds = new LatLngBounds(); path.forEach((point) => { bounds.extend(point); diff --git a/samples/routes-get-directions/package.json b/samples/routes-get-directions/package.json index bea7cb8eb..7bafdcdef 100644 --- a/samples/routes-get-directions/package.json +++ b/samples/routes-get-directions/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/routes-get-directions", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh routes-get-directions && bash ../app.sh routes-get-directions && bash ../docs.sh routes-get-directions && npm run build:vite --workspace=. && bash ../dist.sh routes-get-directions", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/routes-get-directions/tsconfig.json b/samples/routes-get-directions/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/routes-get-directions/tsconfig.json +++ b/samples/routes-get-directions/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/routes-markers/index.ts b/samples/routes-markers/index.ts index d78a670a7..0f4c91a99 100644 --- a/samples/routes-markers/index.ts +++ b/samples/routes-markers/index.ts @@ -5,7 +5,7 @@ */ // [START maps_routes_markers] let mapPolylines: google.maps.Polyline[] = []; -const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +const mapElement = document.querySelector('gmp-map')!; let innerMap; // Initialize and add the map. @@ -26,7 +26,6 @@ async function initMap() { } async function getDirections() { - //@ts-ignore // Request the needed libraries. const [{ Route }, { PinElement }] = await Promise.all([ google.maps.importLibrary('routes'), @@ -36,7 +35,7 @@ async function getDirections() { // [START maps_routes_markers_request_full] // [START maps_routes_markers_request] // Define routes request with an intermediate stop. - const request = { + const request: google.maps.routes.ComputeRoutesRequest = { origin: 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131', destination: '100 Spinnaker Dr, Sausalito, CA 94965', // We're having a yummy lunch! intermediates: [{ location: '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf! @@ -57,7 +56,6 @@ async function getDirections() { // Alter style based on marker index. function markerOptionsMaker( defaultOptions: google.maps.marker.AdvancedMarkerElementOptions, - //@ts-ignore waypointMarkerDetails: google.maps.routes.WaypointMarkerDetails ) { const { index, totalMarkers, leg } = waypointMarkerDetails; diff --git a/samples/routes-markers/package.json b/samples/routes-markers/package.json index edb83f864..3303c9cfd 100644 --- a/samples/routes-markers/package.json +++ b/samples/routes-markers/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/routes-markers", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh routes-markers && bash ../app.sh routes-markers && bash ../docs.sh routes-markers && npm run build:vite --workspace=. && bash ../dist.sh routes-markers", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/routes-markers/tsconfig.json b/samples/routes-markers/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/routes-markers/tsconfig.json +++ b/samples/routes-markers/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/routes-route-matrix/index.ts b/samples/routes-route-matrix/index.ts index 18db1f5ae..aeda4698a 100644 --- a/samples/routes-route-matrix/index.ts +++ b/samples/routes-route-matrix/index.ts @@ -6,21 +6,26 @@ // [START maps_routes_route_matrix] // Initialize and add the map. let map; -let markers: google.maps.marker.AdvancedMarkerElement[] = []; -let center = { lat: 51.55, lng: -1.8 }; +const markers: google.maps.marker.AdvancedMarkerElement[] = []; +const center = { lat: 51.55, lng: -1.8 }; async function initMap(): Promise { // Request the needed libraries. - //prettier-ignore - //@ts-ignore - const [{Map}, {Place}, {AdvancedMarkerElement, PinElement}, {RouteMatrix}] = await Promise.all([ - google.maps.importLibrary('maps') as Promise, - google.maps.importLibrary('places') as Promise, - google.maps.importLibrary('marker') as Promise, - google.maps.importLibrary('routes') as Promise - ]); + const [ + { Map }, + { Place }, + { AdvancedMarkerElement, PinElement }, + { RouteMatrix }, + { LatLngBounds, UnitSystem }, + ] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('places'), + google.maps.importLibrary('marker'), + google.maps.importLibrary('routes'), + google.maps.importLibrary('core'), + ]); - const bounds = new google.maps.LatLngBounds(); + const bounds = new LatLngBounds(); map = new Map(document.getElementById('map') as HTMLElement, { zoom: 8, @@ -50,11 +55,13 @@ async function initMap(): Promise { ]); // [START maps_routes_route_matrix_request] - const request = { - origins: [origin1, origin2], - destinations: [destinationA, destinationB], + const destinations = [destinationA, destinationB]; + const origins = [origin1, origin2]; + const request: google.maps.routes.ComputeRouteMatrixRequest = { + origins, + destinations, travelMode: 'DRIVING', - units: google.maps.UnitSystem.METRIC, + units: UnitSystem.METRIC, fields: ['distanceMeters', 'durationMillis', 'condition'], }; // [END maps_routes_route_matrix_request] @@ -71,10 +78,9 @@ async function initMap(): Promise { JSON.stringify(response, null, 2); // Add markers for the origins. - for (const origin of request.origins) { + for (const origin of origins) { if (origin.location) { const pin = new PinElement({ - //@ts-ignore glyphText: 'O', glyphColor: 'white', background: '#137333', @@ -83,20 +89,19 @@ async function initMap(): Promise { const marker = new AdvancedMarkerElement({ map, position: origin.location, - content: pin.element, title: `Origin: ${origin.displayName}`, }); + marker.append(pin); markers.push(marker); bounds.extend(origin.location); } } // Add markers for the destinations. - for (let i = 0; i < request.destinations.length; i++) { - const destination = request.destinations[i]; + for (let i = 0; i < destinations.length; i++) { + const destination = destinations[i]; if (destination.location) { const pin = new PinElement({ - //@ts-ignore glyphText: 'D', glyphColor: 'white', background: '#C5221F', diff --git a/samples/routes-route-matrix/package.json b/samples/routes-route-matrix/package.json index b31a0f827..95a1534ce 100644 --- a/samples/routes-route-matrix/package.json +++ b/samples/routes-route-matrix/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/routes-route-matrix", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh routes-route-matrix && bash ../app.sh routes-route-matrix && bash ../docs.sh routes-route-matrix && npm run build:vite --workspace=. && bash ../dist.sh routes-route-matrix", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/routes-route-matrix/tsconfig.json b/samples/routes-route-matrix/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/routes-route-matrix/tsconfig.json +++ b/samples/routes-route-matrix/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/streetview-overlays/README.md b/samples/streetview-overlays/README.md index c1a920817..d1ba706d8 100644 --- a/samples/streetview-overlays/README.md +++ b/samples/streetview-overlays/README.md @@ -33,7 +33,7 @@ From 'samples': ### Run lint to check for problems `cd samples/streetview-overlays` -`npx eslint index.ts` +`npx eslint index.ts` ## Feedback diff --git a/samples/streetview-overlays/index.html b/samples/streetview-overlays/index.html index 634186878..ba5340caf 100644 --- a/samples/streetview-overlays/index.html +++ b/samples/streetview-overlays/index.html @@ -1,4 +1,4 @@ - + - + diff --git a/samples/test-example/index.ts b/samples/test-example/index.ts index 1c2eede9a..67055e8d3 100644 --- a/samples/test-example/index.ts +++ b/samples/test-example/index.ts @@ -12,22 +12,16 @@ // [START maps_test_example] // Declare the gmp-map element. -const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +const mapElement = document.querySelector('gmp-map')!; let innerMap; -const advancedMarkerElement = document.querySelector( - 'gmp-advanced-marker' -) as google.maps.marker.AdvancedMarkerElement; +const advancedMarkerElement = document.querySelector('gmp-advanced-marker')!; let center; async function initMap() { // [START maps_test_example_instantiate_map] // 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'); + const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); // Get the inner map from the gmp-map element. innerMap = mapElement.innerMap; diff --git a/samples/test-example/package.json b/samples/test-example/package.json index b319e8c44..af8934876 100644 --- a/samples/test-example/package.json +++ b/samples/test-example/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/test-example", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh test-example && bash ../app.sh test-example && bash ../docs.sh test-example && npm run build:vite --workspace=. && bash ../dist.sh test-example", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/test-example/tsconfig.json b/samples/test-example/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/test-example/tsconfig.json +++ b/samples/test-example/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/ui-kit-place-details-compact/index.ts b/samples/ui-kit-place-details-compact/index.ts index 362ecb5ef..a843aa6eb 100644 --- a/samples/ui-kit-place-details-compact/index.ts +++ b/samples/ui-kit-place-details-compact/index.ts @@ -6,14 +6,12 @@ /* [START maps_ui_kit_place_details_compact] */ // Use querySelector to select elements for interaction. /* [START maps_ui_kit_place_details_compact_query_selector] */ -const map = document.querySelector('gmp-map') as google.maps.MapElement; -const placeDetails = document.querySelector('gmp-place-details-compact') as any; +const map = document.querySelector('gmp-map')!; +const placeDetails = document.querySelector('gmp-place-details-compact')!; const placeDetailsRequest = document.querySelector( 'gmp-place-details-place-request' -) as any; -const marker = document.querySelector( - 'gmp-advanced-marker' -) as google.maps.marker.AdvancedMarkerElement; +)!; +const marker = document.querySelector('gmp-advanced-marker')!; /* [END maps_ui_kit_place_details_compact_query_selector] */ async function initMap(): Promise { // Request needed libraries. @@ -21,9 +19,7 @@ async function initMap(): Promise { google.maps.importLibrary('marker'), google.maps.importLibrary('places'), ]); - const { InfoWindow } = (await google.maps.importLibrary( - 'maps' - )) as google.maps.MapsLibrary; + const { InfoWindow } = await google.maps.importLibrary('maps'); await window.customElements.whenDefined('gmp-map'); // Set the inner map options. @@ -33,8 +29,7 @@ async function initMap(): Promise { }); await window.customElements.whenDefined('gmp-advanced-marker'); - marker.collisionBehavior = - google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; + marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL'; const infoWindow = new InfoWindow(); infoWindow.addListener('close', () => { @@ -50,7 +45,7 @@ async function initMap(): Promise { placeDetails.addEventListener('gmp-load', (event) => { // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show. // (The clicked POI LatLng will be a more natural marker position, when available.) - if (!map.center) { + if (!map.center && placeDetails.place?.location) { map.center = marker.position = placeDetails.place.location; showInfoWindow(); } diff --git a/samples/ui-kit-place-details-compact/package.json b/samples/ui-kit-place-details-compact/package.json index 4e7ba9867..9394d6ba4 100644 --- a/samples/ui-kit-place-details-compact/package.json +++ b/samples/ui-kit-place-details-compact/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/ui-kit-place-details-compact", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh ui-kit-place-details-compact && bash ../app.sh ui-kit-place-details-compact && bash ../docs.sh ui-kit-place-details-compact && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-place-details-compact", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/ui-kit-place-details-compact/tsconfig.json b/samples/ui-kit-place-details-compact/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/ui-kit-place-details-compact/tsconfig.json +++ b/samples/ui-kit-place-details-compact/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/ui-kit-place-details/index.ts b/samples/ui-kit-place-details/index.ts index 591986987..17fa4cadc 100644 --- a/samples/ui-kit-place-details/index.ts +++ b/samples/ui-kit-place-details/index.ts @@ -6,14 +6,12 @@ /* [START maps_ui_kit_place_details] */ // Use querySelector to select elements for interaction. /* [START maps_ui_kit_place_details_query_selector] */ -const map = document.querySelector('gmp-map') as google.maps.MapElement; -const placeDetails = document.querySelector('gmp-place-details') as any; +const map = document.querySelector('gmp-map')!; +const placeDetails = document.querySelector('gmp-place-details')!; const placeDetailsRequest = document.querySelector( 'gmp-place-details-place-request' -) as any; -const marker = document.querySelector( - 'gmp-advanced-marker' -) as google.maps.marker.AdvancedMarkerElement; +)!; +const marker = document.querySelector('gmp-advanced-marker')!; /* [END maps_ui_kit_place_details_query_selector] */ async function initMap(): Promise { @@ -33,8 +31,7 @@ async function initMap(): Promise { map.innerMap.panTo(placeDetails.place.location); map.innerMap.setZoom(16); // Set zoom after panning if needed marker.position = placeDetails.place.location; - marker.collisionBehavior = - google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; + marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL'; marker.style.display = 'block'; } }; diff --git a/samples/ui-kit-place-details/package.json b/samples/ui-kit-place-details/package.json index 4aa81d595..385931996 100644 --- a/samples/ui-kit-place-details/package.json +++ b/samples/ui-kit-place-details/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/ui-kit-place-details", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh ui-kit-place-details && bash ../app.sh ui-kit-place-details && bash ../docs.sh ui-kit-place-details && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-place-details", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/ui-kit-place-details/tsconfig.json b/samples/ui-kit-place-details/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/ui-kit-place-details/tsconfig.json +++ b/samples/ui-kit-place-details/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/ui-kit-place-search-nearby/index.ts b/samples/ui-kit-place-search-nearby/index.ts index 05011524e..633eff04d 100644 --- a/samples/ui-kit-place-search-nearby/index.ts +++ b/samples/ui-kit-place-search-nearby/index.ts @@ -7,15 +7,13 @@ /* [START maps_ui_kit_place_search_nearby_query_selectors] */ // Query selectors for various elements in the HTML file. -const map = document.querySelector('gmp-map') as google.maps.MapElement; -const placeSearch = document.querySelector('gmp-place-search') as any; +const map = document.querySelector('gmp-map')!; +const placeSearch = document.querySelector('gmp-place-search')!; const placeSearchQuery = document.querySelector( 'gmp-place-nearby-search-request' -) as any; -const placeDetails = document.querySelector('gmp-place-details-compact') as any; -const placeRequest = document.querySelector( - 'gmp-place-details-place-request' -) as any; +)!; +const placeDetails = document.querySelector('gmp-place-details-compact')!; +const placeRequest = document.querySelector('gmp-place-details-place-request')!; const typeSelect = document.querySelector('.type-select') as HTMLSelectElement; /* [END maps_ui_kit_place_search_nearby_query_selectors] */ @@ -28,10 +26,8 @@ let infoWindow: google.maps.InfoWindow; async function init(): Promise { // Import the necessary libraries from the Google Maps API. const [{ InfoWindow }, { Place }] = await Promise.all([ - google.maps.importLibrary('maps') as Promise, - google.maps.importLibrary( - 'places' - ) as Promise, + google.maps.importLibrary('maps'), + google.maps.importLibrary('places'), ]); // Create a new info window and set its content to the place details element. @@ -89,10 +85,8 @@ async function searchPlaces() { async function addMarkers() { // Import the necessary libraries from the Google Maps API. const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([ - google.maps.importLibrary( - 'marker' - ) as Promise, - google.maps.importLibrary('core') as Promise, + google.maps.importLibrary('marker'), + google.maps.importLibrary('core'), ]); const bounds = new LatLngBounds(); @@ -101,11 +95,11 @@ async function addMarkers() { } for (const place of placeSearch.places) { + if (!place.location) continue; const marker = new AdvancedMarkerElement({ map: map.innerMap, position: place.location, - collisionBehavior: - google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL, + collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL', }); markers.set(place.id, marker); diff --git a/samples/ui-kit-place-search-nearby/package.json b/samples/ui-kit-place-search-nearby/package.json index bb44b2855..7d603636d 100644 --- a/samples/ui-kit-place-search-nearby/package.json +++ b/samples/ui-kit-place-search-nearby/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/ui-kit-place-search-nearby-nearby", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh ui-kit-place-search-nearby && bash ../app.sh ui-kit-place-search-nearby && bash ../docs.sh ui-kit-place-search-nearby && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-place-search-nearby", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/ui-kit-place-search-nearby/tsconfig.json b/samples/ui-kit-place-search-nearby/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/ui-kit-place-search-nearby/tsconfig.json +++ b/samples/ui-kit-place-search-nearby/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/ui-kit-place-search-text/index.html b/samples/ui-kit-place-search-text/index.html index 5c8b541b5..0869d0b30 100644 --- a/samples/ui-kit-place-search-text/index.html +++ b/samples/ui-kit-place-search-text/index.html @@ -4,7 +4,7 @@ SPDX-License-Identifier: Apache-2.0 --> - + Place Text Search with Google Maps diff --git a/samples/ui-kit-place-search-text/index.ts b/samples/ui-kit-place-search-text/index.ts index b8777976d..9d9f7e91f 100644 --- a/samples/ui-kit-place-search-text/index.ts +++ b/samples/ui-kit-place-search-text/index.ts @@ -7,19 +7,15 @@ /* [START maps_ui_kit_place_search_text_query_selectors] */ // Query selectors for various elements in the HTML file. -const map = document.querySelector('gmp-map') as google.maps.MapElement; -const placeSearch = document.querySelector('gmp-place-search') as any; +const map = document.querySelector('gmp-map')!; +const placeSearch = document.querySelector('gmp-place-search')!; const placeSearchQuery = document.querySelector( 'gmp-place-text-search-request' -) as any; -const placeDetails = document.querySelector('gmp-place-details-compact') as any; -const placeRequest = document.querySelector( - 'gmp-place-details-place-request' -) as any; +)!; +const placeDetails = document.querySelector('gmp-place-details-compact')!; +const placeRequest = document.querySelector('gmp-place-details-place-request')!; const queryInput = document.querySelector('.query-input') as HTMLInputElement; -const searchButton = document.querySelector( - '.search-button' -) as HTMLButtonElement; +const searchButton = document.querySelector('.search-button')!; /* [END maps_ui_kit_place_search_text_query_selectors] */ // Global variables for the map, markers, and info window. @@ -31,10 +27,8 @@ let infoWindow: google.maps.InfoWindow; async function init(): Promise { // Import the necessary libraries from the Google Maps API. const [{ InfoWindow }, { Place }] = await Promise.all([ - google.maps.importLibrary('maps') as Promise, - google.maps.importLibrary( - 'places' - ) as Promise, + google.maps.importLibrary('maps'), + google.maps.importLibrary('places'), ]); // Create a new info window and set its content to the place details element. @@ -98,10 +92,8 @@ async function searchPlaces() { async function addMarkers() { // Import the necessary libraries from the Google Maps API. const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([ - google.maps.importLibrary( - 'marker' - ) as Promise, - google.maps.importLibrary('core') as Promise, + google.maps.importLibrary('marker'), + google.maps.importLibrary('core'), ]); const bounds = new LatLngBounds(); @@ -110,11 +102,14 @@ async function addMarkers() { } for (const place of placeSearch.places) { + if (!place.location) { + continue; + } + const marker = new AdvancedMarkerElement({ map: map.innerMap, position: place.location, - collisionBehavior: - google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL, + collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL', }); markers.set(place.id, marker); diff --git a/samples/ui-kit-place-search-text/package.json b/samples/ui-kit-place-search-text/package.json index 65f449b88..a2212156f 100644 --- a/samples/ui-kit-place-search-text/package.json +++ b/samples/ui-kit-place-search-text/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/ui-kit-place-search-text", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh ui-kit-place-search-text && bash ../app.sh ui-kit-place-search-text && bash ../docs.sh ui-kit-place-search-text && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-place-search-text", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/ui-kit-place-search-text/tsconfig.json b/samples/ui-kit-place-search-text/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/ui-kit-place-search-text/tsconfig.json +++ b/samples/ui-kit-place-search-text/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/vite.config.js b/samples/vite.config.js index 96bd6f864..157044d81 100644 --- a/samples/vite.config.js +++ b/samples/vite.config.js @@ -25,7 +25,7 @@ export default defineConfig(({ command }) => { const projectRepoRoot = resolve(__dirname, '..'); // /Users/wfrench/git/js-api-samples/ let effectiveOutDir; - let effectiveBuildInput = {}; // For rollupOptions.input + const effectiveBuildInput = {}; // For rollupOptions.input if (command === 'build') { // When `npm run build:vite --workspace=.` is run from a sample's directory, diff --git a/samples/weather-api-current-compact/index.ts b/samples/weather-api-current-compact/index.ts index a0d14fbaa..cfa99e1d6 100644 --- a/samples/weather-api-current-compact/index.ts +++ b/samples/weather-api-current-compact/index.ts @@ -19,12 +19,8 @@ let allMarkers: google.maps.marker.AdvancedMarkerElement[] = []; // To store all let markersLoaded = false; // Flag to track if button markers are loaded async function initMap(): Promise { - const { Map } = (await google.maps.importLibrary( - 'maps' - )) as google.maps.MapsLibrary; - const { AdvancedMarkerElement } = (await google.maps.importLibrary( - 'marker' - )) as google.maps.MarkerLibrary; + google.maps.importLibrary('marker'); // preload + const { Map } = await google.maps.importLibrary('maps'); map = new Map(document.getElementById('map') as HTMLElement, { center: { lat: 48.8566, lng: 2.3522 }, // Set center to Paris initially, will change based on markers @@ -120,10 +116,8 @@ async function createAndAddMarker( location: { name: string; lat: number; lng: number }, markerType: 'initial' | 'button' | 'dynamic' ): Promise { - const { AdvancedMarkerElement } = (await google.maps.importLibrary( - 'marker' - )) as google.maps.MarkerLibrary; - + const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const { LatLng } = await google.maps.importLibrary('core'); const weatherWidget = document.createElement( 'simple-weather-widget' ) as SimpleWeatherWidget; @@ -149,7 +143,7 @@ async function createAndAddMarker( updateWeatherDisplayForMarker( marker, weatherWidget, - new google.maps.LatLng(location.lat, location.lng) + new LatLng(location.lat, location.lng) ); // Add click listener to the marker @@ -216,9 +210,7 @@ async function toggleDarkMode() { }); // Re-initialize the map to apply the new map ID - const { Map } = (await google.maps.importLibrary( - 'maps' - )) as google.maps.MapsLibrary; + const { Map } = await google.maps.importLibrary('maps'); const currentCenter = map.getCenter(); const currentZoom = map.getZoom(); const currentMapId = mapContainer.classList.contains('dark-mode') @@ -325,9 +317,7 @@ const locations = [ ]; async function loadWeatherMarkers(): Promise { - const { AdvancedMarkerElement } = (await google.maps.importLibrary( - 'marker' - )) as google.maps.MarkerLibrary; + const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); for (const location of locations) { await createAndAddMarker(location, 'button'); // Create and add button markers diff --git a/samples/weather-api-current-compact/package.json b/samples/weather-api-current-compact/package.json index 1b782adaf..20f065021 100644 --- a/samples/weather-api-current-compact/package.json +++ b/samples/weather-api-current-compact/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/weather-api-current-compact", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh weather-api-current-compact && bash ../app.sh weather-api-current-compact && bash ../docs.sh weather-api-current-compact && npm run build:vite --workspace=. && bash ../dist.sh weather-api-current-compact", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "vite --port 5173", "build:vite": "vite build --base './'", diff --git a/samples/weather-api-current-compact/simple-weather-widget.ts b/samples/weather-api-current-compact/simple-weather-widget.ts index 595341151..3119275a4 100644 --- a/samples/weather-api-current-compact/simple-weather-widget.ts +++ b/samples/weather-api-current-compact/simple-weather-widget.ts @@ -190,10 +190,10 @@ class SimpleWeatherWidget extends HTMLElement { const isForecastDay = weatherData.daytimeForecast || weatherData.nighttimeForecast; - let temperature: number | undefined, - iconBaseUri: string | undefined, - rainProbability: number | undefined, - rainQpf: number | undefined; + let temperature: number | undefined; + let iconBaseUri: string | undefined; + let rainProbability: number | undefined; + let rainQpf: number | undefined; if (isForecastDay) { // Data is a forecast day object diff --git a/samples/weather-api-current-compact/tsconfig.json b/samples/weather-api-current-compact/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/weather-api-current-compact/tsconfig.json +++ b/samples/weather-api-current-compact/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/web-components-events/README.md b/samples/web-components-events/README.md index c7d8b8989..a20beae74 100644 --- a/samples/web-components-events/README.md +++ b/samples/web-components-events/README.md @@ -33,7 +33,7 @@ From 'samples': ### Run lint to check for problems `cd samples/web-components-events` -`npx eslint index.ts` +`npx eslint index.ts` ## Feedback diff --git a/samples/web-components-events/index.html b/samples/web-components-events/index.html index f6f8b9390..232930454 100644 --- a/samples/web-components-events/index.html +++ b/samples/web-components-events/index.html @@ -6,34 +6,31 @@ --> - - Add a Map Web Component with Events + + Add a Map Web Component with Events - - - - - - - - + + + + + + + + - - - + diff --git a/samples/web-components-events/index.ts b/samples/web-components-events/index.ts index c7c820af5..d55bcdc73 100644 --- a/samples/web-components-events/index.ts +++ b/samples/web-components-events/index.ts @@ -7,28 +7,28 @@ // [START maps_web_components_events] // This example adds a map using web components. async function initMap(): Promise { - await google.maps.importLibrary("maps"); - await google.maps.importLibrary("marker"); + google.maps.importLibrary('marker'); // preload + const { InfoWindow } = await google.maps.importLibrary('maps'); - console.log('Maps JavaScript API loaded.'); + console.log('Maps JavaScript API loaded.'); - const advancedMarkers = document.querySelectorAll("#marker-click-event-example gmp-advanced-marker"); - - for (const markerElement of advancedMarkers) { - const advancedMarker = markerElement as google.maps.marker.AdvancedMarkerElement; + const advancedMarkers = document.querySelectorAll( + '#marker-click-event-example gmp-advanced-marker' + ) as Iterable; - customElements.whenDefined(advancedMarker.localName).then(async () => { - advancedMarker.addEventListener('gmp-click', () => { - const infoWindow = new google.maps.InfoWindow({ - content: advancedMarker.title, - }); + for (const advancedMarker of advancedMarkers) { + customElements.whenDefined(advancedMarker.localName).then(async () => { + advancedMarker.addEventListener('gmp-click', () => { + const infoWindow = new InfoWindow({ + content: advancedMarker.title, + }); - infoWindow.open({ - anchor: advancedMarker, + infoWindow.open({ + anchor: advancedMarker, + }); + }); }); - }); - }); - } + } } initMap(); diff --git a/samples/web-components-events/package.json b/samples/web-components-events/package.json index 91e619b93..4fd7985cf 100644 --- a/samples/web-components-events/package.json +++ b/samples/web-components-events/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/web-components-events", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh web-components-events && bash ../app.sh web-components-events && bash ../docs.sh web-components-events && npm run build:vite --workspace=. && bash ../dist.sh web-components-events", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/web-components-events/style.css b/samples/web-components-events/style.css index a2eaae43e..16256fdb3 100644 --- a/samples/web-components-events/style.css +++ b/samples/web-components-events/style.css @@ -10,9 +10,9 @@ */ html, body { - height: 100%; - margin: 0; - padding: 0; + height: 100%; + margin: 0; + padding: 0; } -/* [END maps_web_components_events] */ \ No newline at end of file +/* [END maps_web_components_events] */ diff --git a/samples/web-components-events/tsconfig.json b/samples/web-components-events/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/web-components-events/tsconfig.json +++ b/samples/web-components-events/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/web-components-map/package.json b/samples/web-components-map/package.json index 0311efd05..e7570025e 100644 --- a/samples/web-components-map/package.json +++ b/samples/web-components-map/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/web-components-map", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh web-components-map && bash ../app.sh web-components-map && bash ../docs.sh web-components-map && npm run build:vite --workspace=. && bash ../dist.sh web-components-map", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/web-components-map/tsconfig.json b/samples/web-components-map/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/web-components-map/tsconfig.json +++ b/samples/web-components-map/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/samples/web-components-markers/index.html b/samples/web-components-markers/index.html index aff1da731..b34698d91 100644 --- a/samples/web-components-markers/index.html +++ b/samples/web-components-markers/index.html @@ -37,4 +37,4 @@ - \ No newline at end of file + diff --git a/samples/web-components-markers/index.ts b/samples/web-components-markers/index.ts index e34d7316d..04fcfd430 100644 --- a/samples/web-components-markers/index.ts +++ b/samples/web-components-markers/index.ts @@ -10,6 +10,7 @@ async function initMap() { console.log('Maps JavaScript API loaded.'); } + // [END maps_web_components_markers_initmap] initMap(); // [END maps_web_components_markers] diff --git a/samples/web-components-markers/package.json b/samples/web-components-markers/package.json index ef46297cc..ee628f50e 100644 --- a/samples/web-components-markers/package.json +++ b/samples/web-components-markers/package.json @@ -2,7 +2,7 @@ "name": "@js-api-samples/web-components-markers", "version": "1.0.0", "scripts": { - "build": "tsc && bash ../jsfiddle.sh web-components-markers && bash ../app.sh web-components-markers && bash ../docs.sh web-components-markers && npm run build:vite --workspace=. && bash ../dist.sh web-components-markers", + "build": "bash ../build-single.sh", "test": "tsc && npm run build:vite --workspace=.", "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", diff --git a/samples/web-components-markers/tsconfig.json b/samples/web-components-markers/tsconfig.json index 5ba470c05..976bcc6ef 100644 --- a/samples/web-components-markers/tsconfig.json +++ b/samples/web-components-markers/tsconfig.json @@ -3,7 +3,5 @@ "compilerOptions": { "rootDir": "." }, - "include": [ - "./*.ts", - ] + "include": ["./*.ts"] } diff --git a/tsconfig.base.json b/tsconfig.base.json index 3bf9c71fa..1e50e346b 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -10,6 +10,6 @@ "noImplicitAny": false, "skipLibCheck": true, "esModuleInterop": true, - "types": ["google.maps"], + "types": ["google.maps"] } }