none
Need to show tooltip on mouseover of pushpins in bing map. RRS feed

  • Question

  • Hi,

    I am having some 25 pushpins on my maps, which i am getting from JSON. I have tooltip Id in JSON. Now i am showing all pushpins on my MAP. But i need to show tooltip for each pin mouseover. How can i do it?

     var pins = data.stores;
                    var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                             { credentials: "Bing - Map - ID", mapTypeId: Microsoft.Maps.MapTypeId.road, showMapTypeSelector: false, customizeOverlays: true, showBreadcrumb: true, enableSearchLogo: false });
    
                    Y.Array.each(pins, function (pin, index) {
                        var pinLocation = new Microsoft.Maps.Location(pin.lat, pin.long);
                        var NewPin = new Microsoft.Maps.Pushpin(pinLocation, { icon: 'images/Pushpin.png', width: 32, height: 32, text: pin.storeId, typeName: pin.Name });
                        NewPin.Title = pin.address;
                        NewPin.ID = pin.Name;
    
                        pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(pin.lat, pin.long), { visible: true });                  
    
                        Microsoft.Maps.Events.addHandler(NewPin, 'click', displayInfobox);                
    
                        Microsoft.Maps.Events.addHandler(map, 'click', hideInfobox);
    
                        map.entities.push(NewPin);
    
                        map.entities.push(pinInfobox);
                        hideInfobox(this);
    
                    });
    
                      function displayInfobox(e) {
                        if (e.targetType == 'pushpin') {
                            map.setView({ center: e.target.getLocation(), zoom: 12 });
                            pinInfobox.setLocation(e.target.getLocation());
                            pinInfobox.setOptions({ visible: true, title: e.target.ID, description: e.target.Title });
                            return false;
                        }
                    }
    
    
                    function hideInfobox(e) {
                        pinInfobox.setOptions({ visible: false });
                    }
                    map.setView({ center: new Microsoft.Maps.Location(12.936060, 77.625506), zoom: 12 });

    Tuesday, January 21, 2014 7:37 AM

Answers

  • There are a couple of options. The first is to use the method described here: http://social.msdn.microsoft.com/Forums/en-US/bd911d40-0790-4437-8073-34e39ebd03cb/is-it-possible-to-change-the-selected-pushpin-image-on-click?forum=bingmaps Except use the mouseover and mouseout events instead of click events.

    Another option if you just want to change the icon when hovering is to set the icon to point to a blank image and then use CSS and background images for the icons. You can set a CSS class name on a pushpin by passing it to the typeName property in the pushpin options.

    A final method is described here: http://rbrundritt.wordpress.com/2011/08/22/pushpin-tooltips/


    http://rbrundritt.wordpress.com

    Tuesday, January 21, 2014 11:57 AM
  • Haven't heard of YUI before. In any case the key method needed is to get items by CSS class name. You can do this using pure JavaScript. Here is a code sample:

    function getElementsByClassName(classname, node) {
    	if (node.getElementsByClassName)
    		return node.getElementsByClassName(classname);
    	else {
    		if(!node){
    			node = document.getElementsByTagName("body")[0];
    		}
    
    		var a = [];
    		var re = new RegExp('\\b' + classname + '\\b');
    		var els = node.getElementsByTagName("*");
    		for(var i=0,j=els.length; i<j; i++){
    			if(re.test(els[i].className)){
    				a.push(els[i]);
    			}
    		}
    
    		return a;
    	}
    }


    http://rbrundritt.wordpress.com

    Wednesday, January 22, 2014 2:36 PM
  • Hello Ricky,

    Got answer for the same and thanks for your support on this.

    Here is the code


    var NewPin = new Microsoft.Maps.Pushpin(pinLocation, { icon: 'images/Pushpin.png', width: 32, height: 32, text: pin.storeId, typeName: pin.Name }); 
    

    Changed to

    var NewPin = new Microsoft.Maps.Pushpin(pinLocation, { icon: 'images/Pushpin.png', width: 32, height: 32, text: pin.storeId, typeName: "pin" + index }); /*typeName: pin.Name*/
    
    

    Added this YUI Script

    Y.one('.pin' + index).setAttribute('title', pin.Name);

    That worked very well... :)


    Friday, January 24, 2014 10:22 AM

