How to create multiple markers with info bubbles?
Hi.
I’m using the maps api and I want to create multiple markers with the infoBuubbles using coordinates. I pass a string with the coordinates and the information for the infobubble to a FOR loop. So far this is working to create all the markers I need. The problem is with the infobubble, it create a click event for each marker but it only show the infobubble of the last created marker and when I click them.
I look for an answer on the web and can’t find anything to create multiple markers with this maps api.
How can I add multiple markers with the infobubble for each one?
There is a better way than the FOR loop?
Thanks
Re: How to create multiple markers with info bubbles?
Hi mikediaz,
Here you can find how to create mutilple infoBubbles:
[url]http://api.maps.nokia.com/en/mobile/apireference/0.2.0/nokia.mh5.components.Map.infoBubbles.html[/url]
And here is an example how to do this. It also should answer your question about FOR loop.
[B]Make sure you use > 0.2.0 of MH5[/B]
[CODE]
nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/0.2.0/lib/";
nokia.mh5.appId = "demo_wwzrmoloHAFVvyW";
nokia.mh5.appCode = "Vgl_08RQWnjJo92Lw1F_uQ";
var map = new nokia.mh5.components.Map({
infoBubble: {
content: ["title"],
listeners: {
click: function() {
//handle the click event on the infoBubble
}
}
},
listeners: {
poiclick: function(e) {
e.preventDefault();//prevents hiding open infoBubbles and opening a new one
var poi = e.data[0];
if (!poi.infoBubble) {
//first check whether the clicked poi isn't a infobubble
this.showInfoBubble(poi);
}
},
mapclick: function(e) {
e.preventDefault();//prevents hiding open infoBubbles
},
maplongpress: function(e) {
e.preventDefault();//prevents hiding open infoBubbles and opening a new one
},
ready: function() {
var pois = [{
longitude: 13.32,
latitude: 52.32,
name: "po1",
categoryIcon: nokia.mh5.assetsPath + "img/categories/12.icon.mh5.basic.png"
}, {
longitude: 13.31,
latitude: 52.31,
name: "po2",
categoryIcon: nokia.mh5.assetsPath + "img/categories/12.icon.mh5.basic.png"
}, {
longitude: 13.30,
latitude: 52.30,
name: "po3",
categoryIcon: nokia.mh5.assetsPath + "img/categories/12.icon.mh5.basic.png"
}];
this.pois = pois;
//make sure the user sees all pois
this.box = pois;
}
}
});
document.body.appendChild(map.root);
[/CODE]
Br,
Leo