Customise Google Maps + Slideshow for Responsive Website

The project is to develop a section of a responsive HTML5/CSS page which will be built using the Foundation 4 grid [login to view URL] This is a single scrolling page which is static, so no backend CMS required. The section (or row) to be build will be full width of the browser (as seen in [login to view URL]) attachment with Google Maps as the background. The Google Maps has custom colour styling to be much lighter and all grayscale. There will be elements which appear over Google Maps as indicated. This will be multiple "stories" which can be changed by clicking on the indicators at the bottom of the map. When the user clicks on the indicators, the map changes location (position and zoom), the drop pin position, picture of the person along with text and button text. There will be up to 15 "stories", each with a different picture, location, zoom, text and button. The white box with image, text and button needs to be centered on screen (reposition after browser resize) and the drop pin at a consistent offset position for each story. When the user clicks on the button "MEET XXXX", an image slideshow appears (as seen in [login to view URL]) with text over the image, left/right navigation, slide indicators and a close button. the size of the slideshow will be the exact same size as the Google Map. There may be up to 10 slides per story, so MEET MARY may have 10 images + text slides. The text will change for each pictures. The slideshow needs to have swipe gestures, so use flexslider ([login to view URL]) Once the user clicks on the close button, the slideshow returns to the Google Map. The project needs to be compatible with IE8+ , Chrome, Safari, Firefox iPhone, iPad, Android (phone/tablet). The following tasks need to be completed: - Google Maps integration with custom styling, disable drag - Reposition / center elements and location over Google Map on browser resize - Set up story data structure to easily edit/add, either static HTML or JSON object. (geo position, zoom, picture, short text, button text) - Story navigation indicators which loads different story - Hover states for all buttons and navigation - Trigger slideshow on "Meet XXX" button click (fade effect) - Setup slideshow data structure for each story to easliy add/edit, either static HTML or JSON object. (image, text) - Slideshow navigation (left/right) and indicators - Black layer with opacity (from CSS) to adjust the overlay over the image so the text is readable - Slideshow image needs to scale with browser resize - maintain aspect ration - no image distortion - Close button closes the slideshow and returns to Google Map stories (fade effect) - Hover states for all slideshow arrows, close button and navigation