gmap3
gmap3 copied to clipboard
unable to implement infowindow
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);
});
})
})
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);
});
})
});