MH5 Show/Hide Infobubbles

[tomgiam]

I'm using this code to show all info bubbles on map, but it's not showing any. They remain as markers.

var pois = map.pois;
for(var poi in pois)
map.showInfoBubble(poi);


Any ideas?

Thanks
Tom

[ZieL]

Hi Tom,

Either your array is empty or the poi data structure is incompatible. Do you have "name" property in pois?


Leo

[tomgiam]

Hi Leo,

The array is not empty and the "name" property is there. I noticed that it was complaining about a "listener", so after I added this to the map control, the showInfoBubble started to work:

infoBubble: {
content: ["title"],
listeners: {
click: function () {
SelectedPlaceID = poi.data.tag.toString();
$("#map_marker_popup" ).popup( "open" );
}
}
},

However, when I try to hide the infoBubble using the same code and markers, it complains with the message "cannot convert a null to object" (on line 357 of mh5.js)

The code is now:

var pois = window.map.pois;
guide_obj.map_control.showMarkerNames = !guide_obj.map_control.showMarkerNames;
for(i=0;i<pois.length;i++)
{
poi = pois[i];
if(guide_obj.map_control.showMarkerNames == true)
window.map.showInfoBubble(poi);
else
window.map.hideInfoBubble(poi);
}

The pois are created like this:

var poi = map.createPoi(nokia.mh5.assetsPath + "img/categories/12.icon.mh5.basic.png", { longitude: Place.Longi, latitude: Place.Lat });
poi.name = Place.Name;
poi.tag = Place.ID;
pois[j] = poi;
j = j + 1;
...
map.pois = pois;

Thanks
Tom

[ZieL]

Hi Tom,

hideInfoBubble doesn't accept the poi but the infobubble you want to hide (please look at the documentation). You get all the shown infobubbles by accessing map.infoBubbles array. Every infoBubble object has "poi" property which is the reference to the actual poi.

Leo

[ProTaxi]

Hi,

What parameters need to be passed to hideInfoBubble to close it? Looked over docs can not find the information needed.

Thanks again!

[tomgiam]

To close it is easy, but I still can't figure out how to open it.
This code will close all displayed infoBubbles:

var infobs = window.map.infoBubbles;
for(i=0;i<infobs.length;i++)
window.map.hideInfoBubble(infobs[i]);

When they are closed the window.map.infoBubbles array is empty so you can only see the pois, when I try:

var pois= window.map.pois;
for(i=0;i<pois.length;i++)
window.map.showInfoBubble(pois[i]);

it doesn't work.

Tom

[ZieL]

Thanks Tom for the answer. That's right. You also can call hdieInfoBubble without any parameters. It will close all available infoBubbles. The description of the function is available in the api reference under Map component on

http://developer.here.com/mobile_js#...nents.Map.html


The code you posted to show an infobubble should be okay. Here is my code I've used for another example which definitely works. I hope it can help you.

    nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/1.0.2/lib/";
    nokia.mh5.appId = "d_peU-uCkp-j8ovkzFGNU";
    nokia.mh5.appCode = "gBoUkAMoxoqIWfxWA5DuMQ";
    var map = new nokia.mh5.components.Map({
	   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);

Leo

[tomgiam]

I'm not sure if this is an mh5 bug or I'm not using it correctly, but if I replace the ready: function code with this:

var pois = new Array();
var poi = map.createPoi(nokia.mh5.assetsPath + "img/categories/12.icon.mh5.basic.png", { longitude: 13.32, latitude: 52.32 });
pois.push(poi);
poi = map.createPoi(nokia.mh5.assetsPath + "img/categories/12.icon.mh5.basic.png", { longitude: 13.31, latitude: 52.31 });
pois.push(poi);
this.pois = pois;
this.box = pois;

I can reproduce the problem I'm seeing in my app.
When I create the pois like you do it works in my app.
The only problem is that now I need to figure out how to add a tag (a unique id) to the poi so that when I click on it I can recognize which one it is.

Thanks
Tom

[tomgiam]

Now I have the tag working as well, but I ran into a weird problem.
After I display all of the infobubbles, the map wants to keep them in the window (sort of centered), so when I try to pan the map, it pans back to them.

The small demo doesn't do that, so it must be something else in my app, but I don't know what it could be because it works fine when the pois are initially displayed, but then stops working after the infobubbles are displayed and even when the infobubbles are hidden and pois are displayed again.

Another thing it does is that the map "jitters" up and down by a few pixels on it's own. This is with Chrome while it's asking to allow the use of the computer's location.

Is there some setting that does this as a feature?

I do have code in the mapmoveend even (to draw crosshairs), but I turned that off and it didn't have any affect.

[ZieL]

Really a strange one. Can't help you with this one. Should be somewhere in your code.