locked
[SOLVED] Pushpins and custom infoboxes and htmlContent RRS feed

  • Question

  • Hi,

    A variety of questions here.

    1. I have custom images for my pushpins, yet the width of the pushpin is cut off by a good margin. Is there some place where the width is defined? I tried to assign the width a la

     

    var NewPin = new Microsoft.Maps.Pushpin(pinLocation, {icon: cust1, width:55 });
    

     

    on a 33 px wide image, but that did not give me more of my image...

    2. When a user puts his mouse over a pushpin, how can I make the mouse pointer into a pointing finger? Right now, the default grabby hand doesn't change, however clicking does bring up the infobox.

    3. I've seen in a variety of places the ability to add an "htmlContent: " portion to the infoboxOptions, but I've tried that, and I still can't put any custom HTML in my infobox. I'd like to just be able to treat the infobox as a mini html page so I can add text to it as well as text that comes back in my JSON (which I use to set the latitude, longitude, and pin icon type, for example:

     

    var pinLocation = new Microsoft.Maps.Location(pin.latitude, pin.longitude);

     

    I've also seen this reply http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/8eec78d8-e211-4245-b47c-e83289755f2c, however the code places the infobox at the top-left of my map, and I can't figure out how to make it go beside the pushpin in question. As well, it seems the mouseover will only mouse-over 4 pushpins (give or take, it's finicky) before it stops working.

     

    4. Is there any way to have only one infobox open at a time? That is, if the user clicks on another pushpin, the infobox currently open disappears.

     

    Thanks for reading!

     

    Kevin





    • Edited by kevin-berry Tuesday, June 14, 2011 6:58 PM
    • Moved by Ricky_Brundritt Friday, March 9, 2012 6:13 PM (From:Bing Maps: Map Control and Web services Development)
    Monday, June 13, 2011 6:14 AM

Answers

  • About (2) how to change the cursor on the pushpin:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title></title>
      <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=getMap">
      </script>
      <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js"></script>
      <script type="text/javascript">
        var map = null;
    		var cursorStyle = null;
    
        function getMap() {
    
          // Initialize the map
          map = new Microsoft.Maps.Map($('#map').get(0), {
            credentials: "YOURKEY",
            center: new Microsoft.Maps.Location(47.5, 2.75),
            zoom: 4,
            mapTypeId: Microsoft.Maps.MapTypeId.road
          });
    
          var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.5, 2.75));
          map.entities.push(pin);  
    
    			Microsoft.Maps.Events.addHandler(pin, 'mouseover', changeCursor);
    			Microsoft.Maps.Events.addHandler(pin, 'mouseout', revertCursor);	
        }
    		
    		function changeCursor(e) { 
    			$('.MicrosoftMap').css({'cursor':'pointer'});
    		}
    		function revertCursor(e) { 
    			$('.MicrosoftMap').css({'cursor':'url("http://ecn.dev.virtualearth.net/mapcontrol/v7.0/cursors/grab.cur"), move'});	
    		}
    	</script>
    </head>
    <body onload="getMap();">
      <div id="map" style="position: relative; width: 800px; height: 600px;">
      </div>
    </body>
    </html>
    
    

    About (4) how to display only one infobox at a time:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.1.js"></script>
    
       <script type="text/javascript">
    
         var map = null; 
         var pinInfobox = null;    
    
         function GetMap()
         {
          // Initialize the map
          map = new Microsoft.Maps.Map($("#myMap").get(0), {credentials:"Bing Maps Key"}); 
    
          // Retrieve the location of the map center 
          var center = map.getCenter();
          
          // Add a pin to the center of the map
          var pin = new Microsoft.Maps.Pushpin(center, {text: '1'}); 
    			// Add a pin to the center of the map
          var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(48, 2), {text: '2'}); 
    			
          // Add a handler for the pushpin click event.
          Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
    			Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);
    			Microsoft.Maps.Events.addHandler(map, 'mousewheel', scrollMap);
    
          // Add the pushpin and info box to the map
          map.entities.push(pin);
    			map.entities.push(pin2);		
         }
    
    		var overInfoBox = false;
    		 
    		function displayInfobox(e)
    		{			
    			if(pinInfobox != null)
    			{
    				pinInfobox.setLocation(e.target.getLocation());
    				pinInfobox.setOptions({ location: e.target.getLocation(), visible: true });
    			} else 
    			{
    				pinInfobox = new Microsoft.Maps.Infobox(e.target.getLocation(), { visible: true });
    				map.entities.push(pinInfobox);
    			}
    		}
    		
    		function scrollMap(e) {
    			if(e.targetType == 'map')
    			{
    				if (overInfoBox) {
    					e.handled = true;
    				}
    			}
    		}
    		
    	</script>
      </head>
      <body onload="GetMap();">
       <div id='myMap' style="overflow: visible !important; position:relative; width:500px; height:500px;"></div>    
    </html>
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Monday, June 13, 2011 3:06 PM
  • Hello,

    1. Try to set the height and the width. You need both values for them to be used.
    2. You can use the mouseover event on the Pushpin element or you can use typeName property in the PushpinOptions and then use a CSS info to change the cursor.
    3. You will have to compose the HTML from your javascript code and then insert it as the value of htmlContent property.
      Another option would be to insert a DIV with a specific ID and then you can get the element (document.getElementById()) and insert what ever you want without using the htmlContent property. You can even use jQuery template or other features like it in order to easily get a common presentation for your box's content.
      If you need more control over your infobox, you should use Ricky's boxes: http://www.bing.com/community/site_blogs/b/maps/archive/2011/06/07/developer-tip-modular-plug-in-for-customizable-infobox-control.aspx
    4. I don't really understand your question. You can have multiple infobox and you can also have only one. All you will have to do is create infobox element depending on the click (or mouse over) event on your pushpin element.

    Hope this will help


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Monday, June 13, 2011 9:03 AM
  • Perfect! Thanks so much! One final question, rather a point of curiosity - what is the best practice when plotting pins from a database (to make the map loading efficient)?

    a) Initially, load the maximum number of pins we ever want to display at one time, say 800. If the user wants pins that are outside that set, make a new ajax call. Otherwise just hide/show pins as needed.

    b) Make an ajax call to get the desired pins (dependent, on say, a range of dates and a "type" checkbox, then when another ajax call is made to re-populate the map with pins, only remove pins that we no longer need, and keep the rest (rather than culling and reloading all of them).

    c) some other solution...?

     

    Anyway, here's the gist of my my updateResults function, which is dependent on results passed in from a jquery date range picker and some checkboxes. It takes that criteria, gets the results from my SQL database (via a php script which outputs a json string at the end), and plots the required pins.

     

     

    function updateResults() 
    {
    
    	//Clear all pins currently on the map...
    	//the more efficient option would be to only remove and add pins that aren't already there
    	//or perhaps load all pins initially (maximum, say, 800), and then hide/show
    	var pin_counter=0;
    	while(pin_counter<num_pins)
    	{
    		map.entities.clear();
    		pin_counter++;
    	}
    
    	var selectedItems = new Array();
    	$("input[@name='checkGroup[]']:checked").each(function() {selectedItems.push($(this).val());});
    	if(selectedItems.length>0)
    	{
    		$('#results').load('results.php', {from_date: fromDate.datepicker('getDate').toString(), 
    		to_date: toDate.datepicker('getDate').toString(), 
    		'checkGroup[]': selectedItems
    		});
    
    
    		$.post('GetLocations.php', { 	from_date: fromDate.datepicker('getDate').toString(),
    						to_date: toDate.datepicker('getDate').toString(),
     						'checkGroup[]': selectedItems
        	  		 }, 
    						function(data) 
     						{ 
    							// alert(data);
     							var pins = data.Locations;
    							$.each(pins, function (index, pin) 
    							{
    								var overInfoBox = false;
    								var infobox = 
    								"<div class=\"infobox\">" + "Latitude: " + pin.latitude + "<br>" + 
    "Longitude: " + pin.longitude + "<br>" + "</div>"; var infoboxOptions = { location: pinLocation, htmlContent: infobox, zIndex: 0, offset:new Microsoft.Maps.Point(-10,290), showPointer: true, visible: true }; function displayInfobox(e) { if(pinInfobox != null) { pinInfobox.setLocation(pinLocation); pinInfobox.setOptions(infoboxOptions); } else { pinInfobox = new Microsoft.Maps.Infobox(pinLocation, infoboxOptions); map.entities.push(pinInfobox); } } function scrollMap(e) { if(e.targetType == 'map') { if (overInfoBox) e.handled = true; } } function changeCursor(e) { $('.MicrosoftMap').css({'cursor':'pointer'}); } function revertCursor(e) { $('.MicrosoftMap').css({'cursor':'url("http://ecn.dev.virtualearth.net/mapcontrol/v7.0/cursors/grab.cur"), move'});}<br/><br/> var pinLocation = new Microsoft.Maps.Location(pin.latitude, pin.longitude); var NewPin = new Microsoft.Maps.Pushpin(pinLocation, {icon: cust_icon, width:52, height:34 }); Microsoft.Maps.Events.addHandler(NewPin, 'click', displayInfobox); Microsoft.Maps.Events.addHandler(NewPin, 'mouseover', changeCursor); Microsoft.Maps.Events.addHandler(NewPin, 'mouseout', revertCursor); Microsoft.Maps.Events.addHandler(map, 'mousewheel', scrollMap); map.entities.push(NewPin); num_pins++; }); }, "json"); } else { $('#results').load('results.php', { from_date: fromDate.datepicker('getDate').toString(), to_date: toDate.datepicker('getDate').toString(), 'checkGroup[]': 0 }); } }


     

     


    • Marked as answer by kevin-berry Monday, June 13, 2011 8:48 PM
    Monday, June 13, 2011 8:47 PM
  • Hello Kevin,

    From what I see, it appears that there is a default line-height css property set to 0 by default. So what I've done, I've set a div (don't forget to close the div markup btw) with a class on it and then I set the different properties so I can get full control over the content and the presentation of the infobox.

    Here is the content that might help you:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.1.js"></script>
    
    		<style>
    			.infoboxCustomContent { height:100px; width: 200px; background-color:White; line-height:12px; }
    		</style>
       <script type="text/javascript">
    
         var map = null; 
         var pinInfobox = null;    
    
         function GetMap()
         {
          // Initialize the map
          map = new Microsoft.Maps.Map($("#myMap").get(0), {credentials:"Bing Maps Key"}); 
    
          // Retrieve the location of the map center 
          var center = map.getCenter();
          
          // Add a pin to the center of the map
          var pin = new Microsoft.Maps.Pushpin(center, {text: '1'}); 
    			// Add a pin to the center of the map
          var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(48, 2), {text: '2'}); 
    			
          // Add a handler for the pushpin click event.
          Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
    			Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);
    			Microsoft.Maps.Events.addHandler(map, 'mousewheel', scrollMap);
    
          // Add the pushpin and info box to the map
          map.entities.push(pin);
    			map.entities.push(pin2);		
         }
    
    		var overInfoBox = false;
    		 
    		function displayInfobox(e)
    		{		
    			var content = "";
    			content += '<div class="infoboxCustomContent">';
    			content += '	My very long description <br />';
    			content += '	My very long description and htmlContent<br />';
    			content += '	My very long content with lorem ipsum?<br />';
    			content += '	Veni vedi vici blablabla :)<br />';
    			content += '</div>';
    				
    			if(pinInfobox != null)
    			{
    				pinInfobox.setLocation(e.target.getLocation());				
    				pinInfobox.setOptions({ location: e.target.getLocation(), visible: true, htmlContent: content });
    			} else 
    			{
    				pinInfobox = new Microsoft.Maps.Infobox(e.target.getLocation(), { visible: true, htmlContent: content });
    				map.entities.push(pinInfobox);
    			}
    		}
    		
    		function scrollMap(e) {
    			if(e.targetType == 'map')
    			{
    				if (overInfoBox) {
    					e.handled = true;
    				}
    			}
    		}
    		
    	</script>
      </head>
      <body onload="GetMap();">
       <div id='myMap' style="overflow: visible !important; position:relative; width:500px; height:500px;"></div>    
    </html>
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    • Marked as answer by kevin-berry Tuesday, June 14, 2011 6:57 PM
    Tuesday, June 14, 2011 3:10 PM

