title: Ionic Native Google Maps api
body: <p>I am in the process of upgrading from <code>Ionic 2 beta</code> to <code>RC3</code>. Part of the upgrade requires me to use the <a href="https://ionicframework.com/docs/v2/native/google-maps/" rel="nofollow noreferrer">Ionic Native Google Maps</a> api.</p>
  
  <p>I am however finding this native api very limited.</p>
  
  <p><strong>Question 1</strong></p>
  
  <p>For example, the old api you could tell the map to fit a particular bounds:</p>
  
  <pre><code> `this.map.fitBounds(bound);`
  </code></pre>
  
  <p>I can't see how to do this with the native api.  How do I get the zoom level to fit a bound that may have multiple markers?</p>
  
  <p>Any help appreciated.</p>
  
  <p><strong>old method</strong></p>
  
  <pre><code>    let bound: google.maps.LatLngBounds = new google.maps.LatLngBounds();
      let point: google.maps.LatLng = new google.maps.LatLng(latitude, longitude);
      bound.extend(point); // can add multiple points
  </code></pre>
  
  <p>then</p>
  
  <pre><code>    let htmlElement: HTMLElement = document.getElementById("map");
      this.map = new google.maps.Map(htmlElement, mapOptions);
      this.map.fitBounds(bound);
  </code></pre>
  
  <p>this would set the zoom level to fit all the points in the bound.</p>
  
  <p><strong>Question 2</strong></p>
  
  <p>I have a listener that checks when a marker is clicked.</p>
  
  <p><strong>old method</strong></p>
  
  <pre><code>  let that = this;
    google.maps.event.addListener(marker, 'click', function () {
      return new Promise(() =&gt; {
        that.deleteMarker(marker);
      });
    });
  </code></pre>
  
  <p>with the native api, you are supposed to use <code>this.map.one...</code>, however how do you specify which marker is clicked? i.e. how do you get a handle on the marker?</p>
  
  <pre><code>      this.map.one(GoogleMapsEvent.MARKER_CLICK).then(() =&gt; {
                  // do something with marker
        });
  </code></pre>
  
  <p><strong>Question 3</strong></p>
  
  <p>How do you add animation to a marker?</p>
  
  <pre><code>  let markerOptions: GoogleMapsMarkerOptions = {
      animation: google.maps.Animation.DROP,
      position: location
    };
  
    this.map.addMarker(markerOptions)
      .then((marker: GoogleMapsMarker) =&gt; {
  </code></pre>
  
  <p>the above code, gets this error:</p>
  
  <blockquote>
  <pre><code>[ts]
  Type '{ animation: Animation; position: GoogleMapsLatLng; }' is not assignable to type 'GoogleMapsMarkerOptions'.
    Types of property 'animation' are incompatible.
      Type 'Animation' is not assignable to type 'string'.
  let markerOptions: GoogleMapsMarkerOptions
  </code></pre>
  </blockquote>
  
  <p><strong>Question 4</strong></p>
  
  <p>How do you do Geocoding with the native api, i.e. to get a positions location name.</p>
  
  <p><strong>old method</strong></p>
  
  <pre><code>  var geocoder = new google.maps.Geocoder();
    var request = {
      latLng: latLng
    };
    geocoder.geocode(request, function (data, status) {
          let name = data[0].formatted_address;
  </code></pre>
  
  <p>How can I achieve this with the native Ionic api?  </p>