All replies

  • I had the same issue, need to change your addHandlers:

     Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displayInfobox);
                    Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', hideInfobox);

    function displayInfobox(e) {
                  if (e.targetType == 'pushpin') {
                      infobox.setLocation(e.target.getLocation());
                      infobox.setOptions({ visible: true, zIndex: 4, title: e.target.Id, description: e.target.Description });
                  }
              }  
    function hideInfobox(e) {
                  if (e.targetType == 'pushpin') {
                      infobox.setLocation(e.target.getLocation());
                      infobox.setOptions({ visible: false, title: e.target.Title, description: e.target.Description });
                  }
              }  


    WeDoMapping

    Tuesday, January 21, 2014 10:02 AM
  • Hi,

    Are you discussing about the Infobox or ToolTip? i am bit confused. I need to Show tooltip for Pushpins on mouseover on Pushpins. Let me know if my understanding is wrong. I need Tooltip for Pushpins on mouseOver.

    Thanks,

    P.Ramesh Kumar.

    Tuesday, January 21, 2014 10:40 AM
  • There are a couple of options. The first is to use the method described here: http://social.msdn.microsoft.com/Forums/en-US/bd911d40-0790-4437-8073-34e39ebd03cb/is-it-possible-to-change-the-selected-pushpin-image-on-click?forum=bingmaps Except use the mouseover and mouseout events instead of click events.

    Another option if you just want to change the icon when hovering is to set the icon to point to a blank image and then use CSS and background images for the icons. You can set a CSS class name on a pushpin by passing it to the typeName property in the pushpin options.

    A final method is described here: http://rbrundritt.wordpress.com/2011/08/22/pushpin-tooltips/


    http://rbrundritt.wordpress.com

    Tuesday, January 21, 2014 11:57 AM
  • Hi Ricky,

    I found this link before posting but the problem is, i am using YUI, JSON. And i am new to this. I tried my level best, but i am not able to make it out. It would be great if you help me.

    - P.Ramesh Kumar.

    Wednesday, January 22, 2014 1:52 PM
  • Haven't heard of YUI before. In any case the key method needed is to get items by CSS class name. You can do this using pure JavaScript. Here is a code sample:

    function getElementsByClassName(classname, node) {
    	if (node.getElementsByClassName)
    		return node.getElementsByClassName(classname);
    	else {
    		if(!node){
    			node = document.getElementsByTagName("body")[0];
    		}
    
    		var a = [];
    		var re = new RegExp('\\b' + classname + '\\b');
    		var els = node.getElementsByTagName("*");
    		for(var i=0,j=els.length; i<j; i++){
    			if(re.test(els[i].className)){
    				a.push(els[i]);
    			}
    		}
    
    		return a;
    	}
    }


    http://rbrundritt.wordpress.com

    Wednesday, January 22, 2014 2:36 PM
  • Hello Ricky,

    Got answer for the same and thanks for your support on this.

    Here is the code


    var NewPin = new Microsoft.Maps.Pushpin(pinLocation, { icon: 'images/Pushpin.png', width: 32, height: 32, text: pin.storeId, typeName: pin.Name }); 
    

    Changed to

    var NewPin = new Microsoft.Maps.Pushpin(pinLocation, { icon: 'images/Pushpin.png', width: 32, height: 32, text: pin.storeId, typeName: "pin" + index }); /*typeName: pin.Name*/
    
    

    Added this YUI Script

    Y.one('.pin' + index).setAttribute('title', pin.Name);

    That worked very well... :)


    Friday, January 24, 2014 10:22 AM