Ionic Native Google Maps api

Ionic Framework ionic-v3
1

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:

 `this.map.fitBounds(bound);`

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

then

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

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(() => {
      that.deleteMarker(marker);
    });
  });

with the native api, you are supposed to use this.map.one..., however how do you specify which marker is clicked? i.e. how do you get a handle on the marker?

      this.map.one(GoogleMapsEvent.MARKER_CLICK).then(() => {
                // do something with marker
      });

Question 3

How do you add animation to a marker?

  let markerOptions: GoogleMapsMarkerOptions = {
    animation: google.maps.Animation.DROP,
    position: location
  };

  this.map.addMarker(markerOptions)
    .then((marker: GoogleMapsMarker) => {

the above code, gets this error:

[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

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?

1 Like
2

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

3

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

export class FitBounds {
  markers;
  @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() {
    this.loadMap();
  }

  ionViewWillLeave(){
    if(!this.map){
      this.map.remove();
    }
  }

  loadMap() {
    if(this.map){
      this.map.clear();
    }
    this.map = 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
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      let self = this;
      this.map.clear();
      this.markers.forEach((a)=>{
        let tmp = new LatLng(a.address.location.lat, a.address.location.lng);
        self.addMarker(tmp);
        self.addlatlngBound(tmp);
      });
      let latlngBounds = new LatLngBounds(self.bounds);
      self.moveToPosition(latlngBounds);
    });
  }

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

  addMarker(latlng){
    let self = this;
    let marker: MarkerOptions ={
      position: latlng
    };
    self.map.addMarker(marker).then(function (marker: Marker) {
      marker.showInfoWindow();
    });
  }

  addlatlngBound(latlng: LatLng){
    this.bounds.push(latlng);
  }
}
1 Like