Google maps native htmlinfowidow issue

Ionic Native
1

Hello everyone,

I am creating an app that has a page where multiple markers are displayed with dynamic popups using htmlinfowindow. The problem that i am encountering is that i i want to add a button to the htmlinfowindow so when i click it i get navigated to another page.

I tried using the example given here :
@ionic-native / google-maps Cordova GoogleMaps plugin project Masashi Katsumata

The example given in the above document did not work maybe because there is only one marker added and in my example i use clusters.

My code is the following:

loadMap() {
    console.log('create');
    this.map = GoogleMaps.create('restaurantMap', {
      'camera': {
        'target': {
          "lat": 21.382314,
          "lng": -157.933097
        },
        'zoom': 10
      }
    });

    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      this.userPostData.northeast = this.map.getVisibleRegion().northeast;
      this.userPostData.southwest = this.map.getVisibleRegion().southwest;

      this.map.on(GoogleMapsEvent.MAP_DRAG_END).subscribe(
        () => {
          this.userPostData.northeast = this.map.getVisibleRegion().northeast;
          this.userPostData.southwest = this.map.getVisibleRegion().southwest;
          this.map.clear();
          this.addCluster(this.dummyData2());
        }
      );

      this.geoLocation.getCurrentPosition().then((resp) => {
        this.lat = resp.coords.latitude;
        this.lng = resp.coords.longitude;

        let position: CameraPosition<ILatLng> = {
          target: {
            lat: this.lat,
            lng: this.lng
          },
          zoom: 18
        };

        this.map.moveCamera(position);

        this.addCluster(this.dummyData());
      }).catch((error) => {
        this.helper.presentToast('Please turn on you gps!');
      });

    });
  }

  addCluster(data) {
    this.map.addMarkerCluster({
      markers: data,
      icons: [
        {
          min: 3,
          max: 10,
          url: "./assets/img/marker/m1.png",
          label: {
            color: "white"
          }
        },
        {
          min: 11,
          max: 30,
          url: "./assets/img/marker/m2.png",
          label: {
            color: "white"
          }
        },
        {
          min: 31,
          url: "./assets/img/marker/m3.png",
          label: {
            color: "white"
          }
        }
      ]
    }).then((markerCluster: MarkerCluster) => {
      markerCluster.on(GoogleMapsEvent.MARKER_CLICK).subscribe((params) => {
        let marker: Marker = params[1];
        let htmlInfoWindow = new HtmlInfoWindow();

        let frame: HTMLElement = document.createElement('div');
        frame.innerHTML = [
          '<h2>'+ marker.get("name") +'</h2>',
          '<button>Open/button>'
        ].join("");
        frame.getElementsByTagName("button")[0].addEventListener("click", () => {
          console.log('Click');
        });
        htmlInfoWindow.setContent(frame, {
          width: "230px",
          height: "150px",
        });
        htmlInfoWindow.open(marker);
      });
    });
  }

 dummyData() {
    return [
      {
        "position": {
          "lat": 46.0738144,
          "lng": 18.210416
        },
        "name": "Place 1",
        "rating": "4",
        "restaurantId": "2"
      },
      {
        "position": {
          "lat": 46.0733244,
          "lng": 18.210716
        },
        "name": "Place 2",
        "rating": "3",
        "restaurantId": "3"
      }
    ];
  }

The following part of the code is the one that is not running:

 frame.getElementsByTagName("button")[0].addEventListener("click", () => {
          console.log('Click');
        });

Any suggestions are welcome and appreciated.
Thanks
Trix

2

Try the multiple_maps branch version.

$> git clone https://github.com/mapsplugin/cordova-plugin-googlemaps

$> git checkout multiple_maps

$> git pull

$> cd (project dir)

$> cordova plugin rm cordova-plugin-googlemaps

$> cordova plugin add (path to)/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="..." --variable API_KEY_FOR_IOS="..."