Barnabas Health – Hospital Mapping

On the Barnabas Health website one of the key elements I had added was mapping capability using the Google Maps API. This provides a visitor a visual representation of where the different facilities are located.  Since the main Barnabas Health website is a static website with no back-end – I used an XML file to store the facility data so it was easy for a non-programmer to update, add or delete facilities (see below for a sample of the XML file). I used DownloadXML.js to obtain the XML file from the server.  In addition, because some facilities overlap – I had to incorporate a spidering affect which was accomplished by using OverlappingMarkerSpiderfier or OMS.

To keep the design of the page the way it was originally and save real estate space, I used a slider tab to hide the mapping and allowed the visitor to dynamically show and hide the map.

Barnabas Health Mapping - Map Hidden

When the user clicks on the “Show Map” tab – it will automatically slide down and display the map to the left and then to the right is the list of facilities. The screen also scrolls down as the tab is opened so that the user doesn’t have to then manually scroll the browser window to see the content.

Barnabas Health Mapping - Tab Expanded and Map Shown


When the visitor clicks on a map marker or the facility name on the right side – the associated infobox will appear within the map. The infobox also contains an address box, where the visitor can enter their address and get directions.

Barnabas Health Mapping - Infobox Displayed


When the visitor requests directions by entering them into the field provided in the infobox, the map area expands, automatically slides down to the directions and is dynamically populated at the top with the facility information the person wanted directions for.

Barnabas Health Mapping - Display Directions

When the visitor clicks on the “Hide Map” tab, the map will slide out of view and the screen will automatically slide up.