All replies

  • Hello,

    1. Try to set the height and the width. You need both values for them to be used.
    2. You can use the mouseover event on the Pushpin element or you can use typeName property in the PushpinOptions and then use a CSS info to change the cursor.
    3. You will have to compose the HTML from your javascript code and then insert it as the value of htmlContent property.
      Another option would be to insert a DIV with a specific ID and then you can get the element (document.getElementById()) and insert what ever you want without using the htmlContent property. You can even use jQuery template or other features like it in order to easily get a common presentation for your box's content.
      If you need more control over your infobox, you should use Ricky's boxes: http://www.bing.com/community/site_blogs/b/maps/archive/2011/06/07/developer-tip-modular-plug-in-for-customizable-infobox-control.aspx
    4. I don't really understand your question. You can have multiple infobox and you can also have only one. All you will have to do is create infobox element depending on the click (or mouse over) event on your pushpin element.

    Hope this will help


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Monday, June 13, 2011 9:03 AM
  • Thanks Nicolas, your answers were concise and helped me in a few spots.

    1. That worked! Thanks!

    2. This also worked, however what's the default bing grabby hand cursor called? The following code changes the cursor to what I want when it hovers over the pin, but when it goes back, I want the grabby hand cursor, not the pointer (default cursor) - I don't know what it's called though, and my google search wasn't too effective.

     

    function changeCursor(e)
    { document.getElementById("mapDiv").childNodes[0].style.cursor = "pointer";	}
    function revertCursor(e)
    { document.getElementById("mapDiv").childNodes[0].style.cursor = "default";	}
    
    Microsoft.Maps.Events.addHandler(NewPin, 'mouseover', changeCursor);
    Microsoft.Maps.Events.addHandler(NewPin, 'mouseout', revertCursor);	

     

    3. Yikes... I'm going to really have to play with this if I want something I like. The div idea was giving me trouble, and I can't see it looking like an infobox unless I make a graphic that goes inside the div as the background, and put text over-top.

    EDIT: On second thought, after making my own infobox image and learning how to make multi-line string in JS and figuring out that I could do "some text" + pin.some_attribute + "some more text"... this is going to be fun rather than a pain. :)

    4. What I mean is, with the default infoboxes, and the following code, I click on a pin, and an infobox comes up. I click on another pin, and another comes up. They all stay put until I hit the x button - again, this is the default infobox. I only want one infobox visible at a time, so if pushpin1 has infobox1 open, and user clicks pushpin2, infobox1 should disappear and infobox2 for pushpin2 should be visible only.

     

    function displayInfobox(e)
    { defaultInfobox.setOptions({ visible:true }); }
    
    var NewPin = new Microsoft.Maps.Pushpin(pinLocation, {icon: crime_type, width:52, height:34 });
    
    var infoboxOptions =
    {
    width :200,
    height :100,
    showCloseButton: true,
    zIndex: 0,
    offset:new Microsoft.Maps.Point(10,0),
    showPointer: true,
    title:pin.crime_classification,
    description: pin.start_date,
    visible: false
    };
                    
    var defaultInfobox = new Microsoft.Maps.Infobox(pinLocation, infoboxOptions);
    Microsoft.Maps.Events.addHandler(NewPin, 'click', displayInfobox);<br/>
    

    Thanks so much for your advice.

     

    Kevin


    Monday, June 13, 2011 11:02 AM
  • About (2) how to change the cursor on the pushpin:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title></title>
      <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=getMap">
      </script>
      <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js"></script>
      <script type="text/javascript">
        var map = null;
    		var cursorStyle = null;
    
        function getMap() {
    
          // Initialize the map
          map = new Microsoft.Maps.Map($('#map').get(0), {
            credentials: "YOURKEY",
            center: new Microsoft.Maps.Location(47.5, 2.75),
            zoom: 4,
            mapTypeId: Microsoft.Maps.MapTypeId.road
          });
    
          var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.5, 2.75));
          map.entities.push(pin);  
    
    			Microsoft.Maps.Events.addHandler(pin, 'mouseover', changeCursor);
    			Microsoft.Maps.Events.addHandler(pin, 'mouseout', revertCursor);	
        }
    		
    		function changeCursor(e) { 
    			$('.MicrosoftMap').css({'cursor':'pointer'});
    		}
    		function revertCursor(e) { 
    			$('.MicrosoftMap').css({'cursor':'url("http://ecn.dev.virtualearth.net/mapcontrol/v7.0/cursors/grab.cur"), move'});	
    		}
    	</script>
    </head>
    <body onload="getMap();">
      <div id="map" style="position: relative; width: 800px; height: 600px;">
      </div>
    </body>
    </html>
    
    

    About (4) how to display only one infobox at a time:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.1.js"></script>
    
       <script type="text/javascript">
    
         var map = null; 
         var pinInfobox = null;    
    
         function GetMap()
         {
          // Initialize the map
          map = new Microsoft.Maps.Map($("#myMap").get(0), {credentials:"Bing Maps Key"}); 
    
          // Retrieve the location of the map center 
          var center = map.getCenter();
          
          // Add a pin to the center of the map
          var pin = new Microsoft.Maps.Pushpin(center, {text: '1'}); 
    			// Add a pin to the center of the map
          var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(48, 2), {text: '2'}); 
    			
          // Add a handler for the pushpin click event.
          Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
    			Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);
    			Microsoft.Maps.Events.addHandler(map, 'mousewheel', scrollMap);
    
          // Add the pushpin and info box to the map
          map.entities.push(pin);
    			map.entities.push(pin2);		
         }
    
    		var overInfoBox = false;
    		 
    		function displayInfobox(e)
    		{			
    			if(pinInfobox != null)
    			{
    				pinInfobox.setLocation(e.target.getLocation());
    				pinInfobox.setOptions({ location: e.target.getLocation(), visible: true });
    			} else 
    			{
    				pinInfobox = new Microsoft.Maps.Infobox(e.target.getLocation(), { visible: true });
    				map.entities.push(pinInfobox);
    			}
    		}
    		
    		function scrollMap(e) {
    			if(e.targetType == 'map')
    			{
    				if (overInfoBox) {
    					e.handled = true;
    				}
    			}
    		}
    		
    	</script>
      </head>
      <body onload="GetMap();">
       <div id='myMap' style="overflow: visible !important; position:relative; width:500px; height:500px;"></div>    
    </html>
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Monday, June 13, 2011 3:06 PM
  • Perfect! Thanks so much! One final question, rather a point of curiosity - what is the best practice when plotting pins from a database (to make the map loading efficient)?

    a) Initially, load the maximum number of pins we ever want to display at one time, say 800. If the user wants pins that are outside that set, make a new ajax call. Otherwise just hide/show pins as needed.

    b) Make an ajax call to get the desired pins (dependent, on say, a range of dates and a "type" checkbox, then when another ajax call is made to re-populate the map with pins, only remove pins that we no longer need, and keep the rest (rather than culling and reloading all of them).

    c) some other solution...?

     

    Anyway, here's the gist of my my updateResults function, which is dependent on results passed in from a jquery date range picker and some checkboxes. It takes that criteria, gets the results from my SQL database (via a php script which outputs a json string at the end), and plots the required pins.

     

     

    function updateResults() 
    {
    
    	//Clear all pins currently on the map...
    	//the more efficient option would be to only remove and add pins that aren't already there
    	//or perhaps load all pins initially (maximum, say, 800), and then hide/show
    	var pin_counter=0;
    	while(pin_counter<num_pins)
    	{
    		map.entities.clear();
    		pin_counter++;
    	}
    
    	var selectedItems = new Array();
    	$("input[@name='checkGroup[]']:checked").each(function() {selectedItems.push($(this).val());});
    	if(selectedItems.length>0)
    	{
    		$('#results').load('results.php', {from_date: fromDate.datepicker('getDate').toString(), 
    		to_date: toDate.datepicker('getDate').toString(), 
    		'checkGroup[]': selectedItems
    		});
    
    
    		$.post('GetLocations.php', { 	from_date: fromDate.datepicker('getDate').toString(),
    						to_date: toDate.datepicker('getDate').toString(),
     						'checkGroup[]': selectedItems
        	  		 }, 
    						function(data) 
     						{ 
    							// alert(data);
     							var pins = data.Locations;
    							$.each(pins, function (index, pin) 
    							{
    								var overInfoBox = false;
    								var infobox = 
    								"<div class=\"infobox\">" + "Latitude: " + pin.latitude + "<br>" + 
    "Longitude: " + pin.longitude + "<br>" + "</div>"; var infoboxOptions = { location: pinLocation, htmlContent: infobox, zIndex: 0, offset:new Microsoft.Maps.Point(-10,290), showPointer: true, visible: true }; function displayInfobox(e) { if(pinInfobox != null) { pinInfobox.setLocation(pinLocation); pinInfobox.setOptions(infoboxOptions); } else { pinInfobox = new Microsoft.Maps.Infobox(pinLocation, infoboxOptions); map.entities.push(pinInfobox); } } function scrollMap(e) { if(e.targetType == 'map') { if (overInfoBox) e.handled = true; } } function changeCursor(e) { $('.MicrosoftMap').css({'cursor':'pointer'}); } function revertCursor(e) { $('.MicrosoftMap').css({'cursor':'url("http://ecn.dev.virtualearth.net/mapcontrol/v7.0/cursors/grab.cur"), move'});}<br/><br/> var pinLocation = new Microsoft.Maps.Location(pin.latitude, pin.longitude); var NewPin = new Microsoft.Maps.Pushpin(pinLocation, {icon: cust_icon, width:52, height:34 }); Microsoft.Maps.Events.addHandler(NewPin, 'click', displayInfobox); Microsoft.Maps.Events.addHandler(NewPin, 'mouseover', changeCursor); Microsoft.Maps.Events.addHandler(NewPin, 'mouseout', revertCursor); Microsoft.Maps.Events.addHandler(map, 'mousewheel', scrollMap); map.entities.push(NewPin); num_pins++; }); }, "json"); } else { $('#results').load('results.php', { from_date: fromDate.datepicker('getDate').toString(), to_date: toDate.datepicker('getDate').toString(), 'checkGroup[]': 0 }); } }


     

     


    • Marked as answer by kevin-berry Monday, June 13, 2011 8:48 PM
    Monday, June 13, 2011 8:47 PM
  • Hi again,

    So I'm getting some rather strange behaviour from my infobox, despite it looking really good otherwise. When the infobox comes up in FF4, all the text I put as my htmlContent (a javascript variable separated by '+' signs) ends up on one line. When I drag the map, I can sometimes get it to correct itself into a multiline block of text, but for the most part, it stays all on a single line. How the heck can I fix this so that it stays as a multiline block of text?

    The code that deals with the box:

    div.infobox
    {
    background-image: url(images/infobox/infobox-ur.png); 
    background-repeat: no-repeat;
    border: 0;
    height: 282px; 
    width: 396px;
    padding-top: 0px; 
    padding-right: 10px; 
    padding-bottom: 10px; 
    padding-left: 10px;
    }
    
    var overInfoBox = false;
    var infobox = "<div class=\"infobox\">A whole lot of text " +
              "went here after being processed " +
              "by my post() call to a php file " +
              "but it all appears on one line...";
    					
    var infoboxOptions = 
    {
    location: pinLocation,
    htmlContent: infobox,
    zIndex: 0, 
    offset:new Microsoft.Maps.Point(-10,290), 
    showPointer: true, 
    visible: true
    };
    		 
    function displayInfobox(e)
    {			
    if(pinInfobox != null)
    {
    pinInfobox.setLocation(pinLocation);
    pinInfobox.setOptions(infoboxOptions);
    } 
    else 
    {
    pinInfobox = new Microsoft.Maps.Infobox(pinLocation, infoboxOptions);
    map.entities.push(pinInfobox);
    }
    }
    


     

    Kevin

    Tuesday, June 14, 2011 5:59 AM
  • Hello Kevin,

    From what I see, it appears that there is a default line-height css property set to 0 by default. So what I've done, I've set a div (don't forget to close the div markup btw) with a class on it and then I set the different properties so I can get full control over the content and the presentation of the infobox.

    Here is the content that might help you:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.1.js"></script>
    
    		<style>
    			.infoboxCustomContent { height:100px; width: 200px; background-color:White; line-height:12px; }
    		</style>
       <script type="text/javascript">
    
         var map = null; 
         var pinInfobox = null;    
    
         function GetMap()
         {
          // Initialize the map
          map = new Microsoft.Maps.Map($("#myMap").get(0), {credentials:"Bing Maps Key"}); 
    
          // Retrieve the location of the map center 
          var center = map.getCenter();
          
          // Add a pin to the center of the map
          var pin = new Microsoft.Maps.Pushpin(center, {text: '1'}); 
    			// Add a pin to the center of the map
          var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(48, 2), {text: '2'}); 
    			
          // Add a handler for the pushpin click event.
          Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
    			Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);
    			Microsoft.Maps.Events.addHandler(map, 'mousewheel', scrollMap);
    
          // Add the pushpin and info box to the map
          map.entities.push(pin);
    			map.entities.push(pin2);		
         }
    
    		var overInfoBox = false;
    		 
    		function displayInfobox(e)
    		{		
    			var content = "";
    			content += '<div class="infoboxCustomContent">';
    			content += '	My very long description <br />';
    			content += '	My very long description and htmlContent<br />';
    			content += '	My very long content with lorem ipsum?<br />';
    			content += '	Veni vedi vici blablabla :)<br />';
    			content += '</div>';
    				
    			if(pinInfobox != null)
    			{
    				pinInfobox.setLocation(e.target.getLocation());				
    				pinInfobox.setOptions({ location: e.target.getLocation(), visible: true, htmlContent: content });
    			} else 
    			{
    				pinInfobox = new Microsoft.Maps.Infobox(e.target.getLocation(), { visible: true, htmlContent: content });
    				map.entities.push(pinInfobox);
    			}
    		}
    		
    		function scrollMap(e) {
    			if(e.targetType == 'map')
    			{
    				if (overInfoBox) {
    					e.handled = true;
    				}
    			}
    		}
    		
    	</script>
      </head>
      <body onload="GetMap();">
       <div id='myMap' style="overflow: visible !important; position:relative; width:500px; height:500px;"></div>    
    </html>
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    • Marked as answer by kevin-berry Tuesday, June 14, 2011 6:57 PM
    Tuesday, June 14, 2011 3:10 PM
  • Excellent, line-height did the trick!
    Tuesday, June 14, 2011 6:57 PM