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.
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.
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.
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.
When the visitor clicks on the “Hide Map†tab, the map will slide out of view and the screen will automatically slide up.