Cannot click on an element - angularjs

Question

I have an element that I have tried every known way to click on here are a few:
var areaMap = $('[data-bind="click: campusMap"]');
var areaMap = browser.driver.findElement(By.cssSelector("div.campus-map.panel > div.panel-footer > button.btn.btn-browse")).click();
var areaMap = element(by.cssContainingText('button.btn', "View Area Map"));
//and this way too
browser.executeScript('arguments[0].click()', areaMap.getWebElement());
browser.actions().mouseMove(areaMap).click().perform();
I have no idea how to make this element interact-able.
The HTML looks like this:
<div class="campus-map panel" data-bind="click: campusMap">
<div class="title">Area Map</div>
<div class="panel-content">
<div id="googleContainer" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
<div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: pointer;">
<div style="margin-left: 5px; margin-right: 5px; z-index: 1000000; position: absolute; left: 0px; bottom: 0px;">
<div class="gmnoprint" style="z-index: 1000001; position: absolute; right: 166px; bottom: 0px; width: 121px;">
<div style="background-color: white; padding: 15px 21px; border: 1px solid rgb(171, 171, 171); font-family: Roboto,Arial,sans-serif; color: rgb(34, 34, 34); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); z-index: 10000002; display: none; width: 256px; height: 118px; position: absolute; left: 36px; top: 5px;">
<div class="gmnoscreen" style="position: absolute; right: 0px; bottom: 0px;">
<div class="gmnoprint gm-style-cc" style="z-index: 1000001; position: absolute; -moz-user-select: none; right: 95px; bottom: 0px;" draggable="false">
<div class="svg-controls" style="z-index: 0; position: absolute; bottom: 13px; right: 0px;">
<div class="gm-style-cc" draggable="false" style="-moz-user-select: none; position: absolute; right: 0px; bottom: 0px;">
</div>
</div>
</div>

Answer 1

Your example code has elements that do not exist in your html example... so I'm not 100% sure what you're trying to click on. But assuming it's the first div, and assuming it's visible, this selector should work:
var areaMap = $('div.campus-map.panel');
or if that's NOT visible, perhaps this (since title should be visible):
var areaMap = $('div.campus-map.panel div.title');
Or with text:
var areaMap = element(by.cssContainingText('div.title', "Area Map"));