locked
Pushpin mouseover to display infobox RRS feed

  • Question

  • Hi,

    I have a set of pushpins on the map and when i hover on the pushpin, it should display the infobox.

    pushpins are appearing on the map but when i mouseover, the infobox does not display.

      var boxes = new Array();
    function addPushpinsModified() {
    var pins = null;
    pins = new Microsoft.Maps.EntityCollection();
    var pinNumber = null;
      pinNumber = 0;
    
       var myGeocodes = new Array();
        var strGeo;
        strGeo = document.getElementById(hidfeild).value;
    
        if (strGeo.length > 0) {
        
            myGeocodes = strGeo.split(",");
            var limit = myGeocodes.length;
            var myLoc;
            //var ShowVehicleNo = document.getElementById(cbxShowVeh).checked;
            var ShowVehicleNo = true;
            map = new Microsoft.Maps.Map(document.getElementById('mapDiv'), { credentials: myCredentials });
    
            for (var i = 0; i < limit-1; i++) {
                //       var pushpinOptions = { icon: '/Images/TempImages/bus.jpeg', id: i, visible: true};
                var vehID = myGeocodes[i + 2];
                var CID = myGeocodes[i + 3];
                var myTime = myGeocodes[i + 4];
                var speed = myGeocodes[i + 5];
                var transpNm= myGeocodes[i + 6];
                
               //alert("Transp Name: " + transpNm+ " Current i : " + i);
               
                debugger;
               
                desp = "VehicleID : " + vehID + ', CID: ' + CID + ', Time: ' + myTime + ', <br/> Speed: ' + speed + ' mph';
               // var pushpinOptions = { text: desp, visible: true, textOffset: 'offset'}, icon: 'map_bus.png', width: 50, height: 50, draggable: true };
               
                var pushpinOptions = { text: pinNumber.toString(), visible: true, textOffset: 'offset', icon: '/Images/map_bus.png', width: 50, height: 50, draggable: true };
                
                myLoc = new Microsoft.Maps.Location(myGeocodes[i], myGeocodes[i + 1]);
    
                if (ShowVehicleNo) {
                    var pinText = vehID;
                    //var pinText = vehID + ", " + transpNm;
    
                    var pinInfoboxOptions = { width: 200, height: 25, description: pinText, visible: false, showPointer: false, showCloseButton: false, offset:0 };
                    var pinInfobox = new Microsoft.Maps.Infobox(myLoc, pinInfoboxOptions);
                    map.entities.push(pinInfobox);
                      
    
                }       
                
                  
              
                var pushpin = new Microsoft.Maps.Pushpin(myLoc, pushpinOptions); 
                pins.push(pushpin);
               // alert( " Pin Number : " + pinNumber + ", " + boxes[pinNumber]  );
                boxes[pinNumber] = pinInfobox;           
                var pushpinClick = Microsoft.Maps.Events.addHandler(pushpin, 'click', displayEventInfo);
    
                Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', pinMouseOver);
                
                 
                
                map.entities.push(pushpin);
               
                pinNumber += 1;
                i += 6;
                //        alert(i);
            }
            map.setView({ zoom: 12, center: myLoc });
        }
       
        }
    
    
    
            function pinMouseOver(e){
            if (e.targetType == 'pushpin') {
                var pin = e.target;
                if (pin != null){
                alert(pin.getText());
                boxes[pin.getText()].setOptions({ visible: true });
                }
                }
               
                }
       
            
    Thanks


    Tuesday, October 20, 2015 9:46 PM

