diff --git a/samples/place-text-search/index.html b/samples/place-text-search/index.html index 2e1417a3a..b641c55de 100644 --- a/samples/place-text-search/index.html +++ b/samples/place-text-search/index.html @@ -13,6 +13,10 @@ +
+ + +
diff --git a/samples/place-text-search/index.ts b/samples/place-text-search/index.ts index d4b676f19..5b19d1922 100644 --- a/samples/place-text-search/index.ts +++ b/samples/place-text-search/index.ts @@ -6,58 +6,88 @@ // [START maps_place_text_search] let map; +let marker; +let markers = {}; let center; +let textInput; +let textInputButton; +let infoWindow; async function initMap() { - const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; center = { lat: 37.4161493, lng: -122.0812166 }; map = new Map(document.getElementById('map') as HTMLElement, { center: center, zoom: 11, + mapTypeControl: false, mapId: 'DEMO_MAP_ID', }); - findPlaces(); + textInput = document.getElementById('text-input') as HTMLInputElement; + textInputButton = document.getElementById('text-input-button') as HTMLButtonElement; + const card = document.getElementById('text-input-card') as HTMLElement; + map.controls[google.maps.ControlPosition.TOP_LEFT].push(card); + + textInputButton.addEventListener('click', () => { + findPlaces(textInput.value); + }); + + textInput.addEventListener('keydown', (event) => { + if (event.key === 'Enter') { + findPlaces(textInput.value); + } + }); + + infoWindow = new google.maps.InfoWindow(); } -async function findPlaces() { +async function findPlaces(query) { const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // [START maps_place_text_search_request] const request = { - textQuery: 'Tacos in Mountain View', + textQuery: query, fields: ['displayName', 'location', 'businessStatus'], - includedType: 'restaurant', - locationBias: { lat: 37.4161493, lng: -122.0812166 }, + includedType: '', // Restrict query to a specific type (leave blank for any). + useStrictTypeFiltering: true, + locationBias: map.center, isOpenNow: true, language: 'en-US', maxResultCount: 8, - minRating: 3.2, + minRating: 1, // Specify a minimum rating. region: 'us', - useStrictTypeFiltering: false, }; - //@ts-ignore const { places } = await Place.searchByText(request); // [END maps_place_text_search_request] if (places.length) { - console.log(places); - const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary; const bounds = new LatLngBounds(); + + // First remove all existing markers. + for (marker in markers) { + marker.map = null; + } + markers = {}; // Loop through and get all the results. - places.forEach((place) => { - const markerView = new AdvancedMarkerElement({ + places.forEach(place => { + const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); + markers[place.id] = marker; + + marker.addListener('gmp-click', () => { + console.log(`${place.displayName}: ${place.id}`); + map.panTo(place.location); + updateInfoWindow(`${place.displayName}: ${place.id}`, marker); + }); bounds.extend(place.location as google.maps.LatLng); - console.log(place); }); map.fitBounds(bounds); @@ -67,5 +97,15 @@ async function findPlaces() { } } +// Helper function to create an info window. +async function updateInfoWindow(content, anchor) { + infoWindow.setContent(content); + infoWindow.open({ + map, + anchor, + shouldFocus: false, + }); +} + initMap(); // [END maps_place_text_search] diff --git a/samples/place-text-search/style.css b/samples/place-text-search/style.css index 534917297..9dbc92efd 100644 --- a/samples/place-text-search/style.css +++ b/samples/place-text-search/style.css @@ -22,4 +22,39 @@ body { padding: 0; } +#text-input-card { + width: 25%; + background-color: #fff; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; + margin: 10px; + padding: 5px; + font-family: Roboto, sans-serif; + font-size: large; + font-weight: bold; +} + +#text-input { + width: 100%; + padding: 10px; + margin: 0; + box-sizing: border-box; +} + +#text-input-button { + display: inline-block; + margin-top: .5rem; + width: auto; + padding: .6rem .75rem; + font-size: .875rem; + font-weight: 500; + color: #fff; + background-color: #2563eb; + border: none; + border-radius: .375rem; + cursor: pointer; + transition: background-color .15s ease-in-out; + text-align: center +} + /* [END maps_place_text_search] */ \ No newline at end of file diff --git a/samples/ui-kit-place-search-nearby/index.html b/samples/ui-kit-place-search-nearby/index.html index 13dbe4db4..b601fea53 100644 --- a/samples/ui-kit-place-search-nearby/index.html +++ b/samples/ui-kit-place-search-nearby/index.html @@ -4,42 +4,55 @@ SPDX-License-Identifier: Apache-2.0 --> - + - Place List Nearby Search with Google Maps - - + Place Nearby Search with Google Maps + + - -
-
- -
-
- -
-
- +
+
+ +
+
+ + + + + +
- - - - +
+ + + + + + + + + + + +
+ ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); diff --git a/samples/ui-kit-place-search-nearby/index.ts b/samples/ui-kit-place-search-nearby/index.ts index 2af798655..46899fe5a 100644 --- a/samples/ui-kit-place-search-nearby/index.ts +++ b/samples/ui-kit-place-search-nearby/index.ts @@ -6,132 +6,161 @@ /* [START maps_ui_kit_place_search_nearby] */ /* [START maps_ui_kit_place_search_nearby_query_selectors] */ -const map = document.querySelector("gmp-map") as any; -const placeList = document.querySelector("gmp-place-list") as any; -const typeSelect = document.querySelector(".type-select") as any; -const placeDetails = document.querySelector("gmp-place-details") as any; -const placeDetailsRequest = document.querySelector('gmp-place-details-place-request') as any; +const mapContainer = document.getElementById('map-container') as any; +const placeSearch = document.querySelector('gmp-place-search') as any; +const placeSearchQuery = + document.querySelector('gmp-place-nearby-search-request') as any; +const detailsContainer = document.getElementById('details-container') as any; +const placeDetails = document.querySelector('gmp-place-details-compact') as any; +const placeRequest = + document.querySelector('gmp-place-details-place-request') as any; +const typeSelect = document.querySelector('.type-select'); /* [END maps_ui_kit_place_search_nearby_query_selectors] */ + let markers = {}; -let infoWindow; - -async function initMap(): Promise { - await google.maps.importLibrary('places'); - const { LatLngBounds } = await google.maps.importLibrary('core') as google.maps.CoreLibrary; - const { InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary; - const { spherical } = await google.maps.importLibrary('geometry') as google.maps.GeometryLibrary; - - infoWindow = new InfoWindow; - let marker; - - function getContainingCircle(bounds) { - const diameter = spherical.computeDistanceBetween( - bounds.getNorthEast(), - bounds.getSouthWest() - ); - const calculatedRadius = diameter / 2; - const cappedRadius = Math.min(calculatedRadius, 50000); // Radius cannot be more than 50000. - return { center: bounds.getCenter(), radius: cappedRadius }; +let gMap; +let placeDetailsPopup; +let spherical; +let AdvancedMarkerElement; +let LatLngBounds; +let LatLng; + +async function init(): Promise { + //@ts-ignore + ({spherical} = await google.maps.importLibrary('geometry')); + //@ts-ignore + const {Map} = await google.maps.importLibrary('maps'); + await google.maps.importLibrary('places'); + //@ts-ignore + ({AdvancedMarkerElement} = await google.maps.importLibrary('marker')); + //@ts-ignore + ({LatLngBounds, LatLng} = await google.maps.importLibrary('core')); + + let mapOptions = { + center: {lat: -37.813, lng: 144.963}, + zoom: 16, + mapTypeControl: false, + clickableIcons: false, + mapId: 'DEMO_MAP_ID' + }; + + gMap = new Map(mapContainer, mapOptions); + + placeDetailsPopup = new AdvancedMarkerElement( + {map: null, content: placeDetails, zIndex: 100}); + + findCurrentLocation(); + + gMap.addListener('click', (e) => { + hidePlaceDetailsPopup(); + }); + /* [START maps_ui_kit_place_search_nearby_event] */ + //@ts-ignore + typeSelect.addEventListener('change', (event) => { + event.preventDefault(); + searchPlaces(); + }); + + placeSearch.addEventListener('gmp-select', ({place}) => { + if (markers[place.id]) { + markers[place.id].click(); + } + }); +} +/* [END maps_ui_kit_place_search_nearby_event] */ +function searchPlaces() { + const bounds = gMap.getBounds(); + const cent = gMap.getCenter(); + const ne = bounds.getNorthEast(); + const sw = bounds.getSouthWest(); + const diameter = spherical.computeDistanceBetween(ne, sw); + const cappedRadius = + Math.min((diameter / 2), 50000); // Radius cannot be more than 50000. + + + placeDetailsPopup.map = null; + + for (const markerId in markers) { + if (Object.prototype.hasOwnProperty.call(markers, markerId)) { + markers[markerId].map = null; } + } + markers = {}; + //@ts-ignore + if (typeSelect.value) { + mapContainer.style.height = '75vh'; + placeSearch.style.display = 'block'; + placeSearchQuery.maxResultCount = 10; + placeSearchQuery.locationRestriction = { center: { lat: cent.lat(), lng: cent.lng() }, radius: cappedRadius }; + //@ts-ignore + placeSearchQuery.includedTypes = [typeSelect.value]; + placeSearch.addEventListener('gmp-load', addMarkers, {once: true}); + } +} - findCurrentLocation(); - map.innerMap.setOptions({ - mapTypeControl: false, - clickableIcons: false, - }); +async function addMarkers() { + const bounds = new LatLngBounds(); + placeSearch.style.display = 'block'; - /* [START maps_ui_kit_place_search_nearby_event] */ - placeDetails.addEventListener('gmp-load', (event) => { - // Center the info window on the map. - map.innerMap.fitBounds(placeDetails.place.viewport, { top: 500, left: 400 }); - }); + if (placeSearch.places.length > 0) { + placeSearch.places.forEach((place) => { + let marker = + new AdvancedMarkerElement({map: gMap, position: place.location}); - typeSelect.addEventListener('change', (event) => { - // First remove all existing markers. - for(marker in markers){ - markers[marker].map = null; - } - markers = {}; - - if (typeSelect.value) { - placeList.style.display = 'block'; - placeList.configureFromSearchNearbyRequest({ - locationRestriction: getContainingCircle( - map.innerMap.getBounds() - ), - includedPrimaryTypes: [typeSelect.value], - }).then(addMarkers); - // Handle user selection in Place Details. - placeList.addEventListener('gmp-placeselect', ({ place }) => { - markers[place.id].click(); - }); - } + marker.metadata = {id: place.id}; + markers[place.id] = marker; + bounds.extend(place.location); + + /* [START maps_ui_kit_place_search_nearby_click_event] */ + marker.addListener('click', (event) => { + placeRequest.place = place; + placeDetails.style.display = 'block'; + + placeDetailsPopup.position = place.location; + placeDetailsPopup.map = gMap; + + gMap.fitBounds(place.viewport, {top: 0, left: 400}); + + placeDetails.addEventListener('gmp-load', () => { + gMap.fitBounds(place.viewport, {top: 0, right: 450}); + }, {once: true}); + }); + gMap.setCenter(bounds.getCenter()); + gMap.fitBounds(bounds); + /* [END maps_ui_kit_place_search_nearby_click_event] */ }); - /* [END maps_ui_kit_place_search_nearby_event] */ + } } -async function addMarkers(){ - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker') as google.maps.MarkerLibrary; - const { LatLngBounds } = await google.maps.importLibrary('core') as google.maps.CoreLibrary; - - const bounds = new LatLngBounds(); - - if(placeList.places.length > 0){ - placeList.places.forEach((place) => { - let marker = new AdvancedMarkerElement({ - map: map.innerMap, - position: place.location - }); - - markers[place.id] = marker; - bounds.extend(place.location); - - /* [START maps_ui_kit_place_search_nearby_click_event] */ - marker.addListener('gmp-click', (event) => { - if(infoWindow.isOpen){ - infoWindow.close(); - } - - placeDetailsRequest.place = place.id; - placeDetails.style.display = 'block'; - placeDetails.style.width = '350px'; - infoWindow.setOptions({ - content: placeDetails, - }); - infoWindow.open({ - anchor: marker, - map: map.innerMap - }); - }); - /* [END maps_ui_kit_place_search_nearby_click_event] */ - - map.innerMap.setCenter(bounds.getCenter()); - map.innerMap.fitBounds(bounds); - }); - } +async function findCurrentLocation() { + //@ts-ignore + const {LatLng} = await google.maps.importLibrary('core'); + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition( + (position) => { + const pos = + new LatLng(position.coords.latitude, position.coords.longitude); + gMap.panTo(pos); + gMap.setZoom(15); + }, + () => { + console.log('The Geolocation service failed.'); + gMap.setZoom(15); + }, + ); + } else { + console.log('Your browser doesn\'t support geolocation'); + gMap.setZoom(16); + } } -async function findCurrentLocation(){ - const { LatLng } = await google.maps.importLibrary('core') as google.maps.CoreLibrary; - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition( - (position) => { - const pos = new LatLng(position.coords.latitude,position.coords.longitude); - map.innerMap.panTo(pos); - map.innerMap.setZoom(14); - }, - () => { - console.log('The Geolocation service failed.'); - map.innerMap.setZoom(14); - }, - ); - } else { - console.log('Your browser doesn\'t support geolocation'); - map.innerMap.setZoom(14); - } - +function hidePlaceDetailsPopup() { + if (placeDetailsPopup.map) { + placeDetailsPopup.map = null; + placeDetails.style.display = 'none'; + } } -initMap(); +init(); /* [END maps_ui_kit_place_search_nearby] */ diff --git a/samples/ui-kit-place-search-nearby/style.css b/samples/ui-kit-place-search-nearby/style.css index e5a3c5d6f..5cb7e9694 100644 --- a/samples/ui-kit-place-search-nearby/style.css +++ b/samples/ui-kit-place-search-nearby/style.css @@ -5,65 +5,90 @@ */ /* [START maps_ui_kit_place_search_nearby] */ html, - body { - height: 100%; - margin: 0; - } +body { + height: 100%; + margin: 0; +} - body { - display: flex; - flex-direction: column; - font-family: Arial, Helvetica, sans-serif; - } +body { + display: flex; + flex-direction: column; + font-family: Arial, Helvetica, sans-serif; +} - h1 { - font-size: large; - text-align: center; - } +h1 { + font-size: large; + text-align: center; +} - gmp-map { - box-sizing: border-box; - height: 600px; - } +#map-container { + flex-grow: 1; + max-height:600px; + box-sizing: border-box; + width: 100%; + height: 100vh; +} - .overlay { - position: relative; - top: 40px; - margin: 20px; - width: 400px; - } +.controls { + position: absolute; + top: 40px; + right: 40px; +} - .controls { - display: flex; - gap: 10px; - margin-bottom: 10px; - height: 32px; - } +.list-container { + display: flex; + position: absolute; + max-height: 500px; + top: 80px; + right: 40px; + overflow-y: none; +} - .search-button { - background-color: #5491f5; - color: #fff; - border: 1px solid #ccc; - border-radius: 5px; - width: 100px; - cursor: pointer; +.type-select { + width: 400px; + height: 32px; + border: 1px solid #000; + border-radius: 10px; + flex-grow: 1; + padding: 0 10px; } - .type-select { - border: 1px solid #ccc; - border-radius: 5px; - flex-grow: 1; - padding: 0 10px; - } +gmp-place-search { + width: 400px; + margin: 0; + border-radius: 10px; + /* max-height: 10px; */ + display: none; + border: none; +} - .list-container { - height: 400px; - overflow: auto; - border-radius: 10px; - } +gmp-place-details-compact { + width: 350px; + max-height: 300px; + margin-right: 20px; + display: none; + border: none; +} - gmp-place-list { - background-color: #fff; - font-size: large - } -/* [END maps_ui_kit_place_search_nearby] */ \ No newline at end of file +gmp-place-details-compact::after { + content: ''; + position: absolute; + bottom: -18px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 20px; + background-color: white; + box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); + z-index: 1; + clip-path: polygon(0% 0%, 100% 0%, 50% 100%); + transform-origin: center center; +} + +@media (prefers-color-scheme: dark) { + /* Style for Dark mode */ + gmp-place-details-compact::after { + background-color: #131314; + } +} +/* [END maps_ui_kit_place_search_nearby] */ diff --git a/samples/ui-kit-place-search-text/index.html b/samples/ui-kit-place-search-text/index.html index b3e023582..60295788a 100644 --- a/samples/ui-kit-place-search-text/index.html +++ b/samples/ui-kit-place-search-text/index.html @@ -4,34 +4,57 @@ SPDX-License-Identifier: Apache-2.0 --> - + Place List Text Search with Google Maps - - + + + - -
-
- - -
-
- -
-
- +
+
+ + +
+ +
+ + + + + + + + + + + +
+ +
+ - - - + + + + + + + + + +
+ + ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); diff --git a/samples/ui-kit-place-search-text/index.ts b/samples/ui-kit-place-search-text/index.ts index a99274c7f..6e0751b14 100644 --- a/samples/ui-kit-place-search-text/index.ts +++ b/samples/ui-kit-place-search-text/index.ts @@ -5,130 +5,162 @@ */ /* [START maps_ui_kit_place_search_text] */ /* [START maps_ui_kit_place_search_text_query_selectors] */ -const map = document.querySelector("gmp-map") as any; -const placeList = document.querySelector("gmp-place-list") as any; -const placeDetails = document.querySelector("gmp-place-details") as any; -let marker = document.querySelector('gmp-advanced-marker') as any; -const textSearchInput = document.getElementById('textSearchInput') as any; -const textSearchButton = document.getElementById('textSearchButton') as HTMLButtonElement; -const placeDetailsRequest = document.querySelector('gmp-place-details-place-request') as any; - +const mapContainer = document.getElementById('map-container') as any; +const placeSearch = document.querySelector('gmp-place-search') as any; +const placeSearchQuery = + document.querySelector('gmp-place-text-search-request') as any; +const queryInput = document.querySelector('.query-input') as any; +const searchButton = document.querySelector('.search-button') as any; +const detailsContainer = document.getElementById('details-container') as any; +const placeDetails = document.querySelector('gmp-place-details-compact') as any; +const placeRequest = + document.querySelector('gmp-place-details-place-request') as any; /* [END maps_ui_kit_place_search_text_query_selectors] */ -/* [START maps_ui_kit_place_search_text_init_map] */ -let markers = {}; -let infoWindow; -let center = { lat: 37.395641, lng: -122.077627 }; // Mountain View, CA. -let bounds; - -async function initMap(): Promise { - const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; - const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; - - // Set bounds for location restriction. - bounds = new google.maps.LatLngBounds( - { lat: 37.37808200917261, lng: -122.13741583377849 }, - { lat: 37.416676154341324, lng: -122.02261728794109 } - ); - infoWindow = new google.maps.InfoWindow; - - // Center the map - map.innerMap.panTo(center); - map.innerMap.setZoom(14); - - map.innerMap.setOptions({ - mapTypeControl: false, - clickableIcons: false, - }); +let markers = {}; +let previousSearchQuery = ''; +let gMap; +let placeDetailsPopup; - /* [START maps_ui_kit_place_search_tex_event_handlers] */ - // Fire when the Place Details Element is loaded. - placeDetails.addEventListener('gmp-load', (event) => { - // Center the info window on the map. - map.innerMap.fitBounds(placeDetails.place.viewport, { top: 500, left: 400 }); - }); +let AdvancedMarkerElement; +let LatLngBounds; +let LatLng; - // Handle clicks on the search button. - textSearchButton.addEventListener('click', searchByTextRequest); +/* [START maps_ui_kit_place_search_text_init_map] */ +async function initMap() { + //@ts-ignore + const {Map} = await google.maps.importLibrary('maps'); + //@ts-ignore + await google.maps.importLibrary('places'); + //@ts-ignore + ({AdvancedMarkerElement} = await google.maps.importLibrary('marker')); + //@ts-ignore + ({LatLngBounds, LatLng} = await google.maps.importLibrary('core')); + + let mapOptions = { + center: {lat: 37.422, lng: -122.085}, + zoom: 2, + mapTypeControl: false, + clickableIcons: false, + mapId: 'DEMO_MAP_ID' + }; + + gMap = new Map(mapContainer, mapOptions); + + placeDetailsPopup = new AdvancedMarkerElement( + {map: null, content: placeDetails, zIndex: 100}); + + findCurrentLocation(); + + /* [START maps_ui_kit_place_search_text_event_handlers] */ + + gMap.addListener('click', (e) => { + hidePlaceDetailsPopup(); + }); + + searchButton.addEventListener('click', searchPlaces); + queryInput.addEventListener('keydown', (event) => { + if (event.key == 'Enter') { + event.preventDefault(); + searchPlaces(); + } + }); - // Handle enter key on text input. - textSearchInput.addEventListener('keydown', (event) => { - if (event.key === 'Enter') { - searchByTextRequest(); - } - }); - /* [END maps_ui_kit_place_search_tex_event_handlers] */ + placeSearch.addEventListener('gmp-select', ({place}) => { + if (markers[place.id]) { + markers[place.id].click(); + } + }); + /* [END maps_ui_kit_place_search_text_event_handlers] */ } /* [END maps_ui_kit_place_search_text_init_map] */ /* [START maps_ui_kit_place_search_text_query] */ -async function searchByTextRequest() { - if (textSearchInput.value !== "") { - placeList.style.display = "block"; - placeList.configureFromSearchByTextRequest({ - locationRestriction: bounds, - textQuery: textSearchInput.value, - }).then(addMarkers); - // Handle user selection in Place Details. - placeList.addEventListener("gmp-placeselect", ({ place }) => { - markers[place.id].click(); - }); +function searchPlaces() { + if (queryInput.value.trim() === previousSearchQuery) { + return; + } + previousSearchQuery = queryInput.value.trim(); + placeDetailsPopup.map = null; + + for (const markerId in markers) { + if (Object.prototype.hasOwnProperty.call(markers, markerId)) { + markers[markerId].map = null; } + } + markers = {}; + if (queryInput.value) { + // mapContainer.style.height = '75vh'; + placeSearch.style.display = 'block'; + placeSearchQuery.textQuery = queryInput.value; + placeSearchQuery.locationBias = gMap.getBounds(); + placeSearch.addEventListener('gmp-load', addMarkers, {once: true}); + } } /* [END maps_ui_kit_place_search_text_query] */ /* [START maps_ui_kit_place_search_text_add_markers] */ -async function addMarkers(){ - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; - const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary; +async function addMarkers() { + const bounds = new LatLngBounds(); - const bounds = new LatLngBounds(); + if (placeSearch.places.length > 0) { + placeSearch.places.forEach((place) => { + let marker = + new AdvancedMarkerElement({map: gMap, position: place.location}); - // First remove all existing markers. - for(marker in markers){ - markers[marker].map = null; - } - markers = {}; - - if(placeList.places.length > 0){ - placeList.places.forEach((place) => { - let marker = new AdvancedMarkerElement({ - map: map.innerMap, - position: place.location, - }); - - markers[place.id] = marker; - bounds.extend(place.location); - marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; - - /* [START maps_ui_kit_place_search_text_click_event] */ - marker.addListener('gmp-click',(event) => { - if(infoWindow.isOpen){ - infoWindow.close(); - } - // Set the Place Details request to the selected place. - placeDetailsRequest.place = place.id; - placeDetails.style.display = "block"; - placeDetails.style.width = "350px"; - infoWindow.setOptions({ - content: placeDetails - }); - infoWindow.open({ - anchor: marker, - map: map.innerMap - }); - placeDetails.addEventListener('gmp-load',() => { - map.innerMap.fitBounds(place.viewport, { top: 400, left: 400 }); - }); - - }); - /* [END maps_ui_kit_place_search_text_click_event] */ - map.innerMap.setCenter(bounds.getCenter()); - map.innerMap.fitBounds(bounds); - }); - } + marker.metadata = {id: place.id}; + markers[place.id] = marker; + bounds.extend(place.location); + + /* [START maps_ui_kit_place_search_text_click_event] */ + + marker.addListener('click', (event) => { + placeRequest.place = place; + placeDetails.style.display = 'block'; + + + placeDetailsPopup.position = place.location; + placeDetailsPopup.map = gMap; + + gMap.fitBounds(place.viewport, {top: 200, right: 450}); + }); + /* [END maps_ui_kit_place_search_text_click_event] */ + + gMap.setCenter(bounds.getCenter()); + gMap.fitBounds(bounds); + }); + } } /* [END maps_ui_kit_place_search_text_add_markers] */ +async function findCurrentLocation() { + //@ts-ignore + const {LatLng} = await google.maps.importLibrary('core'); + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition( + (position) => { + const pos = + new LatLng(position.coords.latitude, position.coords.longitude); + gMap.panTo(pos); + gMap.setZoom(16); + }, + () => { + console.log('The Geolocation service failed.'); + gMap.setZoom(16); + }, + ); + } else { + console.log('Your browser doesn\'t support geolocation'); + gMap.setZoom(16); + } +} + +function hidePlaceDetailsPopup() { + if (placeDetailsPopup.map) { + placeDetailsPopup.map = null; + placeDetails.style.display = 'none'; + } +} + initMap(); /* [END maps_ui_kit_place_search_text] */ diff --git a/samples/ui-kit-place-search-text/style.css b/samples/ui-kit-place-search-text/style.css index 36aebb77f..79c3b23b1 100644 --- a/samples/ui-kit-place-search-text/style.css +++ b/samples/ui-kit-place-search-text/style.css @@ -5,68 +5,101 @@ */ /* [START maps_ui_kit_place_search_text] */ html, - body { - height: 100%; - margin: 0; - } +body { + height: 100%; + margin: 0; +} - gmp-map { - box-sizing: border-box; - height: 500px; - } +body { + display: flex; + flex-direction: column; + font-family: Arial, Helvetica, sans-serif; +} - gmp-place-list { - background-color: #fff; - font-size: large - } +h1 { + font-size: large; + text-align: center; +} - .overlay { - position: relative; - top: 20px; - margin: 20px; - width: 400px; - } - - .list-container { - height: 400px; - overflow: auto; - border-radius: 10px; - } +#map-container { + flex-grow: 1; + max-height:600px; + box-sizing: border-box; + width: 100%; + height: 100vh; +} - /* Styles for the text search container and its elements */ - .text-search-container { - display: flex; /* Arrange input and button side-by-side */ - gap: 8px; /* Space between input and button */ - padding-bottom: 10px; /* Space below the search bar */ - border-bottom: 1px solid #eee; /* Separator line */ - } - - #textSearchInput { - flex-grow: 1; /* Allow input to take available space */ - padding: 8px 12px; +.controls { + border-radius: 5px; + position: absolute; + top: 40px; + right: 40px; +} + +.list-container { + display: flex; + position: absolute; + /* height: 200px; */ + max-height: 500px; + top: 100px; + right: 40px; + overflow-y: none; +} + +.query-input { border: 1px solid #ccc; - border-radius: 4px; - font-size: 1rem; - } - - #textSearchInput:focus { - outline: none; - border-color: #4a80e8; /* Highlight on focus */ - box-shadow: 0 0 0 2px rgba(74, 128, 232, 0.2); - } - - #textSearchButton { - padding: 8px 15px; - background-color: #4a80e8; /* Example button color */ - color: white; + border-radius: 10px; + width: 315px; + height: 40px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35); +} + +.search-button { + background-color: #4b4b4b; + color: #fff; + border: 1px solid #000; + border-radius: 10px; + width: 80px; + height: 40px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35); +} + +gmp-place-search { + width: 400px; + margin: 0; + border-radius: 10px; + display: none; + border: none; +} + +gmp-place-details-compact { + width: 350px; + max-height: 300px; + display: none; border: none; - border-radius: 4px; - cursor: pointer; - font-size: 1rem; - transition: background-color 0.2s ease-in-out; - } - - #textSearchButton:hover { - background-color: #356ac0; /* Darker shade on hover */ - } + transform: translateY(calc(-40%)); + +} + +gmp-place-details-compact::after { + content: ''; + position: absolute; + bottom: -18px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 20px; + background-color: white; + box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); + z-index: 1; + clip-path: polygon(0% 0%, 100% 0%, 50% 100%); + transform-origin: center center; +} + +@media (prefers-color-scheme: dark) { + /* Style for Dark mode */ + gmp-place-details-compact::after { + background-color: #131314; + } +} /* [END maps_ui_kit_place_search_text] */