Error in Ionic-Native GoogleMaps on adding event listener to marker

Ionic Framework ionic-v3
1

I am trying to use ionic-native Google Maps in my application and i could see some changes in syntax on using ionic-native GoogleMaps from cordova plugin. I want to add event listener to marker. But getting error as _this._objectInstance.addEventListener is not a function at Observable.GoogleMapsMarker.addEventListener [as _subscribe].

My Ts is as follows.

var posMarker = this.map.addMarker({
    'position': this.Loc,
    'title': 'My Location',
    'draggable':true,
    'icon':'green',
    'snippet':'Drag to adjust location',
    'animation': GoogleMapsAnimation.DROP
});
var a = new GoogleMapsMarker(posMarker);
a.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe(
    data => alert("Marker is clicked"),
    err => console.log("some error on marker listener ", err)
);

Please help me on how to get this.

Thanks in advance

2

I have the same question, did you find a solution for that?

I’m adding the markers like you:

  let markerOptions: GoogleMapsMarkerOptions = {
    position: myPosition,
    title: 'You are here!'
    animation: GoogleMapsAnimation.DROP*/
  };
                
  this.map.addMarker(markerOptions);

I didn’t know hoy to add the marker or info click event.

3

You can add listener after adding maker as below.

    markeroptions.then((marker) => {
      marker.remove();
      // You can add event listener or use any methods of marker here.
    });
4

Thank you @AishApp, that sounds great, could you show me a sample of how to add the event listener to the marker there? I want to click the info and go to another page.

5

Sorry for the delayed response. You could do as follows.

markeroptions.then((marker) => {
      marker.addEventListener(GoogleMapsEvent.INFO_CLICK).subscribe(
                        (data) => {
                           //Your code for navigation.
                        }
     );
}):
1 Like
6

@AishApp perfect, that’s work, I added an event listener and I could navigate from a marker to another page.

    let markerOptions: GoogleMapsMarkerOptions = {
        position: myPosition,
        title: 'Estas aquí!',
        animation: GoogleMapsAnimation.BOUNCE
    };

    this.map.addMarker(markerOptions).then(
        (marker: GoogleMapsMarker) => {
                marker.addEventListener(GoogleMapsEvent.INFO_CLICK).subscribe(
                    (data) => {
                        this.navCtrl.push(MyPage);
                    }
                );
         }
    );

My problem know is that I implement the solution provided by @morcth Google Maps - don't work to solve Google Maps in a different page from root

ngOnInit() {
    let pageArray = document.getElementsByClassName("show-page");

    for(var i = pageArray.length-1; i>= 0; i--){
        pageArray[i].classList.remove('show-page');
    }
}

but know the navigated page doesn’t work (nothing could be click or tap).

Do you get Google Maps working in different page than root in another way?

Another problem is that when I get back from the the page the map lost the center position it has.

7

Google Maps resides beneath the ionic template. If you want to display the map on other page than the root page, make sure you make the background color transparent on view leave

background-color: transparent !important;
color: transparent !important;

Also to navigate from map page to other page, you have to remove the map. (Personally, I am changing the height to 0 on navigating). If you are not doing this, your ionic page will be displayed but you wont have any control over it.

1 Like
8

@AishApp could you paste a sample or the code you use for that? It would be good for me and for others! Thanks in advance.

9

You have to use ngClass to change the background on navigation to map page.
Home.html

 <ion-content [ngClass]="isDisplayed">
 //Your HTML code
 <button (click)="navToMap()"> Open Map </button>
 </ion-content>

HOme.ts
> constructor(){
> this.isDisplayed = {‘displayMap’: false};
> }
> ionViewDidEnter(){
> this.isDisplayed.displayMap = false;
> }
> navToMap(){
> this.isDisplayed.displayMap = true;
> this.nav.push(MapPage);
> }

Home.scss

.display {
background-color: transparent !important;
color: transparent !important;
//Make sure you change the display property of all elements to none here.
button{
display: none
}
}

10

hi,
i am using the ionic-native Google Maps. I’m trying to detect click on the title canvas, does anyone know how to do this ?

thanks

image
Sem nome.png480×513 101 KB 

loadMap(){
	var latitude 	= Global.userCoords['latitude'];
	var longitude 	= Global.userCoords['longitude'];
	
	let map = new GoogleMap('map');
	var markers = [];
	map.one(GoogleMapsEvent.MAP_READY).then(() => {
		let myPosition = new GoogleMapsLatLng(latitude, longitude);
		map.moveCamera({ target: myPosition, zoom: 16 }); 
		this.storage.get('listagemRestaurantes').then((list) => {
			if( list != undefined && list.length > 1 ){
				var x;
				var obj = JSON.parse(list); 
				var canvas = [];
				for (x in obj) {
					var pd = obj[x]['ponderador'];
					var pm = obj[x]['preco_medio'];
					
					
					canvas[x] = document.createElement('canvas');
					canvas[x].width = 180;
					canvas[x].height = 50;
					var context = canvas[x].getContext('2d');

					var img = new Image();
					img.src = obj[x]['imagem_defeito'];
					context.drawImage(img, 0, 0,50,50); 
					context.font = 'bolder 10pt arial';
					context.fillStyle = 'black';
					context.fillText( obj[x]['nome'] , 60, 15);
					
					context.font = '8pt arial';
					context.fillStyle = 'black';
					context.fillText( obj[x]['morada']+' '+obj[x]['concelho'] , 60, 30);

					context.font = '8pt arial';
					context.fillStyle = 'black';
					context.fillText( obj[x]['tipos_cozinha'] , 60, 45);
					
					markers[x] = map.addMarker({
						position: new GoogleMapsLatLng(obj[x]['gps_lat'], obj[x]['gps_lon']), 
						title: canvas[x].toDataURL(),
						icon: "www.linkToTheIcon ",
					});
				}
				obj = undefined;
			} 
			list = undefined;
		}).catch((e) => {
			console.log(e);
		});
	});
}