Skip to content

Commit 2680d19

Browse files
ejhaseldenwillum070
ejhaselden
and
willum070
authored
Fix intermittent loading failure and remove style overrides (#591)
* Fix intermittent loading failure and remove style overrides * Update style.css Edit to remove typo in transform style. --------- Co-authored-by: William French <[email protected]>
1 parent f177411 commit 2680d19

File tree

3 files changed

+45
-66
lines changed

3 files changed

+45
-66
lines changed

‎samples/ui-kit-place-details-compact/index.html‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,16 @@
1414
</head>
1515
<body>
1616
<!--[START maps_ui_kit_place_details_compact_container]-->
17-
<div id = "map-container">
18-
<gmp-place-details-compact orientation="horizontal">
19-
<!--[START maps_ui_kit_place_details_compact_request]-->
20-
<gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
21-
<!--[END maps_ui_kit_place_details_compact_request]-->
22-
<!--[START maps_ui_kit_place_details_compact_config]-->
23-
<gmp-place-all-content></gmp-place-all-content>
24-
<!--[END maps_ui_kit_place_details_compact_config]-->
25-
</gmp-place-details-compact>
26-
</div>
27-
<!--[END maps_ui_kit_place_details_compact_container]-->
17+
<div id = "map-container"></div>
18+
<gmp-place-details-compact orientation="horizontal">
19+
<!--[START maps_ui_kit_place_details_compact_request]-->
20+
<gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
21+
<!--[END maps_ui_kit_place_details_compact_request]-->
22+
<!--[START maps_ui_kit_place_details_compact_config]-->
23+
<gmp-place-all-content></gmp-place-all-content>
24+
<!--[END maps_ui_kit_place_details_compact_config]-->
25+
</gmp-place-details-compact>
26+
<!--[END maps_ui_kit_place_details_compact_container]-->
2827
<script>
2928
(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))})({
3029
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",

‎samples/ui-kit-place-details-compact/index.ts‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,18 @@
66
/* [START maps_ui_kit_place_details_compact] */
77
// Use querySelector to select elements for interaction.
88
const mapContainer = document.getElementById("map-container") as any;
9-
const detailsContainer = document.getElementById("details-container") as any;
109
const placeDetails = document.querySelector("gmp-place-details-compact") as any;
1110
const placeDetailsRequest = document.querySelector("gmp-place-details-place-request") as any;
1211
let gMap;
13-
let infowindow;
1412
let marker;
1513

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

20-
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
18+
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
2119
gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
2220
marker = new AdvancedMarkerElement({ map: gMap });
23-
infowindow = new InfoWindow({});
2421

2522
// Hide the map type control.
2623
gMap.setOptions({mapTypeControl: false});
@@ -33,7 +30,6 @@ async function initMap(): Promise<void> {
3330
});
3431
// Add an event listener to handle clicks.
3532
gMap.addListener("click", async (event) => {
36-
marker.position = null;
3733
event.stop();
3834
// Fire when the user clicks on a POI.
3935
if (event.placeId) {
@@ -51,22 +47,24 @@ async function initMap(): Promise<void> {
5147
const updateMapAndMarker = () => {
5248
console.log("function called");
5349
if (placeDetails.place && placeDetails.place.location) {
54-
gMap.panTo(placeDetails.place.location);
50+
marker.gMap = null;
51+
let adjustedCenter = offsetLatLngRight(placeDetails.place.location, 0.002);
52+
gMap.panTo(adjustedCenter);
5553
gMap.setZoom(16); // Set zoom after panning if needed
56-
marker.position = placeDetails.place.location;
57-
marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
58-
marker.style.display = 'block';
59-
//@ts-ignore
60-
infowindow.setOptions({
61-
content: placeDetails
62-
});
63-
//@ts-ignore
64-
infowindow.open({
65-
anchor: marker,
66-
map: gMap,
67-
});
54+
marker.content = placeDetails;
55+
marker.position = placeDetails.place.location
56+
}
57+
else {
58+
console.log("else");
6859
}
6960
};
7061
}
62+
// Helper function to offset marker placement for better visual appearance.
63+
function offsetLatLngRight(latLng, latitudeOffset) {
64+
const newLat = latLng.lat() + latitudeOffset;
65+
return new google.maps.LatLng(newLat, latLng.lng());
66+
}
67+
7168
initMap();
69+
7270
/* [END maps_ui_kit_place_details_compact] */

‎samples/ui-kit-place-details-compact/style.css‎

Lines changed: 18 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ html,
88
body {
99
display: flex;
1010
width: 100%;
11-
height: 100%;
11+
height: 400px;
1212
margin: 0;
1313
}
1414

@@ -33,46 +33,28 @@ gmp-place-details-compact {
3333
--gmp-mat-font-family: Google Sans Text, sans-serif;
3434
/* Defines the style for medium body text (e.g., address, descriptions) */
3535
--gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');
36-
36+
3737
width: 360px;
3838
border: none;
39-
overflow-y: hidden;
40-
}
41-
42-
.gm-style-iw button {
43-
display: none !important;
44-
}
45-
46-
.gm-style-iw-c {
47-
padding: 0 !important;
48-
margin: 0 !important;
49-
}
50-
51-
.gm-style-iw-d {
52-
padding: 0 !important;
53-
margin: 0 !important; /* Sometimes margin can also contribute to unwanted space */
54-
overflow: visible !important; /* If you don't want scrollbars, but be careful with content overflow */
39+
padding: 0;
40+
margin: 0;
41+
position: relative;
42+
transform: translate(0, calc(-20px));
5543
}
5644

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

62-
@media (prefers-color-scheme: dark) {
63-
64-
.gm-style-iw.gm-style-iw-c,
65-
.gm-style .gm-style-iw-d,
66-
.gm-style .gm-style-iw-d::-webkit-scrollbar-track,
67-
.gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
68-
.gm-style .gm-style-iw-c,
69-
.gm-style .gm-style-iw-t::after,
70-
.gm-style .gm-style-iw-tc::after {
71-
background-color: #000 !important;
72-
}
73-
.gm-ui-hover-effect>span {
74-
background-color: #fff !important;
75-
}
76-
}
7759
/* [END maps_ui_kit_place_details_compact_style] */
7860
/* [END maps_ui_kit_place_details_compact] */

0 commit comments

Comments
 (0)