ionic 2 - Native Geocoder forwardResult and reserveResult not working

Question

Trying to generated markers on the map based on the postcode of the users from a database, but already stuck at the beginning.

I am following the example from: GitHub

Tried the method from the ionic documentation but it does not seem to work as well. Using ionic serve receiving the error message:

ERROR Error: Uncaught (in promise): TypeError: __WEBPACK_IMPORTED_MODULE_3__ionic_native_native_geocoder__.a.reverseGeocode is not a function

I am new to ionic 2 so not really sure where did I when wrong. Appreciate any form of help. Thanks in advance :)

html

 <ion-content padding>
 <p>
  {{foo}}
 </p>
 <p>
  {{bar}}
 </p>

 <div #map id="map" style="z-index: 1; position: absolute; top: 0px; left: 0px;"></div>

 </ion-content>

TypeScript

import { Component, ViewChild, ElementRef  } from '@angular/core';
import { NavController,ToastController, Platform } from 'ionic-angular';
import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import { NativeGeocoder, NativeGeocoderReverseResult, NativeGeocoderForwardResult } from '@ionic-native/native-geocoder';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

declare var google;

@Component({
selector: 'page-mapview',
templateUrl: 'mapview.html'
})
export class MapPage {
 bar:string;
 foo:string;
 public listings : any = [];
constructor(
public navCtrl: NavController,
public geolocation: Geolocation,
public nativeGeocoder: NativeGeocoder,
public toaster: ToastController,
public http: Http,
public platform: Platform,) {

  this.platform.ready().then(() => {

   NativeGeocoder.reverseGeocode(52.5072095, 13.1452818)
    .then((result: NativeGeocoderReverseResult) => {
      this.foo = "The address is " + result.street + " " + result.houseNumber + " in " + result.city + ", " + result.countryCode;
      console.log("The address is " + result.street + " " + result.houseNumber + " in " + result.city + ", " + result.countryCode);
    })
    .catch((error: any) => console.log(error));

  NativeGeocoder.forwardGeocode("139651")
    .then((coordinates: NativeGeocoderForwardResult) => {
      this.bar = "The coordinates are latitude=" + coordinates.latitude + " and longitude=" + coordinates.longitude;
      console.log("The coordinates are latitude=" + coordinates.latitude + " and longitude=" + coordinates.longitude);
    })
    .catch((error: any) => console.log(error));

});

}

@ViewChild('map') mapElement: ElementRef;
map: any;

/* MAP STARTS HERE */
ionViewDidLoad(){
this.loadMap();
}


loadMap(){

this.geolocation.getCurrentPosition().then((position) => {

  let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

  let mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
   }

  this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

  let marker = new google.maps.Marker({
  map: this.map,
  animation: google.maps.Animation.DROP,
  position: this.map.getCenter()
  });

  let content = "<h4>You are here!</h4>";          

  this.addInfoWindow(marker, content);

  }, (err) => {
  console.log(err);
  });

 }

score 1 · Accepted Answer · answered Jul 13 '17 at 09:15

You need to access the function through the injected object not the class NativeGeocoder.

Do:

this.nativeGeocoder.reverseGeocode(52.5072095, 13.1452818)
    .then((result: NativeGeocoderReverseResult)=>{
//...
}).catch((error: any) => console.log(error));

Similarly for forwardGeocode function. They are not static functions to be accessed by class.

ionic 2 - Native Geocoder forwardResult and reserveResult not working

1 Answers1