Ionic3 Native Google Maps plugin Marker data: How to get Markers Data by clicking on it

Ionic Native
1

Hello there,
I’m using https://github.com/mapsplugin/cordova-plugin-googlemaps in my application. I’m able to diaplay multiple markers on Map. But not able to get custom data, when we click on particular marker. Can u please help me in that. The following code snippet that I’m using to dislpay multiple markers on map.

markersArr = [
    {
        title: 'markers',
        customInfo: "Marker A",
        icon: {
          url: "./assets/imgs/marker.png",
          size: {
              width: 30,
              height: 30
          }
       },
        animation: GoogleMapsAnimation.BOUNCE,
        position: {
          lat: 52.489899,
          lng: -2.01839
        },
        iconData:  {
          url: "./assets/imgs/marker-selected.png",
          size: {
              width: 30,
              height: 40
          }
       }
      },

      {
        title: 'markers',
        customInfo: "Marker A",
        icon: {
          url: "./assets/imgs/marker.png",
          size: {
              width: 30,
              height: 30
          }
       },
        animation: 'DROP',
        position: {
          lat: 52.489899,
          lng: -1.01839
        },
        iconData:  {
          url: "./assets/imgs/marker-selected.png",
          size: {
              width: 30,
              height: 40
          }
       }
      }
]


ionViewDidLoad() {
    this.getCurrentLocation();
  }

  getCurrentLocation() {
    this._geoLoc.getCurrentPosition().then((position) => {

      let yourPosition: ILatLng = {
        lat: 52.4773549,  // position.coords.latitude,
        lng: -2.003715 // position.coords.longitude
      };

  
      this.loadMap(this.markersArr);

    }, (err) => {
      console.log(err);
      alert('location error');
    });

  }

  
  loadMap(markersArr) {
    let POINTS: BaseArrayClass<any> = new BaseArrayClass<any>(markersArr);

    let bounds: ILatLng[] = POINTS.map((data: any, idx: number) => {
      return data.position;
    });

    this.map = GoogleMaps.create('map_canvas', {
      camera: {
        target: bounds
      }
    });

    POINTS.forEach((data: any) => {
      // data.disableAutoPan = true;
      let marker: Marker = this.map.addMarkerSync(data)
      marker.on(GoogleMapsEvent.MARKER_CLICK,).subscribe(this.onMarkerClick);
      // marker.on(GoogleMapsEvent.INFO_CLICK).subscribe(this.onMarkerClick);
    });

  }

  onMarkerClick(params: any) {
    alert("Marker Data: " + params.markerInfo);
    let marker: Marker = <Marker>params[1];
    let iconData: any = marker.get('iconData');
    marker.setIcon(iconData);
  }

Thanks

2

I’m not sure if it’s the same plugin but I use this plugin which works pretty well -> link

As you can see here it’s possible to add events for when a Marker is touched, example code:

marker.on(plugin.google.maps.event.MARKER_CLICK, function() {
  marker.set("count", marker.get("count") + 1);
});

So this allows you to do something like:

this.marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe(data => console.log(data))

this.marker is a reference I have to my position, maybe you should add it on the map reference, I’m not sure.

I haven’t tried it but that should give you a lead, I control when the map is centered with that method, addEventListener(...)

Good luck!

3

Thanks for your quick response, yes its the same plugin, I will update link. Anyways, just now I got the answer. I will update it, may be in future it will help someone else.

onMarkerClick(params: any) {
    let marker: Marker = <Marker>params[1];
    let customInfo: any = marker.get('customInfo');
    alert("Custom Info: " + customInfo);
    let iconData: any = marker.get('iconData');
    marker.setIcon(iconData);
  }
1 Like