Google Maps in angular - mouse not releasing when dragging map

My question is somewhat similar to this question, but no answers were able to help solve my problem.

I am using google-maps-angular2 (plnkr) to implement google maps in my web app. Everything works fine, my map loads, I can use the routeService, set markers, infowindows... Yet, there is a problem that I can't seem to get rid of : when I use my mouse to move the map around, the mouse does not release. So even after my mouse is up (mouse up event), my map is still moving. This makes setting markers or waypoints painfully difficult.

Here is how I am loading my map :

<input type="text" class="map-input" placeholder="Search..." #inputElement>
<div mapSpy class="map shadow" #mapElement></div>

In my component, I am loading the map using this function :

loadMap() {
        this.gapi.init.then((maps) => {
            this.mapLoaded = true;
            const loc = new maps.LatLng(48.858093, 2.294694); 

            this.map = new maps.Map(this.mapElement.nativeElement, {
                zoom: 13,
                center: loc,
                zoomControlOptions: {
                    style: maps.ZoomControlStyle.LARGE,
                    position: maps.ControlPosition.RIGHT_BOTTOM
                }
          }
     });
}

I am also using CSS on my map:

.map{
    position: relative;
    height: 250px;
    border: 1px solid #a5a3a3;
    background-color: #e5e3df;
}

Yet, my problem still persists. I tried removing all styling, but the problem persists. Yet I still cannot find the cause of this problem.

Thank you for your help! :)