Google Map Places selection conflicts with marker selection on iOS - ios

Question

I currently have a google map with a places select box.
I currently have a (click) binding on the map, when it's clicked in a certain location, a marker will be placed on that location.
Now I also have an input field with places so you can search for specific areas. The problem is now that when you search for a spot, and then press the location, the location will not be picked but instead a marker will show on the area you tapped.
(looks like a z-index issue but the input is actually above the map).
This issue only occurs on iOS devices. Android and Windows work fine
Edit: setting .pac-container { z-index: 999999 !important; }
Code:
Html
<input *ngIf="!isStaticLocation" type="text" class="controls" #pacInput placeholder="Search Box"/>
<div #googleMap id="map" style="width: 100%; height: 300px;"></div>
TS (Simplified)
// init the google map
initMap() {
var centerOfMap;
var draggableMarker = true;
centerOfMap = new google.maps.LatLng(this.locationService.gpsLat, this.locationService.gpsLong);
var options = {
center: centerOfMap,
zoom: 11,
fullscreenControl: false,
disableDefaultUI: true, // dont allow default zoom/sattelite/street view
gestureHandline: 'cooperative' // disable scrolling conflict of the page
};
this.map = new google.maps.Map(this.googleMap.nativeElement, options);
this.marker = new google.maps.Marker({
position: centerOfMap,
map: this.map,
draggable: draggableMarker
});
var searchBox = new google.maps.places.SearchBox(this.googleInput.nativeElement);
// add the searchbar to the google map
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.googleInput.nativeElement);
// Bias the SearchBox results towards current map's viewport
this.map.addListener('bounds-changed', () => {
searchBox.setBounds(this.map.getBounds());
});
searchBox.addListener('places_changed', () => {
var places = searchBox.getPlaces();
if(places.length == 0) {
return;
}
var bounds = new google.maps.LatLngBounds();
places.forEach(place => {
if(!place.geometry) {
console.log("returned place contains no geometry");
return;
}
this.setMarkerLocation(place);
if(place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extends(place.geometry.location);
}
});
this.map.fitBounds(bounds);
});
google.maps.event.addListener(this.map, 'click', (event: any)=> {
var clickedLocation = event.latLng;
this.marker.setPosition(clickedLocation);
this.getMarkerLocation();
});
}
// function to set the location marker on a different spot
setMarkerLocation(place: any) {
this.marker.setMap(null);
this.marker = new google.maps.Marker({
position: place.geometry.location,
map: this.map,
draggable: true
});
this.getMarkerLocation();
}
// updates configuration of the app.
getMarkerLocation() {
var currLoc = this.marker.getPosition();
this.locationService.setGoogleMapsLocation(currLoc.lat(), currLoc.lng());
this.locationChanged = true;
}