title: iOS - Google Maps Places onclick conflicts with map onclick
body: <p>I have a project created with ionic. In here I have a Google Map with a places search box. </p>
  
  <p>I have included the Google Map library like so:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=SOMEKEY&amp;libraries=places" defer&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Now in my TypeScript code I have the following</p>
  
  <pre><code>// init the google map
  initMap() {
      var centerOfMap;
      var draggableMarker = false;
      this.mapHasBeenInitialized = true;
  
  
      this.isStaticLocation = false;
      centerOfMap = new google.maps.LatLng(this.locationService.gpsLat, this.locationService.gpsLong);
      draggableMarker = true;
  
      var options = {
          center: centerOfMap,
          zoom: 11,
          fullscreenControl: false,
          disableDefaultUI: true, // dont allow default zoom/sattelite/street view
          gestureHandline: 'cooperative' // disable moving map with one finger
      };
  
      this.map = new google.maps.Map(this.googleMap.nativeElement, options);
      this.marker = new google.maps.Marker({
          position: centerOfMap,
          map: this.map,
          draggable: draggableMarker
      });
  
      if(!this.isStaticLocation) {
          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', () =&gt; {
              searchBox.setBounds(this.map.getBounds());
          });
  
          searchBox.addListener('places_changed', () =&gt; {
              var places = searchBox.getPlaces();
  
              if(places.length == 0) {
                  return;
              }
  
              var bounds = new google.maps.LatLngBounds();
              places.forEach(place =&gt; {
                  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);
          });
      }
  
      if(draggableMarker) {
          google.maps.event.addListener(this.marker, 'dragend', (event)=&gt;{
              this.getMarkerLocation();
          });    
      }
  
      google.maps.event.addListener(this.map, 'click', (event: any)=&gt; {
          var clickedLocation = event.latLng;
          this.marker.setPosition(clickedLocation);
          this.getMarkerLocation();
      });
  
      // neccessary for reload. Made async to trick loading process
      setTimeout(()=&gt; {
          google.maps.event.trigger(this.googleMap.nativeElement, 'resize');
          this.map.setCenter(centerOfMap);
      }, 100);
  }
  
  // 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();
  }
  
  getMarkerLocation() {
      var currLoc = this.marker.getPosition();
      this.locationService.setGoogleMapsLocation(currLoc.lat(), currLoc.lng());
      this.locationChanged = true;
  }    
  </code></pre>
  
  <p>And this code works like a charm in the browser and on Android. Basically what the code does is whenever someone taps on the map, the marker position changes to their tap location.</p>
  
  <p>When a person searches for a Place, the places dropdown will show over the map. On android, when you tap a place in this dropdown, the marker will go to the selected place (f.e. australia). </p>
  
  <p>On iOS however, the marker will position itself on the location where the person tapped and will totally ignore the tap on the place dropdown.</p>
  
  <p>So when I'm in Europe and I type in 'Australia' and select 'Australia' from my dropdown, on Android I'll go to australia but on iOS I'll stay somewhere in Europe wherever the dropdown was positioned.</p>