Answers

  • I think the issue is that when you add your infobox references to the boxes array you are using the pinNumber value as a number, but when you try and get the infobox you are using pin.getText() which is a string. Try changing this line:

    boxes[pin.getText()].setOptions({ visible: true });

    to

    boxes[parseInt(pin.getText())].setOptions({ visible: true });

    that said, creating an infobox for each pushpin is inefficient. Take a look at the following blog post for a cleaner approach that reduces the number of DOM elements that get created (better for performance): https://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/


    http://rbrundritt.wordpress.com

    Tuesday, October 20, 2015 11:51 PM
  • There are few confusing bits in your code that may be causing errors before the code for the infobox is added and thus breaking that functionality. You spilt the strGeo string into an array and then loop through each piece and look at i+6 which is beyond the length of the array. This is likely causing an error. You are also setting the textOffset values of the pushpin like so: "textOffset: 'offset'" which is not valid. The value should be a Microsoft.Maps.Point object or not specified at all.

    Simplifying your code to the following shows that the mouse over does work:

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      
      <script type="text/javascript">
    	var map;
    	function GetMap()
    	{	
    		map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
    			credentials: "YOUR_BING_MAPS_KEY"
    		});
    		
    		addModifiedPushpins();
    	}
    	
    	 var pins = null, dataLayer, infobox;
    	function addModifiedPushpins() {
    		var pinNumber = null;		  
    	 
    		pinNumber = 0;
    		
    		dataLayer = new Microsoft.Maps.EntityCollection();
    		map.entities.push(dataLayer);
    		
    		var infoboxLayer = new Microsoft.Maps.EntityCollection();
    		map.entities.push(infoboxLayer);
    		
    		infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point(0, 20) });
    		infoboxLayer.push(infobox);
    
    		var myLoc;
    
    		for (var i = 0; i <= 1; i++) {
    			var pushpinOptions = { text: pinNumber.toString(), draggable: true };
    		   
    			myLoc = new Microsoft.Maps.Location(45, -110);
    
    			var pushpin = new Microsoft.Maps.Pushpin(myLoc, pushpinOptions); 
    			Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', mymouseOver);
    			
    			dataLayer.push(pushpin);
    		   
    			pinNumber += 1;
    			i += 6;           
    		}
    		
    		map.setView({ zoom: 12, center: myLoc });  
        }
        
        function mymouseOver(e) {
    		  if (e.targetType == 'pushpin') {
    			  infobox.setLocation(e.target.getLocation());
    			  infobox.setOptions({ visible: true,description: e.target.Description });
    		  }
    	  }  
    	</script>
    </head>
    <body onload="GetMap();">
    	<div id='myMap' style=";width:800px;height:600px;"></div>
    </body>
    </html>


    http://rbrundritt.wordpress.com



    Wednesday, October 21, 2015 5:17 PM
  • I'm using the same version of chrome and the code sample I posted works the same in Chrome as it does in IE and Firefox. Press 12 in your browsers to open the developer tools and check to see if there are any errors. You can also add breakpoints to your code and step through each line to find which line doesn't process the way you expected.

    http://rbrundritt.wordpress.com

    Wednesday, October 21, 2015 9:18 PM
  • You can try that. Here is a blog post on how to implement it: https://rbrundritt.wordpress.com/2014/03/07/fix-ie11-mouse-events-in-bing-maps-v7/

    http://rbrundritt.wordpress.com

    Tuesday, October 27, 2015 3:04 PM
  • There has to be an issue in your code as I'm able to get this to work 100% of the time on all browsers. The code sample I provided doesn't set the title or description of the infobox, so it you are seeing this, then you have modified the code. Take a look at the things you changed from the code I provided. Your error is likely somewhere in there.

    http://rbrundritt.wordpress.com

    Tuesday, October 27, 2015 5:41 PM

