How to make Google Maps not clickable under custom marker?

Question

I use NgMap and have some markers. When mouse is over a marker I present a "custom-marker" as an infoWindow. The problem is that when the custom-marker appears, if there is a marker under it, it is still clickable. How can I make the custom-marker float over the map or make map not clickable under the custom-marker?

<ng-map center="current-location"
    id="map"
    zoom-control="true"
    zoom-control-options="{style:'LARGE', position:'RIGHT_BOTTOM'}"
    scale-control="true"
    street-view-control="false"
    map-type-control="true"
    map-type-control-options="{style:'HORIZONTAL_BAR', position:'LEFT_BOTTOM'}"
    style="height:100%;width:100%;position: absolute"
>
<marker
        ng-repeat="scene in vm.scenes"
        position="{{scene.location}}"
        id="marker{{$index}}"
        draggable="{{scene.draggable}}"
        on-dragend="vm.getNewLocation()"
        icon="{{scene.markerPath}}"
        on-mouseover="vm.showWindow(event, scene)"
        opacity="{{scene.opacity}}"
        on-click="vm.selectScene(event, scene)"
        on-mouseout="vm.hideWindow(event)"
>
</marker>

<custom-marker
        visible="{{vm.options.showInfo === true}}"
        id="customMarker"
        position="{{vm.infoScene.location}}"
>

    <md-card md-theme="text-theme" flex style="opacity: 0.9;"
             ng-mouseleave="vm.hideWindowCustom()"
             ng-mouseover="vm.keepWindow()"
    >
        <md-card-content flex>

            <img ng-src="{{vm.infoScene.photo_url}}" width="200" height="200">

            <md-input-container class="md-block">

            <textarea ng-change="vm.options.hasChanges = true" ng-model="vm.infoScene.short_description"
                      md-maxlength="70"
                      md-select-on-focus></textarea>
            </md-input-container>
        </md-card-content>
    </md-card>
</custom-marker>
</ng-map>

Answer 1

You could try using pointer-events in css? https://davidwalsh.name/pointer-events