Gmap infowindow from database with a button inside

Question

im using JAVASCRIPT GOOGLE MAPS API, im getting data(Informations about each user of my application and his position) from database using a PHP REST API, then im using these data to make infowindows for each markers, inside each of these infowindows there's the data that i got previously and also a button that pushes to a page, each infowindow contains a button pushes to a different page(Profil page).

Problems are in example if i have 2 markers, lets name them A and B:

If i click on marker A its infowindow show up then click of marker B it infowindow show up but marker's A infowindow doesnt close

Button that pushes to pages is kinda buggy sometimes he pushes multiples times. Hope you guys can help me here's my code:

this.service="maconnerie";
var url='http://192.168.1.3/api/v1/positions';
this.data =this.http.get(url);

let infowindow= new google.maps.InfoWindow(); 
this.data.subscribe(data=>{



  let clickableItems;
  for(var i=0;i<data.length;i++)
  {

    let marker;
    let clickableItem;
    let rat=data[i].rating;
    let rating;
    let profilButton="clickable";

    if(data[i].metier==this.service){
   var ouvrier=data[i].firstname+' '+data[i].lastname;
   console.log(data[i].lat,',',data[i].lon);
   var d=this.getDistanceFromLatLonInKm(this.la,this.lo,data[i].lat,data[i].lon);
   console.log(d+" "+this.la+" "+this.lo);
   if (d<=50) {
   var Latlng = new google.maps.LatLng(data[i].lat,data[i].lon);
     marker = new google.maps.Marker({
      position: Latlng,
      map: this.map,
      labelAnchor: new google.maps.Point(22, 0),
      draggable:false,
      icon: { url : 'assets/imgs/worker.png',scaledSize: new google.maps.Size(70, 70)
    },

    });



    if (rat<=1){rating="1.jpg"};
    if (rat>1&&rat<2){rating="1v.jpg"};
    if (rat==2){rating="2.jpg"};
    if (rat>2&&rat<3){rating="2v.jpg"};
    if (rat==3){rating="3.jpg"};
    if (rat>3&&rat<4){rating="3v.jpg"};
    if (rat==4){rating="4.jpg"};
    if (rat>4&&rat<5){rating="4v.jpg"};
    if (rat==5){rating="5.jpg"};
    let idz=data[i].idprof;
    let that=this;
    let profilpic=data[i].profilpic;




    google.maps.event.addListener(marker, 'click', event => {
      infowindow.close(); // Close previously opened infowindow
      infowindow.setContent("<style  type='text/scss' src='gmap.scss'></style><div class='infowindow'><center><img class='profilpic' src='assets/imgs/profilpics/"+profilpic+".png'><br><img class='rating' src='assets/rating/"+rating+"'></center><input type='button' id='clickableItem"+idz+"' class='buttonProfil' value='Profil'></div>");
      infowindow.open(this.map, marker);

  });
  google.maps.event.addListener(infowindow, 'load', () => {

    console.log("clickableItem"+idz);
  clickableItem = document.getElementById("clickableItem"+idz);

 clickableItem.addEventListener('click', () => {
   that.zone.run( () => {
     console.log("user: "+idz);
   that.navCtrl.push(ProfilPage, {
     profilId: idz
 });

   });


 });
});

}

  }
}

Thanks for reading

Create only 1 Infowindow object and use its `setContent()` method. — MrUpsidown, Jun 16 '18 at 10:00
Possible duplicate of [Google map API v3 - Add multiple infowindows](https://stackoverflow.com/questions/30012913/google-map-api-v3-add-multiple-infowindows) — MrUpsidown, Jun 16 '18 at 10:05
This does resolve the infowindow problem but not the Button that pushes to pages one, i edited my post with the current code — Fragan, Jun 16 '18 at 21:08

score 0 · Accepted Answer · answered Jun 18 '18 at 00:56

I fixes it, i used Google map API v3 - Add multiple infowindows to fix the infowindows issues, and i changed the button listener to this:

google.maps.event.addListener(infowindow, 'domready', () => {

    console.log("listener infowindow => clickableItem"+idz);
  var clickableItem = document.getElementById("clickableItem"+idz);

 if (clickableItem) { clickableItem.addEventListener('click', () => {
   that.zone.run( () => {
    console.log("listenerclick => clickableItem"+idz);
   that.navCtrl.push(ProfilPage, {
     profilId: idz
 });

   });


 });

}
});

Gmap infowindow from database with a button inside

1 Answers1