gmap3 icon indicating copy to clipboard operation
gmap3 copied to clipboard

unable to implement infowindow

Open shu8hamrajput opened this issue 3 years ago • 1 comments

i am trying to implement multiple marker with infowindows when marker id clicked but somwhow value of infowindow is undefined. i am new to jquery but all other issues and code examples on internet seems similar to this. I am really confused if it is happening to me only or there is some change in usage of infowindow functionality.

$('#map')
      .gmap3({
          center:[stores[0].latitude, stores[0].longitude],
          zoom:10,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: true,
          mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            scrollwheel: true,
            streetViewControl: true
        })
        .marker(markers)
        .infowindow(markers)
        .then(function(infowindow) {
            console.log("info: ", infowindow)
            var map = this.get(0);
            var marker = this.get(1);
            marker.forEach(function(item,i){
                item.addListener('click', function() {
                    infowindow.open(map, item);
                });
            })

        })

shu8hamrajput avatar Mar 03 '21 13:03 shu8hamrajput

It is not a jQuery problem. Just leave the "content" property of infowindow empty, and add "ctext" or similar property to each marker and use it in your marker.forEach loop. It will dynamically set the content of infowindow.

$('#cmap')
          .gmap3({
              center: [51.08314890, 17.04792140],
              zoom: 11
          })
          .marker([
              //foreach loop or sth similar to generate your markers
              { position: [/*item latitude*/, /*item longitude*/],
                icon: "img/pin.png",
                ctext: "item text to display on infowindow" },
              // end foreach loop
          ])
          .infowindow({
            content: ''
          })
          .then(function (infowindow) {
              var map = this.get(0);
              var marker = this.get(1);
              marker.forEach(function(item,i){
                  item.addListener('click', function() {
                      infowindow.setContent(item.ctext);
                      infowindow.open(map, item);
                  });
              })
          });

0x77-pl avatar Jun 26 '21 10:06 0x77-pl