Make stop popup show on Google Maps

Author: bencodeorg

src/components/MapContainer.svelte

@@ -9,12 +9,12 @@
 	import { onMount } from 'svelte';
 	import { MapSource } from './../config/mapSource.js';
 
-	let apiKey = env.GOOGLE_MAPS_API_KEY;
+	let apiKey = env.PUBLIC_OBA_GOOGLE_MAPS_API_KEY;
 	let { handleStopMarkerSelect, mapProvider = $bindable(), ...restProps } = $props();
 
 	onMount(() => {
 		if (PUBLIC_OBA_MAP_PROVIDER === MapSource.Google) {
-			mapProvider = new GoogleMapProvider(apiKey);
+			mapProvider = new GoogleMapProvider(apiKey, handleStopMarkerSelect);
 		} else if (PUBLIC_OBA_MAP_PROVIDER === MapSource.OpenStreetMap) {
 			mapProvider = new OpenStreetMapProvider(handleStopMarkerSelect);
 		} else {

src/components/map/PopupContent.svelte

@@ -5,7 +5,7 @@
 
 <div class="transform rounded-lg bg-white p-4 shadow-lg">
 	<h3 class="text-xl font-bold text-gray-900">{stopName}</h3>
-	<p class="mt-2 flex items-center text-gray-700">
+	<p class="my-4 flex items-center text-gray-700">
 		<span class="mr-2 rounded-md bg-purple-600 px-2 py-1 text-white">Arrival time:</span>
 		<span
 			>{new Date(arrivalTime * 1000).toLocaleTimeString([], {

src/lib/Provider/GoogleMapProvider.svelte.js

@@ -9,7 +9,7 @@ import TripPlanPinMarker from '$components/trip-planner/tripPlanPinMarker.svelte
 import { mount, unmount } from 'svelte';
 
 export default class GoogleMapProvider {
-	constructor(apiKey) {
+	constructor(apiKey, handleStopMarkerSelect) {
 		this.apiKey = apiKey;
 		this.map = null;
 		this.globalInfoWindow = null;
@@ -18,6 +18,7 @@ export default class GoogleMapProvider {
 		this.stopMarkers = [];
 		this.vehicleMarkers = [];
 		this.markersMap = new Map();
+		this.handleStopMarkerSelect = handleStopMarkerSelect;
 	}
 
 	async initMap(element, options) {
@@ -122,33 +123,37 @@ export default class GoogleMapProvider {
 
 		this.stopsMap.set(stop.id, stop);
 
-		marker.addListener('click', () => {
-			if (this.globalInfoWindow) {
-				this.globalInfoWindow.close();
-			}
+		marker.addListener('click', () => this.openStopMarker(stop));
 
-			if (this.popupContentComponent) {
-				unmount(this.popupContentComponent);
-			}
+		this.markersMap.set(stop.id, marker);
+		this.stopMarkers.push(marker);
+	}
 
-			const popupContainer = document.createElement('div');
+	openStopMarker(stop, stopTime = null) {
+		if (this.globalInfoWindow) {
+			this.globalInfoWindow.close();
+		}
 
-			this.popupContentComponent = mount(PopupContent, {
-				target: popupContainer,
-				props: {
-					stopName: stop.name,
-					arrivalTime: stopTime ? stopTime.arrivalTime : null
-				}
-			});
+		if (this.popupContentComponent) {
+			unmount(this.popupContentComponent);
+		}
 
-			this.globalInfoWindow = new google.maps.InfoWindow({
-				content: popupContainer
-			});
+		const popupContainer = document.createElement('div');
+
+		this.popupContentComponent = mount(PopupContent, {
+			target: popupContainer,
+			props: {
+				stopName: stop.name,
+				arrivalTime: stopTime ? stopTime.arrivalTime : null,
+				handleStopMarkerSelect: () => this.handleStopMarkerSelect(stop)
+			}
+		});
 
-			this.globalInfoWindow.open(this.map, marker);
+		this.globalInfoWindow = new google.maps.InfoWindow({
+			content: popupContainer
 		});
 
-		this.stopMarkers.push(marker);
+		this.globalInfoWindow.open(this.map, this.markersMap.get(stop.id));
 	}
 
 	highlightMarker(stopId) {