Ionic Native Google Maps api


I am in the process of upgrading from Ionic 2 beta to RC3. Part of the upgrade requires me to use the Ionic Native Google Maps api.

I am however finding this native api very limited.

Question 1

For example, the old api you could tell the map to fit a particular bounds:


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?

Any help appreciated.

old method

    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


    let htmlElement: HTMLElement = document.getElementById("map"); = new google.maps.Map(htmlElement, mapOptions);;

this would set the zoom level to fit all the points in the bound.

Question 2

I have a listener that checks when a marker is clicked.

old method

  let that = this;
  google.maps.event.addListener(marker, 'click', function () {
    return new Promise(() => {

with the native api, you are supposed to use, however how do you specify which marker is clicked? i.e. how do you get a handle on the marker? => {
                // do something with marker

Question 3

How do you add animation to a marker?

  let markerOptions: GoogleMapsMarkerOptions = {
    animation: google.maps.Animation.DROP,
    position: location
    .then((marker: GoogleMapsMarker) => {

the above code, gets this error:

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

Question 4

How do you do Geocoding with the native api, i.e. to get a positions location name.

old method

  var geocoder = new google.maps.Geocoder();
  var request = {
    latLng: latLng
  geocoder.geocode(request, function (data, status) {
        let name = data[0].formatted_address;

How can I achieve this with the native Ionic api?


Did you get solution for question 1, is there a way to implement fitbounds mechanism


The fit bounds mechanism can be implemented with the camera options,

export class FitBounds {
  @ViewChild('map') mapTag: ElementRef;
  map: GoogleMap;
  bounds: LatLng[] = [];

  constructor(public navCtrl: NavController, public navParams: NavParams, private googleMaps: GoogleMaps,
              private properties: PropertiesProvider) {
    this.markers = properties.getProperties(); //where I get the lat and lng from

  ionViewDidEnter() {


  loadMap() {
    } = this.googleMaps.create(this.mapTag.nativeElement);
    // listen to MAP_READY event
    // You must wait for this event to fire before adding something to the map or modifying it in anyway => {
      let self = this;;
        let tmp = new LatLng(, a.address.location.lng);
      let latlngBounds = new LatLngBounds(self.bounds);

  moveToPosition(latlng: LatLngBounds){
    let self = this;
    let position: AnimateCameraOptions = {
      target: latlng,
      tilt: 0,
      duration: 1000

    let self = this;
    let marker: MarkerOptions ={
      position: latlng
    }; (marker: Marker) {

  addlatlngBound(latlng: LatLng){