×

Discussion Board

Results 1 to 2 of 2
  1. #1
    Registered User
    Join Date
    Aug 2012
    Posts
    1

    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

  2. #2
    Nokia Developer Expert
    Join Date
    Mar 2012
    Posts
    65

    Re: How to create multiple markers with info bubbles?

    Hi mikediaz,

    Here you can find how to create mutilple infoBubbles:
    http://api.maps.nokia.com/en/mobile/...foBubbles.html

    And here is an example how to do this. It also should answer your question about FOR loop.

    Make sure you use > 0.2.0 of MH5

    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);
    Br,
    Leo

Similar Threads

  1. Replies: 1
    Last Post: 2012-07-13, 12:44
  2. Map with Multiple Markers based on latitude and longitude
    By Ulala in forum [Archived] Maps API for Javascript
    Replies: 7
    Last Post: 2012-05-30, 12:47
  3. Multiple markers at this line
    By jpytu in forum Symbian
    Replies: 1
    Last Post: 2010-05-27, 03:35
  4. Multiple markers at this line with RThread
    By gigglie in forum Symbian C++
    Replies: 1
    Last Post: 2008-06-19, 08:57

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •