Skip to content

Commit

Permalink
VACMS-20080 Google Maps and addresses research for Facility Locator
Browse files Browse the repository at this point in the history
  • Loading branch information
@randimays
randimays committed Mar 7, 2025
1 parent b70b9a5 commit bf50c63
Showing 1 changed file with 147 additions and 0 deletions.
147 changes: 147 additions & 0 deletions products/facilities/addresses/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
# Facilities Addresses: Data Sources and Google Maps

We receive addresses for VA facilities and community providers from several data sources. The format of those data when retrieved from the data sources can vary, and we also have variations in the way we format the data on the front end. This ultimately can affect the utility of the "Get directions on Google Maps" links that we use in the context of a facility address.

This document describes the current state of the code and Google Maps directions link construction to build a foundation for improving the code and making consistent URLs for Google Maps that work.

## "Get directions on Google Maps" links from content-build or next-build

### content-build

Directions links on all Drupal pages except for Events are built using this **content-build** template: [directions-google-maps.liquid](https://github.com/department-of-veterans-affairs/content-build/blob/main/src/site/includes/directions-google-maps.liquid).

The page's main template (which may not necessarily reference `directions-google-maps.liquid` directly) and an example page are also here for reference.

| Page type | Example URL | content-build template |
| --- | --- | --- |
| VA Health System | https://www.va.gov/new-york-harbor-health-care/ | [health_care_region_page.drupal.liquid](https://github.com/department-of-veterans-affairs/content-build/blob/main/src/site/layouts/health_care_region_page.drupal.liquid) |
| VA Health System Locations | https://www.va.gov/boston-health-care/locations/ | [locations_listing.drupal.liquid](https://github.com/department-of-veterans-affairs/content-build/blob/main/src/site/layouts/locations_listing.drupal.liquid) |
| VA Health Local Facility | https://www.va.gov/new-york-harbor-health-care/locations/harlem-va-clinic/ | [health_care_local_facility.drupal.liquid](https://github.com/department-of-veterans-affairs/content-build/blob/main/src/site/layouts/health_care_local_facility.drupal.liquid) |
| Vet Center | https://www.va.gov/boston-vet-center/ | [vet_center.drupal.liquid](https://github.com/department-of-veterans-affairs/content-build/blob/main/src/site/layouts/vet_center.drupal.liquid) |
| Vet Center Locations | https://www.va.gov/boston-vet-center/locations/ | [vet_center_locations_list.drupal.liquid](https://github.com/department-of-veterans-affairs/content-build/blob/main/src/site/layouts/vet_center_locations_list.drupal.liquid) |
| VBA Facility | https://www.va.gov/portland-va-regional-benefit-office/ | [vba_facility.drupal.liquid](https://github.com/department-of-veterans-affairs/content-build/blob/main/src/site/layouts/vba_facility.drupal.liquid) |

<br />

Directions links' `href` attributes are created from the below code:

```js
https://maps.google.com?saddr=Current+Location&amp;daddr={{ directionsLinkAddress | strip }}
```

The first part of the URL leading up to the curly braces is hardcoded. Within the curly braces (`{{ }}`), the `directionsLinkAddress` is a variable defined from the below attributes. The `| strip` removes any whitespace from the beginning or end of the result below. Every page type in the above table uses this exact structure (though the code may differ slightly based on how the GraphQL queries define the address information).

```js
{{ entity.fieldAddress.addressLine1 }}, {{ entity.fieldAddress.locality }}, {{ entity.fieldAddress.administrativeArea }} {{ entity.fieldAddress.postalCode }}
```

For most of the above pages, the parts of `entity.fieldAddress` are straightforward and construct clean URLs. For instance, at https://www.va.gov/new-york-harbor-health-care/, under **Locations** / Margaret Cochran Corbin VA Campus, the address deconstructs into the following parts:

| GraphQL data | Value |
| --- | --- |
| `entity.fieldAddress.addressLine1` | 423 East 23rd Street |
| `entity.fieldAddress.locality` | New York |
| `entity.fieldAddress.administrativeArea` | NY |
| `entity.fieldAddress.postalCode` | 10010-5011 |

Those data create a URL like this: https://www.google.com/maps/dir/San+Antonio,+TX+78258/423+E+23rd+St,+New+York,+NY+10010/@34.6755261,-96.8542942,5z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x865c60493bc0a313:0x34d20f276cf23882!2m2!1d-98.4732718!2d29.6451457!1m5!1m1!1s0x89c2590c7f960175:0x7fd1b278c116d39b!2m2!1d-73.9768461!2d40.7370457!5m1!1e1?entry=ttu&g_ep=EgoyMDI1MDMwMi4wIKXMDSoASAFQAw%3D%3D.

That link successfully navigates to Google Maps for "423 E 23rd St, New York, NY 10010".

Things get a bit muddy when the `addressLine1` contains details that are not useful for driving directions, such as floor, room, suite or building title information. For example, at https://www.va.gov/new-york-harbor-health-care/locations/harlem-va-clinic/, under **Location and contact information**, the address deconstructs into the following parts:

| GraphQL data | Value |
| --- | --- |
| `entity.fieldAddress.addressLine1` | 55 West 125th Street, Community Resource & Referral Center (CRRC), 11th Floor, Room 1101 |
| `entity.fieldAddress.locality` | New York |
| `entity.fieldAddress.administrativeArea` | NY |
| `entity.fieldAddress.postalCode` | 10027-4544 |

Those data create a URL like this: https://www.google.com/maps?saddr=Current+Location&daddr=55+West+125th+Street,+Community+Resource+&+Referral+Center+(CRRC),+11th+Floor,+Room+1101,+New+York,+NY+10027-4544, which does not completely load in Google Maps due to the floor and room numbers included.

In some cases, the floor, room, suite or building title information is properly included in the `addressLine2` part of the data, so it is not used to construct the directions URL. For example, at https://www.va.gov/pontiac-vet-center/, under **Location and contact information**, the address deconstructs into the following parts:

| GraphQL data | Value |
| --- | --- |
| `entity.fieldAddress.addressLine1` | 44200 Woodward Avenue |
| `entity.fieldAddress.locality` | Pontiac |
| `entity.fieldAddress.administrativeArea` | MI |
| `entity.fieldAddress.postalCode` | 48341 |

Those data create a URL like this: https://www.google.com/maps/dir/San+Antonio,+TX+78258/44200+Woodward+Ave,+Pontiac,+MI+48341/@35.62183,-101.3635351,5z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x865c60493bc0a313:0x34d20f276cf23882!2m2!1d-98.4732718!2d29.6451457!1m5!1m1!1s0x8824bf133733568d:0x5e96babafbe1d27d!2m2!1d-83.2725494!2d42.6144592!5m1!1e1?entry=ttu&g_ep=EgoyMDI1MDMwMy4wIKXMDSoASAFQAw%3D%3D that does work properly.

### next-build

Event detail pages' directions links are built using this next-build template: [googleMapsDirections/index.tsx](https://github.com/department-of-veterans-affairs/next-build/blob/main/src/templates/common/googleMapsDirections/index.tsx).


| Page type | Example URL | next-build template (if in prod) |
| --- | --- | --- |
| Event Detail (Facilities) | https://www.va.gov/hampton-health-care/events/77055/ | [event/index.tsx](https://github.com/department-of-veterans-affairs/next-build/blob/main/src/templates/layouts/event/index.tsx) |
| Event Detail (Outreach) | https://www.va.gov/outreach-and-events/events/76376/ | [event/index.tsx](https://github.com/department-of-veterans-affairs/next-build/blob/main/src/templates/layouts/event/index.tsx) |

In next-build, directions links href attributes are created from the below code:

```js

const directionsString = [
addressObj?.address_line1,
addressObj?.locality,
addressObj?.administrative_area,
]
.filter(Boolean)
.join(', ')
```
In an ideal case, the addresses are constructed simply from their parts on pages such as https://www.va.gov/hampton-health-care/events/77055/. Under the **Where** section, the address is formed as a single string:
```
70 Knells Ridge Road, Chesapeake, VA
```
The address deconstructs into the following parts:
| GraphQL data | Value |
| --- | --- |
| `addressObj.address_line1` | 70 Knells Ridge Road |
| `addressObj.locality` | Chesapeake |
| `addressObj.administrative_area` | VA |
Those data create a URL like this: https://www.google.com/maps/dir/San+Antonio,+TX+78258/Knell's+Ridge+Dr,+Chesapeake,+VA+23320/@31.2772056,-108.7761351,4z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x865c60493bc0a313:0x34d20f276cf23882!2m2!1d-98.4732718!2d29.6451457!1m5!1m1!1s0x89babc9c141c200f:0x9f861c252e9604ee!2m2!1d-76.2422479!2d36.7549009!5m1!1e1?entry=ttu&g_ep=EgoyMDI1MDMwMy4wIKXMDSoASAFQAw%3D%3D that does work properly.
next-build gets all events data from Drupal, which has a few different ways of entering location information.
## "Get directions on Google Maps" links from vets-website
### Facility Locator
There are also Google Maps links in Facility Locator pages. They use this component for construction: [LocationDirectionsLink.jsx](https://github.com/department-of-veterans-affairs/vets-website/blob/main/src/applications/facility-locator/components/search-results-items/common/LocationDirectionsLink.jsx) (for Facility Locator links). Below are some example pages where the URLs can be found.
The directions links on these pages use the following code for their `href` attributes:
```js

https://maps.google.com?saddr=${searchString}&daddr=${address}

```
The `searchString` represents whatever value was entered into the location input in the Facility Locator form (zip code or city, state). The `address` is formulated by a utility function called [buildAddressArray](https://github.com/department-of-veterans-affairs/vets-website/blob/dcbe7cf30e7aaae875b2292c6d61c182b7eced8d/src/platform/utilities/facilities-and-mapbox/index.js#L85). The different types of facilities can have different address formats from the API. The table below demonstrates how the information differs across facility types.
| Facility type | Address from API |
| --- | --- |
|[VA health](https://www.va.gov/find-locations/?address=Harlem%2C%20New%20York%2C%20New%20York%2C%20United%20States&bounds%5B%5D%5B%5D=-98.875114&bounds%5B%5D%5B%5D=29.2467&bounds%5B%5D%5B%5D=-98.115114&bounds%5B%5D%5B%5D=30.0067&bounds%5B%5D%5B%5D%5B%5D=-99.245114&bounds%5B%5D%5B%5D%5B%5D=28.8767&bounds%5B%5D%5B%5D%5B%5D=-97.745114&bounds%5B%5D%5B%5D%5B%5D=30.3767&context=10027&facilityType=health&latitude=40.810925&longitude=-73.94701&page=1&radius=66&serviceType&bounds%5B%5D=-74.32701&bounds%5B%5D=40.430924999999995&bounds%5B%5D=-73.56701000000001&bounds%5B%5D=41.190925) | <img width="400" alt="Screenshot 2025-03-07 at 11 36 01 AM" src="https://github.com/user-attachments/assets/5554717e-8795-440d-aa28-8a295c19550c" /> |
| [Urgent care](https://www.va.gov/find-locations/?address=Albany%2C%20New%20York%2C%20United%20States&bounds%5B%5D%5B%5D=-98.875114&bounds%5B%5D%5B%5D=29.2467&bounds%5B%5D%5B%5D=-98.115114&bounds%5B%5D%5B%5D=30.0067&bounds%5B%5D%5B%5D%5B%5D=-99.245114&bounds%5B%5D%5B%5D%5B%5D=28.8767&bounds%5B%5D%5B%5D%5B%5D=-97.745114&bounds%5B%5D%5B%5D%5B%5D=30.3767&context=Albany%2C%20New%20York%2C%20United%20States&facilityType=urgent_care&latitude=42.649864&longitude=-73.75274&page=1&radius=65&serviceType&bounds%5B%5D=-74.13274&bounds%5B%5D=42.269864&bounds%5B%5D=-73.37274000000001&bounds%5B%5D=43.029864) | <img width="400" alt="Screenshot 2025-03-07 at 11 39 21 AM" src="https://github.com/user-attachments/assets/2cf38231-d7dc-4c77-b519-64cad3f2c4a3" /> |
- [Emergency care](https://www.va.gov/find-locations/?page=1&address=San%20Antonio%2C%20Texas%2078258%2C%20United%20States&facilityType=emergency_care&serviceType&latitude=29.6267&longitude=-98.495114&radius=10&bounds%5B%5D=-99.245114&bounds%5B%5D=28.8767&bounds%5B%5D=-97.745114&bounds%5B%5D=30.3767&context=San%20Antonio%2C%20Texas%2078258%2C%20United%20States)
- [Community provider](https://www.va.gov/find-locations/?page=1&address=San%20Antonio%2C%20Texas%2078258%2C%20United%20States&facilityType=provider&serviceType=152W00000X&latitude=29.6267&longitude=-98.495114&radius=20&bounds%5B%5D=-99.245114&bounds%5B%5D=28.8767&bounds%5B%5D=-97.745114&bounds%5B%5D=30.3767&context=San%20Antonio%2C%20Texas%2078258%2C%20United%20States)
- [Community pharmacy](https://www.va.gov/find-locations/?page=1&address=San%20Antonio%2C%20Texas%2078258%2C%20United%20States&facilityType=pharmacy&serviceType&latitude=29.6267&longitude=-98.495114&radius=10&bounds%5B%5D=-99.245114&bounds%5B%5D=28.8767&bounds%5B%5D=-97.745114&bounds%5B%5D=30.3767&context=San%20Antonio%2C%20Texas%2078258%2C%20United%20States)
- [VA benefits](https://www.va.gov/find-locations/?page=1&address=San%20Antonio%2C%20Texas%2078258%2C%20United%20States&facilityType=benefits&serviceType&latitude=29.6267&longitude=-98.495114&radius=10&bounds%5B%5D=-99.895114&bounds%5B%5D=28.2267&bounds%5B%5D=-97.095114&bounds%5B%5D=31.026699999999998&context=San%20Antonio%2C%20Texas%2078258%2C%20United%20States)
- [VA cemeteries](https://www.va.gov/find-locations/?page=1&address=San%20Antonio%2C%20Texas%2078258%2C%20United%20States&facilityType=cemetery&serviceType&latitude=29.6267&longitude=-98.495114&radius=10&bounds%5B%5D=-99.245114&bounds%5B%5D=28.8767&bounds%5B%5D=-97.745114&bounds%5B%5D=30.3767&context=San%20Antonio%2C%20Texas%2078258%2C%20United%20States)
- [Vet Centers](http://va.gov/find-locations/?page=1&address=San%20Antonio%2C%20Texas%2078258%2C%20United%20States&facilityType=vet_center&serviceType&latitude=29.6267&longitude=-98.495114&radius=10&bounds%5B%5D=-99.245114&bounds%5B%5D=28.8767&bounds%5B%5D=-97.745114&bounds%5B%5D=30.3767&context=San%20Antonio%2C%20Texas%2078258%2C%20United%20States)
- [VBA detail](https://www.va.gov/find-locations/facility/vba_362k)
- [VA cemeteries detail](https://www.va.gov/find-locations/facility/nca_854)
### Events Listings
The rest of the Google Maps links are in the Events listings React widget for the [Outreach and Events search results](https://www.va.gov/outreach-and-events/events/). They use this component: [ResultsWhereContent.jsx](https://github.com/department-of-veterans-affairs/vets-website/blob/696d470cc7ec0e7e817f831b3cdf658f65b29eea/src/applications/static-pages/events/components/Results/ResultsWhereContent.jsx#L46) (for Events listings)

0 comments on commit bf50c63

Please sign in to comment.