Displaying Reverse geocoding using cordova-plugin-googlemaps on ionic 3

cordova
1

i try to displaying data Reverse geocoding but no data display

here code i try :
…

eventMessage ;
testposition ;
const div = document.getElementById("mapTest");
    let map = plugin.google.maps.Map.getMap(div, {
      controls: {
        myLocationButton: true,
        myLocation: true,
        compass: true,
      } );
map.addEventListener(plugin.google.maps.event.MAP_READY, () => {
     
	  map.on(plugin.google.maps.event.CAMERA_MOVE_START, this.cekevent);
      map.on(plugin.google.maps.event.CAMERA_MOVE, this.cekevent);
      map.on(plugin.google.maps.event.CAMERA_MOVE_END, this.onCameraEvents);
 });

 cekevent(){
    let message ="cek event touched" ;
    this.eventMessage = message ;
  }
  
   onCameraEvents( cameraPosition){
    
    let fields = {
      "lat": document.getElementById("lat"),
      "lng": document.getElementById("lng"),
      "zoom": document.getElementById("zoom"),
      "tilt": document.getElementById("tilt"),
      "bearing": document.getElementById("bearing")
    };
	
   fields.lat.innerText = cameraPosition.target.lat;
   fields.lng.innerText = cameraPosition.target.lng;
   fields.zoom.innerText = cameraPosition.zoom;
   fields.tilt.innerText = cameraPosition.tilt;
   fields.bearing.innerText = cameraPosition.bearing;
   
    this.testposition = cameraPosition.target.lat +','+ cameraPosition.target.lng ; 
	this.searchLocation(this.testposition);
   }
   
   searchLocation(latLng){

      plugin.google.maps.Geocoder.geocode({
        "position": latLng
      }, (results) => {

        if (results.length === 0) {
          // Not found
          return;
        }		
		// results code will be here 
    });
  }

in HTML {{ eventMessage }} and {{ testposition }} blank , i try to put setTimeout but no luck,

ionic info ;

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.9.2

plugin : “cordova-plugin-googlemaps”: “^2.2.5”,

2

Why you are using that??? You can simple bind a angular property to that fields :roll_eyes:

3

That is part of the example and i can see the value there, but i cant see any value when bind it to the field this.testposition

4

Since you don’t use the @ionic-native/google-maps, the special keyword this at cekevent() function indicates map instance.

So, this code should work.

let self = this;
map.on(plugin.google.maps.event.CAMERA_MOVE, (latLng) => {
   let map = this;
   self.eventMessage = "cek event touched";
});
5

  1. last week when i read documentation this map plugin on github, @ionic-native/google-maps status still not ready for v 2.2.5, anyway sometimes i choose not use ionic native so i can focus read documentation in one place, and sometimes ionic native bit late for update.

  2. i try this ,

let self = this ;
map.on(plugin.google.maps.event.CAMERA_MOVE_END, (latLng) =>{
 let map = this;
self.seachLocation(latLng);
});

latLng wil result [object object]
i only can test with device, can’t guess what the object is…

thank you

6

That is cameraPosition object

7
8

yes i know that LatLng Instance, What i am trying to say ,
i dont know what inside that latLng ,
to display it in UI sometimes i need to put {{ map.latLng }} or just {{ latLng }}
i cant guess inside that object , i expect that should be number so i can pass the value toself.searchlocation(latLng)but the result is [object object] theself.searchlocation()cant find anything in the map

need to figure out more so i can display that [object object] as number.

9

yes i read the documentation already…

10 
function onCameraEvents(cameraPosition) {
  // Display the current camera position

  fields.lat.innerText = cameraPosition.target.lat;
  fields.lng.innerText = cameraPosition.target.lng;
  fields.zoom.innerText = cameraPosition.zoom;
  fields.tilt.innerText = cameraPosition.tilt;
  fields.bearing.innerText = cameraPosition.bearing;
}