All replies

  • I think the issue is that when you add your infobox references to the boxes array you are using the pinNumber value as a number, but when you try and get the infobox you are using pin.getText() which is a string. Try changing this line:

    boxes[pin.getText()].setOptions({ visible: true });

    to

    boxes[parseInt(pin.getText())].setOptions({ visible: true });

    that said, creating an infobox for each pushpin is inefficient. Take a look at the following blog post for a cleaner approach that reduces the number of DOM elements that get created (better for performance): https://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/


    http://rbrundritt.wordpress.com

    Tuesday, October 20, 2015 11:51 PM
  • Richard,

    Tried int parse did not work.

    i  followed your way from the link and still does not show the infobox. 


     var pins = null, dataLayer, infobox;
    function addModifiedPushpins() {
    var pinNumber = null;
          
     
      pinNumber = 0;
    
       var myGeocodes = new Array();
        var strGeo;
        strGeo = document.getElementById(hidfeild).value;
    
        if (strGeo.length > 0) {
        
            myGeocodes = strGeo.split(",");
            var limit = myGeocodes.length;
            var myLoc;
            var ShowVehicleNo = true;
            map = new Microsoft.Maps.Map(document.getElementById('mapDiv'), { credentials: myCredentials });
            dataLayer = new Microsoft.Maps.EntityCollection();
             map.entities.push(dataLayer);
            var infoboxLayer = new Microsoft.Maps.EntityCollection();
              map.entities.push(infoboxLayer);
            infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point(0, 20) });
         
            infoboxLayer.push(infobox);
    
    
    
            for (var i = 0; i < limit-1; i++) {
                //       var pushpinOptions = { icon: '/Images/TempImages/bus.jpeg', id: i, visible: true};
                var vehID = myGeocodes[i + 2];
                var CID = myGeocodes[i + 3];
                var myTime = myGeocodes[i + 4];
                var speed = myGeocodes[i + 5];
                var driverNm = myGeocodes[i + 6];
        
                debugger;
               
                desp = "VehicleID : " + vehID + ', CID: ' + CID + ', Time: ' + myTime + ', <br/> Speed: ' + speed + ' mph';
               // var pushpinOptions = { text: desp, visible: true, textOffset: 'offset'}, icon: 'map_bus.png', width: 50, height: 50, draggable: true };
                var pushpinOptions = { text: pinNumber.toString(),  textOffset: 'offset', icon: '/Images/map_bus.png', width: 50, height: 50, draggable: true };
               
                myLoc = new Microsoft.Maps.Location(myGeocodes[i], myGeocodes[i + 1]);
    
                //alert(myLoc);       
                
               var pushpin = new Microsoft.Maps.Pushpin(myLoc, pushpinOptions); 
               Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', mymouseOver);
                
               dataLayer.push(pushpin);
               
    
               
                pinNumber += 1;
                i += 6;
               
            }
            map.setView({ zoom: 12, center: myLoc });
        }
       
        }
        
        function mymouseOver(e) {
        alert("In Mouseover");
                  if (e.targetType == 'pushpin') {
                      infobox.setLocation(e.target.getLocation());
                      infobox.setOptions({ visible: true,description: e.target.Description });
                  }
              }  

    Thanks in advance


    • Edited by rowter Wednesday, October 21, 2015 4:52 PM
    Wednesday, October 21, 2015 4:27 PM
  • There are few confusing bits in your code that may be causing errors before the code for the infobox is added and thus breaking that functionality. You spilt the strGeo string into an array and then loop through each piece and look at i+6 which is beyond the length of the array. This is likely causing an error. You are also setting the textOffset values of the pushpin like so: "textOffset: 'offset'" which is not valid. The value should be a Microsoft.Maps.Point object or not specified at all.

    Simplifying your code to the following shows that the mouse over does work:

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      
      <script type="text/javascript">
    	var map;
    	function GetMap()
    	{	
    		map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
    			credentials: "YOUR_BING_MAPS_KEY"
    		});
    		
    		addModifiedPushpins();
    	}
    	
    	 var pins = null, dataLayer, infobox;
    	function addModifiedPushpins() {
    		var pinNumber = null;		  
    	 
    		pinNumber = 0;
    		
    		dataLayer = new Microsoft.Maps.EntityCollection();
    		map.entities.push(dataLayer);
    		
    		var infoboxLayer = new Microsoft.Maps.EntityCollection();
    		map.entities.push(infoboxLayer);
    		
    		infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point(0, 20) });
    		infoboxLayer.push(infobox);
    
    		var myLoc;
    
    		for (var i = 0; i <= 1; i++) {
    			var pushpinOptions = { text: pinNumber.toString(), draggable: true };
    		   
    			myLoc = new Microsoft.Maps.Location(45, -110);
    
    			var pushpin = new Microsoft.Maps.Pushpin(myLoc, pushpinOptions); 
    			Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', mymouseOver);
    			
    			dataLayer.push(pushpin);
    		   
    			pinNumber += 1;
    			i += 6;           
    		}
    		
    		map.setView({ zoom: 12, center: myLoc });  
        }
        
        function mymouseOver(e) {
    		  if (e.targetType == 'pushpin') {
    			  infobox.setLocation(e.target.getLocation());
    			  infobox.setOptions({ visible: true,description: e.target.Description });
    		  }
    	  }  
    	</script>
    </head>
    <body onload="GetMap();">
    	<div id='myMap' style=";width:800px;height:600px;"></div>
    </body>
    </html>


    http://rbrundritt.wordpress.com



    Wednesday, October 21, 2015 5:17 PM
  • Ricky,

    Same code without any change works on internet explorer but not on chrome.

    On ie, the infobox comes up with the text, description and everything that i wanted.

    On chrome nothing happens on mouseover.

    chrome version: 46.0.2490.71 m

    ie version: 9.0.8112 

    Why are the 2 browsers having different behavior?


    Thanks

    Wednesday, October 21, 2015 8:17 PM
  • I'm using the same version of chrome and the code sample I posted works the same in Chrome as it does in IE and Firefox. Press 12 in your browsers to open the developer tools and check to see if there are any errors. You can also add breakpoints to your code and step through each line to find which line doesn't process the way you expected.

    http://rbrundritt.wordpress.com

    Wednesday, October 21, 2015 9:18 PM
  • Ricky,

    For a similar issue, there were suggestiosn to set pointer-events: all

    https://social.msdn.microsoft.com/Forums/en-US/90828af4-5e58-456a-ab37-9b8c5d0a9865/custom-pin-click-propagation-issue-in-firefox-and-chrome?forum=bingmapsajax

    Where should i set this?

    Thanks,

    Tuesday, October 27, 2015 2:53 PM
  • You can try that. Here is a blog post on how to implement it: https://rbrundritt.wordpress.com/2014/03/07/fix-ie11-mouse-events-in-bing-maps-v7/

    http://rbrundritt.wordpress.com

    Tuesday, October 27, 2015 3:04 PM
  • Ricky,

    this does not work. i don't see any errors when working with developer tools.

    If it has any issues in code, it should not work in internet explorer as well.

    Thanks

    Tuesday, October 27, 2015 4:10 PM
  • There has to be an issue in your code as I'm able to get this to work 100% of the time on all browsers. The code sample I provided doesn't set the title or description of the infobox, so it you are seeing this, then you have modified the code. Take a look at the things you changed from the code I provided. Your error is likely somewhere in there.

    http://rbrundritt.wordpress.com

    Tuesday, October 27, 2015 5:41 PM
  • if there is an error in code should it not fail on all browsers? why is it failing only on chrome and firefox?

    It is working on internet explorer.

    I will compare my code with yours and see.

    Thanks

    Tuesday, October 27, 2015 5:48 PM