diff --git a/src/iss-components/google-map/google-map.spec.js b/src/iss-components/google-map/google-map.spec.js
index 631cfe71..331c78e1 100644
--- a/src/iss-components/google-map/google-map.spec.js
+++ b/src/iss-components/google-map/google-map.spec.js
@@ -159,7 +159,7 @@ describe('Google Map', () => {
const zipCode = '00882';
const [address1, address2, position1, position2] = ['a1', 'a2', 'p1', 'p2'];
- const providers = [
+ const markers = [
{
fullAddress: address1
},
@@ -186,7 +186,7 @@ describe('Google Map', () => {
return Promise.resolve(result);
});
- const propsData = { providers, zipCode };
+ const propsData = { markers, zipCode };
const { wrapper } = getMountedComponent({}, {}, propsData);
await awaitingSetupTicks(wrapper);
@@ -251,7 +251,7 @@ describe('Google Map', () => {
}
return Promise.resolve(result);
});
- const providers = [
+ const markers = [
{
fullAddress: address1
},
@@ -262,7 +262,7 @@ describe('Google Map', () => {
// Act
const { wrapper } = getMountedComponent({}, { zipCode });
await awaitingSetupTicks(wrapper);
- await wrapper.vm.$options.watch.providers.call(wrapper.vm, providers);
+ await wrapper.vm.$options.watch.markers.call(wrapper.vm, markers);
await awaitingSetupTicks(wrapper);
// Assert
diff --git a/src/iss-components/google-map/google-map.vue b/src/iss-components/google-map/google-map.vue
index b3f1a7f5..b3de8c7d 100644
--- a/src/iss-components/google-map/google-map.vue
+++ b/src/iss-components/google-map/google-map.vue
@@ -8,7 +8,7 @@
export default {
name: 'google-map',
props: {
- providers: Array,
+ markers: Array,
zipCode: String
},
data() {
@@ -24,12 +24,12 @@ export default {
}
},
watch: {
- async providers(newProviders) {
- await this.createMapWithMarkersForAddresses(newProviders);
+ async markers(newMarkers) {
+ await this.createMapWithMarkersForAddresses(newMarkers);
}
},
async beforeMount() {
- await this.createMapWithMarkersForAddresses(this.providers);
+ await this.createMapWithMarkersForAddresses(this.markers);
},
methods: {
async getMap(center) {
@@ -51,59 +51,58 @@ export default {
this.geocoder = new Geocoder();
}
},
- async addMarkersToMap(map, providers) {
+ async addMarkersToMap(map, markers) {
const { AdvancedMarkerElement, PinElement } = await window.google.maps.importLibrary('marker');
- providers?.forEach((provider, index) => {
- const pin = new PinElement({
+ markers?.forEach((marker, index) => {
+ const pinElement = new PinElement({
glyph: String.fromCharCode('A'.charCodeAt(0) + index),
glyphColor: '#000000',
borderColor: '#000000'
});
- const marker = new AdvancedMarkerElement({
+ const markerElement = new AdvancedMarkerElement({
map,
- position: provider.position,
- title: provider.companyName,
- content: pin.element,
+ position: marker.position,
+ title: marker.title,
+ content: pinElement.element,
zIndex: 1000 - index
});
- this.createMarkerInfoWindows(marker, provider);
+ this.createMarkerInfoWindows(markerElement, marker);
});
},
- createMarkerInfoWindows(marker, provider) {
- const directionsUrl = this.createGetDirectionsUrl(provider);
+ createMarkerInfoWindows(markerElement, marker) {
+ const directionsUrl = this.createGetDirectionsUrl(marker);
const content = `
-
${provider.companyName}
-
${provider.addressLine1}
-
${provider.addressLine2}
+
${marker.title}
+ ${marker.addressLines?.map((address) => `
${address} `).join()}
Get directions
`;
const infoWindow = new window.google.maps.InfoWindow({ content });
- marker.addListener('click', () => {
+ markerElement.addListener('click', () => {
this.infoWindow?.close();
this.infoWindow = infoWindow;
- infoWindow.open(marker.map, marker);
+ infoWindow.open(markerElement.map, markerElement);
});
},
- createGetDirectionsUrl(provider) {
- return `https://maps.google.com/maps?saddr=&daddr=${encodeURIComponent(provider.fullAddress)}`;
+ createGetDirectionsUrl(marker) {
+ return `https://maps.google.com/maps?saddr=&daddr=${encodeURIComponent(marker.fullAddress)}`;
},
- async getLocationsFromAddresses(providers) {
+ async getLocationsFromAddresses(markers) {
await this.setGeocoder();
- const geocodeShopAddressPromises = providers?.map((provider) => this.geocoder.geocode({ address: provider.fullAddress })) ?? [];
+ const geocodeShopAddressPromises = markers?.map((marker) => this.geocoder.geocode({ address: marker.fullAddress })) ?? [];
const geocodeShopAddressResults = await Promise.all(geocodeShopAddressPromises);
- return providers?.map((provider, index) => {
+ return markers?.map((marker, index) => {
const results = geocodeShopAddressResults[index]?.results;
let position = null;
if (results && results.length > 0) {
position = results[0].geometry?.location;
}
- return { ...provider, position };
- }).filter((provider) => provider.position != null) ?? [];
+ return { ...marker, position };
+ }).filter((marker) => marker.position != null) ?? [];
},
async getBoundsFromAddress(address) {
await this.setGeocoder();
@@ -112,14 +111,14 @@ export default {
? result.results[0].geometry?.bounds
: null;
},
- async createMapWithMarkersForAddresses(providers) {
- const providerPositions = await this.getLocationsFromAddresses(providers);
+ async createMapWithMarkersForAddresses(markers) {
+ const markerPositions = await this.getLocationsFromAddresses(markers);
const zipBounds = await this.getBoundsFromAddress(this.zipCodeAddress);
const map = await this.getMap(zipBounds?.getCenter());
- await this.addMarkersToMap(map, providerPositions);
+ await this.addMarkersToMap(map, markerPositions);
- const positionsToDisplay = providerPositions.map((provider) => provider.position)
+ const positionsToDisplay = markerPositions.map((marker) => marker.position)
.concat(zipBounds?.getNorthEast(), zipBounds?.getSouthWest());
const bounds = this.getBounds(positionsToDisplay);
map.fitBounds(bounds);
diff --git a/src/layouts/tpa-search/tpa-search.spec.js b/src/layouts/tpa-search/tpa-search.spec.js
index e74394cf..393938b8 100644
--- a/src/layouts/tpa-search/tpa-search.spec.js
+++ b/src/layouts/tpa-search/tpa-search.spec.js
@@ -177,7 +177,7 @@ describe('TPA search page', () => {
// Assert
expect(map.exists()).toBeTruthy();
expect(map.classes()).toContain('mb-4');
- expect(map.props().providers.map((p) => p.fullAddress)).toEqual(expectedAddresses);
+ expect(map.props().markers.map((p) => p.fullAddress)).toEqual(expectedAddresses);
expect(map.props().zipCode).toBe(zipCode);
});
test('search radius filter', async () => {
diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index c5b9e22c..de33f4bb 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -46,7 +46,7 @@