Discussion Board

Results 1 to 5 of 5
  1. #1
    Registered User
    Join Date
    Jul 2013
    Posts
    12

    Multiple Markers with infoBubbles

    I am trying to add infoBubbles to an array of markers but the code below does not work. The markers display OK. This construction works fine with single markers but I keep getting location and content errors. Is there an example somewhere which shows how to add multiple infoBalloons to an array of markers?

    Code:
     wikiMarker[i] = new nokia.maps.map.Marker(wikiLocation[i], {
    					icon: "AAA" + iconno + ".png",
    					text: "Position",
    					draggable: true,
    					anchor: new nokia.maps.util.Point(8,9)
    				});
    				
    					 map.objects.add(wikiMarker[i]);
    		
               wikiMarker[i].addListener("mouseover", function(event) {
    		   try {
    	      wikiText[i] = item + ": " + "Text";
                bubble = bubbleContainer.addBubble(wikiText[i], wikiLocation[i]);
    		   }
    		   catch(err)
    		   {
    		   }
            });
    Last edited by jasfox; 2013-07-22 at 11:43.

  2. #2
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    289

    Re: Multiple Markers with infoBubbles

    The Olympic Park Demo shows an example of what you are after.

    For a group of markers, place the markers in a container - in this case called markersContainer, and add an event listener to that container. You can also add additional properties to the markers themselves which can be read when an event has been fired. The core of the example can be seen below:

    Code:
    var bubbleHandle;
    
    var mapObjectsMouseHandler = function (evt) {
        var venueText=  evt.target.text; // or some custom property.
        var coordinate = evt.target.coordinate;
        var pos = map.pixelToGeo(evt.pageX + 10, evt.pageY);
    			
        if (!bubbleHandle) {
            bubbleHandle = infoBubbles.openBubble(
    		venueText, 
    		pos,
    		null,
    		true
    	);
        } else {
    	bubbleHandle.update(venueText, pos);
        }
    
        // Prevent event propagation e.g zooming in on click of marker
        evt.stopImmediatePropagation();
    }
    The listener is added as follows:
    Code:
    markersContainer.addListener("mousemove", mapObjectsMouseHandler);

    Since you are looking at mouseover, you might also want to look at the wiki example on tooltips. The Infobubble is more frequently used when a marker is clicked rather than hovered over.
    Last edited by jasfox; 2013-07-22 at 11:59.

  3. #3
    Registered User
    Join Date
    Jul 2013
    Posts
    12

    Re: Multiple Markers with infoBubbles

    I have tried with an without a container. This is the full code of the callback function I am using. I create the 20 markers as an array with the index i but i is equal to -1 when the bubble is added. The markers show without a problem but I cannot get the bubble to fire with the correct or any text. I am trying to add the bubble event immediately after the marker is added. Is there something simple that I am doing incorrectly?

    Code:
    function getWikipedia(jData)
    {
    
       // Get rid of current icons
       clearWikipedia();
    
       if (typeof jData.geonames == 'undefined')
       var html = '<b>' + 'No nearby Wikipedia entries or service unavailable' + '<b>';
       else
       {
    
          var geonames = jData.geonames;
          if (geonames.length == 0)
          {
             alert('No Wikipedia entries');
             return;
          }
          var html = '<b>' + "Wikipedia Entries: " + '</b>' + geonames.length;
    
          // wikiMarker = new Array(20);
          for (i = 0; i < geonames.length; i ++ )
          {
             geoname = geonames[i];
             // alert(i + " : " + geonames.length + " : " + geoname.summary);
    
             var item = i + 1;
    		 wikiLocation = new nokia.maps.geo.Coordinate(	geoname.lat, geoname.lng);
    		 wikiLocation2[i] = new nokia.maps.geo.Coordinate(	geoname.lat, geoname.lng);
    
             EW1 = "E";
             if (geoname.lng < 0)
             {
                EW1 = "W";
             }
    
             NS1 = "N";
             if (geoname.lat < 0)
             {
                NS1 = "S";
             }
    
             ptlat1 = Math.abs(geoname.lat);
             ptlon1 = Math.abs(geoname.lng);
    
             // Form text string
             html += '<br />' + '<b>' + item + ": " + geoname.title + '</b>' + " : " + geoname.summary;
             html += '<br />' + "Position: " + (Math.round(ptlon1 * 10000) / 10000) + EW1 + ', ' + (Math.round(ptlat1 * 10000) / 10000) + NS1 + ' : Distance: ' + Math.round(geoname.distance  * 100) / 100 + " km (" + Math.round(geoname.distance / 1.609344 * 100) / 100 + " miles) :  URL:" + ' <a href="http://'+geoname.wikipediaUrl+'" target="_blank">View Wikipedia</a>';
    
             wikiTitle = item + ": " + geoname.title + " : " + geoname.summary + " : " + "Position: " + (Math.round(ptlon1 * 10000) / 10000) + EW1 + ', ' + (Math.round(ptlat1 * 10000) / 10000) + NS1 + ' : Distance: ' + Math.round(geoname.distance  * 100) / 100 + " km (" + Math.round(geoname.distance / 1.609344 * 100) / 100 + " miles) :  See below for link";
    
         iconno = i + 1; 
    	 
    	  wikiMarker[i] = new nokia.maps.map.Marker(wikiLocation, {
    					icon: "http://www.sysmaps.co.uk/images/darkblue" + iconno + ".png",
    					text: "Wiki Position: " + i + " : Long: " + (Math.round(ptlon1 * 10000) / 10000) + EW1 + " : Lat: " + (Math.round(ptlat1 * 10000) / 10000) + NS1 + " : UK OS Grid: " + gpos +  " : Elevation: " + jalt + "m",
    					draggable: true,
    					anchor: new nokia.maps.util.Point(8,9)
    				});
    				
    		 map.objects.add(wikiMarker[i]);
      				 
    		 wikiMarker[i].addListener("mouseover", function(event) {
    		   try {
    	      wikiText[i] = item + ": " + geoname.title + " : " + geoname.summary;
              wikiText[i] = wikiText[i] + '<br/>' + "Position: " + (Math.round(ptlon1 * 10000) / 10000) + EW1 + ', ' + (Math.round(ptlat1 * 10000) / 10000) + NS1 + ' : Distance: ' + Math.round(geoname.distance  * 100) / 100 + " km (" + Math.round(geoname.distance / 1.609344 * 100) / 100 + " miles)" + '<br>' + "URL:" + ' <a href="http://'+geoname.wikipediaUrl+'" target="_blank">View Wikipedia</a>';
              alert(i + " : " + wikiLocation2[i] + " : " + wikiText[i]);
    		  bubble = bubbleContainer.addBubble(wikiText[i], wikiLocation);
    		   }
    		   catch(err)
    		   {
    		   }
            });
    	  
    	  }
       }
       
       document.getElementById('message5').innerHTML = html;
       aObj.removeScriptTag();
       
    }
    Last edited by jasfox; 2013-07-23 at 07:25.

  4. #4
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    289

    Re: Multiple Markers with infoBubbles

    I can't really analyse a snippet like that without context, but I have a few ideas which may help.
    • You are using the deprecated method - addBubble(), replace with openBubble()
    • I'm not sure what bubbleContainer is, but I'm guess it is an instance of the nokia.maps.map.component.InfoBubbles component, if this is the case have you initialised the component properly and added it to the map?
      Code:
      var infoBubbles = new nokia.maps.map.component.InfoBubbles();
      map.addComponent( infoBubbles);
    • Does your code fire any event? Is the alert you added to the handler displaying the data you expect? Sort out the mouseover first Rather than worrying about the infoBubble .
    • Once the event *is* firing, place a debugger statement onto the next line and then analyse the variables - e.g. is your bubbleContainer initialised, is it attached to the map?
      are the values of wikiText and wikiLocation what you expect? In my experience I would usually replace the former with some additional parameter associated with the marker e.g.
      html , and read and the latter with evt.target.coordinate
      Code:
      var marker = new nokia.maps.map.StandardMarker(map.center);
      marker.html = "Hi";
      marker.addListener(
      	"click", 
      	function (evt) { 
      		infoBubbles.openBubble(evt.target.html, evt.target.coordinate);
      	}
      );




    There is advantage in using a container, as its purpose is to logically group items together. This allows you to exploit event delegation re-using one event handler over multiple objects. The infobubble examples from the API explorer should help you as well.

  5. #5
    Registered User
    Join Date
    Jul 2013
    Posts
    12

    Re: Multiple Markers with infoBubbles

    Thanks for your help. I have now solved the problem with tooltips (www.sysmaps.co.uk/sysmaps_navteq.html).

Similar Threads

  1. Multiple Infobubbles on the Map at once.
    By harvo18 in forum [Archived] Maps API for Javascript
    Replies: 1
    Last Post: 2013-02-13, 17:28
  2. [moved] Mobile mh5 markers and infobubbles
    By pamepros in forum [Archived] MH5: Nokia Maps Framework for mobile HTML5
    Replies: 25
    Last Post: 2012-07-30, 17:43
  3. Removal of infobubbles with a markers container
    By amnesia7 in forum [Archived] Maps API for Javascript
    Replies: 2
    Last Post: 2012-06-28, 20:57
  4. Multiple markers at this line with RThread
    By gigglie in forum Symbian
    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
  •  
×