Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 10 additions & 11 deletions dist/samples/ui-kit-place-details-compact/app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,16 @@
</head>
<body>
<!--[START maps_ui_kit_place_details_compact_container]-->
<div id = "map-container">
<gmp-place-details-compact orientation="horizontal">
<!--[START maps_ui_kit_place_details_compact_request]-->
<gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
<!--[END maps_ui_kit_place_details_compact_request]-->
<!--[START maps_ui_kit_place_details_compact_config]-->
<gmp-place-all-content></gmp-place-all-content>
<!--[END maps_ui_kit_place_details_compact_config]-->
</gmp-place-details-compact>
</div>
<!--[END maps_ui_kit_place_details_compact_container]-->
<div id = "map-container"></div>
<gmp-place-details-compact orientation="horizontal">
<!--[START maps_ui_kit_place_details_compact_request]-->
<gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
<!--[END maps_ui_kit_place_details_compact_request]-->
<!--[START maps_ui_kit_place_details_compact_config]-->
<gmp-place-all-content></gmp-place-all-content>
<!--[END maps_ui_kit_place_details_compact_config]-->
</gmp-place-details-compact>
<!--[END maps_ui_kit_place_details_compact_container]-->
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
Expand Down
36 changes: 17 additions & 19 deletions dist/samples/ui-kit-place-details-compact/app/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,18 @@
/* [START maps_ui_kit_place_details_compact] */
// Use querySelector to select elements for interaction.
const mapContainer = document.getElementById("map-container") as any;
const detailsContainer = document.getElementById("details-container") as any;
const placeDetails = document.querySelector("gmp-place-details-compact") as any;
const placeDetailsRequest = document.querySelector("gmp-place-details-place-request") as any;
let gMap;
let infowindow;
let marker;

async function initMap(): Promise<void> {
const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places") as any;
const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
marker = new AdvancedMarkerElement({ map: gMap });
infowindow = new InfoWindow({});

// Hide the map type control.
gMap.setOptions({mapTypeControl: false});
Expand All @@ -33,7 +30,6 @@ async function initMap(): Promise<void> {
});
// Add an event listener to handle clicks.
gMap.addListener("click", async (event) => {
marker.position = null;
event.stop();
// Fire when the user clicks on a POI.
if (event.placeId) {
Expand All @@ -51,22 +47,24 @@ async function initMap(): Promise<void> {
const updateMapAndMarker = () => {
console.log("function called");
if (placeDetails.place && placeDetails.place.location) {
gMap.panTo(placeDetails.place.location);
marker.gMap = null;
let adjustedCenter = offsetLatLngRight(placeDetails.place.location, 0.002);
gMap.panTo(adjustedCenter);
gMap.setZoom(16); // Set zoom after panning if needed
marker.position = placeDetails.place.location;
marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
marker.style.display = 'block';
//@ts-ignore
infowindow.setOptions({
content: placeDetails
});
//@ts-ignore
infowindow.open({
anchor: marker,
map: gMap,
});
marker.content = placeDetails;
marker.position = placeDetails.place.location
}
else {
console.log("else");
}
};
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, latitudeOffset) {
const newLat = latLng.lat() + latitudeOffset;
return new google.maps.LatLng(newLat, latLng.lng());
}

initMap();

/* [END maps_ui_kit_place_details_compact] */
54 changes: 18 additions & 36 deletions dist/samples/ui-kit-place-details-compact/app/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ html,
body {
display: flex;
width: 100%;
height: 100%;
height: 400px;
margin: 0;
}

Expand All @@ -33,46 +33,28 @@ gmp-place-details-compact {
--gmp-mat-font-family: Google Sans Text, sans-serif;
/* Defines the style for medium body text (e.g., address, descriptions) */
--gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');

width: 360px;
border: none;
overflow-y: hidden;
}

.gm-style-iw button {
display: none !important;
}

.gm-style-iw-c {
padding: 0 !important;
margin: 0 !important;
}

.gm-style-iw-d {
padding: 0 !important;
margin: 0 !important; /* Sometimes margin can also contribute to unwanted space */
overflow: visible !important; /* If you don't want scrollbars, but be careful with content overflow */
padding: 0;
margin: 0;
position: relative;
transform: translate(0, calc(-20px));
}

.gm-style-iw-c * { /* Target all elements inside the infowindow content container */
padding: 0 !important;
margin: 0 !important;
/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}

@media (prefers-color-scheme: dark) {

.gm-style-iw.gm-style-iw-c,
.gm-style .gm-style-iw-d,
.gm-style .gm-style-iw-d::-webkit-scrollbar-track,
.gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-t::after,
.gm-style .gm-style-iw-tc::after {
background-color: #000 !important;
}
.gm-ui-hover-effect>span {
background-color: #fff !important;
}
}
/* [END maps_ui_kit_place_details_compact_style] */
/* [END maps_ui_kit_place_details_compact] */

This file was deleted.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

This file was deleted.

25 changes: 12 additions & 13 deletions dist/samples/ui-kit-place-details-compact/dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,21 @@
<head>
<title>Click on the map to view place details</title>
<meta charset="utf-8">
<script type="module" crossorigin src="./assets/index-PpKQ7CME.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index--nVeueu1.css">
<script type="module" crossorigin src="./assets/index-BVUG69Zj.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-7U6Bjnjc.css">
</head>
<body>
<!--[START maps_ui_kit_place_details_compact_container]-->
<div id = "map-container">
<gmp-place-details-compact orientation="horizontal">
<!--[START maps_ui_kit_place_details_compact_request]-->
<gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
<!--[END maps_ui_kit_place_details_compact_request]-->
<!--[START maps_ui_kit_place_details_compact_config]-->
<gmp-place-all-content></gmp-place-all-content>
<!--[END maps_ui_kit_place_details_compact_config]-->
</gmp-place-details-compact>
</div>
<!--[END maps_ui_kit_place_details_compact_container]-->
<div id = "map-container"></div>
<gmp-place-details-compact orientation="horizontal">
<!--[START maps_ui_kit_place_details_compact_request]-->
<gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
<!--[END maps_ui_kit_place_details_compact_request]-->
<!--[START maps_ui_kit_place_details_compact_config]-->
<gmp-place-all-content></gmp-place-all-content>
<!--[END maps_ui_kit_place_details_compact_config]-->
</gmp-place-details-compact>
<!--[END maps_ui_kit_place_details_compact_container]-->
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
Expand Down
21 changes: 10 additions & 11 deletions dist/samples/ui-kit-place-details-compact/docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,16 @@
</head>
<body>
<!--[START maps_ui_kit_place_details_compact_container]-->
<div id = "map-container">
<gmp-place-details-compact orientation="horizontal">
<!--[START maps_ui_kit_place_details_compact_request]-->
<gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
<!--[END maps_ui_kit_place_details_compact_request]-->
<!--[START maps_ui_kit_place_details_compact_config]-->
<gmp-place-all-content></gmp-place-all-content>
<!--[END maps_ui_kit_place_details_compact_config]-->
</gmp-place-details-compact>
</div>
<!--[END maps_ui_kit_place_details_compact_container]-->
<div id = "map-container"></div>
<gmp-place-details-compact orientation="horizontal">
<!--[START maps_ui_kit_place_details_compact_request]-->
<gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
<!--[END maps_ui_kit_place_details_compact_request]-->
<!--[START maps_ui_kit_place_details_compact_config]-->
<gmp-place-all-content></gmp-place-all-content>
<!--[END maps_ui_kit_place_details_compact_config]-->
</gmp-place-details-compact>
<!--[END maps_ui_kit_place_details_compact_container]-->
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
Expand Down
Loading