Hi again,
I'm having a second problem:

I'm using jQuery mobile, I have two pages, both of which contain an mh5 Map Widget.

First, I enter page A.
On the 'pagecreate' event, I create a map object and display it:
Code:
        var settings = {
            settingsButton: null,
            infoBubble: {
                content: ["title", "description"],
                right: "/mobile/css/images/okbtn.png",
                rightDelimiter: true,
                listeners: {
                    click: function(e) {
                        console.log(e);
                    },
                    rightclick: function() {
                        console.log('rightclick');
                    }
                }
            }
        };
        var map = new nokia.mh5.components.Map(settings);

        $('#mapContainerA').empty().append(map.root);
then I create some POI:
Code:
var poi = map.createPoi(options.poiImage, {
                    longitude: loc.longitude,
                    latitude: loc.latitude,
                    content: ["title", "description"],
                    name: place.street + " " + place.houseNo,
                    description: place.postcode + " " + place.place
                });
This works like a charm. Clicking on a POI opens the infoBubble, and clicking on the infoBubble triggers the events.


However, if I change to page B, I run into problems.
The code for this page is exactly the same except the ID for the map object - it's 'mapContainerB' instead of 'mapContainerA'.

Unfortunately, on this page, clicking on the Map does not open infoBubbles. And after opening the infoBubbles with
Code:
map.showInfoBubble(poi);
neither the click event nor the rightclick event do trigger.

Same scenario other way round:
Refresh the page, start with page B: page B works like a charm. Go to page A: click events broken. I can move around the map without problems, but infoBubbles have the same problems as described above.



As you might know, jQuery mobile does not reload the web page upon changing. It keeps the old page in the DOM and loads a new page additionally.
This might lead to all funny kinds of global variable collisions or object ID collisions.
For my own pages, I've made sure, this doesn't happen, but of course I can't do that for mh5.

Is there any function to completely eradicate all mh5-associated divs, canvas elements, javascript global variables, whatever else you might think of, to prevent that?

Or is the solution even much more easier and I just don't see it?