none
Bing Maps AJAX v7 clickable info box RRS feed

  • Question

  • HI,

    I am trying to create an infobox with both an image and clickable link contained within it. Essential i want the infobox to have a link to a webpage. Here is the code i am using to get the infobox, i just can't work out how to get the content i want into the box.

     

    thanks for any help,

    var location = pin.getLocation();    
    		  var options = { 
     		  htmlContent: "<p style="background-color: white; width: 300px; height: 100px;"><strong>Title here -sub title</strong></p>
    		  <img class="alignnone" title="t" src="http://www.actionatlas.org/images/otc/icons/types/15/pa367D5EA2E5FBE8F816.png" alt="" width="55" height="55" /> some text here bla bal and a
    		  <a href="http://dev.amphibians.org">link here</a>",
              showPointer: true,
              showCloseButton: true,
              offset: new Microsoft.Maps.Point(0, pin.getHeight()), 
              zIndex: 999
    
    


    • Moved by Ricky_Brundritt Friday, March 9, 2012 6:13 PM (From:Bing Maps: Map Control and Web services Development)
    Friday, June 10, 2011 12:50 PM

Answers

  • You need to make sure that the sample is loading the Infobox module code which is a javascript file. Make sure that the url to the script file is correct. If it isn't then you won't get any infoboxes. 


    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Thursday, June 16, 2011 1:33 PM

All replies

  • I'm assuming that your issue is that you have custom HTML and you want it to show up inside the infobox with the arrow but instead your HTML is just ended up on top of the map. This seems to be something new in V7. I found it difficult to create nice custom Infoboxes with it so I create my own control which you can find here: http://www.bing.com/community/site_blogs/b/maps/archive/2011/06/07/developer-tip-modular-plug-in-for-customizable-infobox-control.aspx
    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Friday, June 10, 2011 1:30 PM
  • Thank you very much for your quick response, this looks like what i need. I am still however having a little issue in that when i try your examples the infobox won't appear. I am sure this is something i am doing wrong. I have downloaded your source code and tried the files there and copy and pasted into a notepad but still no infobox. Any suggestions. (FYI i am new to this so sorry for obvious questions).

    thanks.

    Friday, June 10, 2011 2:03 PM
  • Try below on http://www.bingmapsportal.com/ISDK/AjaxV7

    map.entities.clear();
    var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true};
    var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );   
    map.entities.push(defaultInfobox);
    defaultInfobox.setHtmlContent('<div id="infoboxText" style="background-color:White; border-style:solid;border-width:medium; border-color:DarkOrange; min-height:100px; position:absolute;top:0px; left:23px; width:240px;"> <img src="http://www.actionatlas.org/images/otc/icons/types/15/pa367D5EA2E5FBE8F816.png" /> some text here bla bal and a <a href="http://dev.amphibians.org">link here</a> </div>');

     


    HemantGoyal
    Tuesday, June 14, 2011 4:59 AM
  • Great that worked. Thanks very much for your help. Now i will try combining the two elements so that i have a pushpin with the clickable infobox that appears with a mouse hover. As soon as i can do that i will mark this as answered.

     

    thanks again for your help.

    Tuesday, June 14, 2011 6:24 PM
  • I now have two different codes but can't get them to fit together, the first from http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/8eec78d8-e211-4245-b47c-e83289755f2c and then the second from HemantGoyal. So how do i get these two to work together?

    var pin = new Microsoft.Maps.Pushpin(
      new Microsoft.Maps.Location(52.6, 1.26),
      { text: "1" } // This text will appear on the pushpin icon itself
      );
     pin.setInfoBox(new InfoBox("<strong>Pushpin #1</strong><hr />This is the description of Pushpin 1. <br/><a href="http://dev.amphibians.org">link here</a>"));
    


    with:

    var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true}; 
    var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );  
    map.entities.push(defaultInfobox);
    defaultInfobox.setHtmlContent('<div id="infoboxText" style="background-color:White; border-style:solid;border-width:medium; border-color:DarkOrange; min-height:100px; position:absolute;top:0px; left:23px; width:240px;"> <img src="http://www.actionatlas.org/images/otc/icons/types/15/pa367D5EA2E5FBE8F816.png" /> some text here bla bal and a <a href="http://dev.amphibians.org">link
    


    so the first set codes allows the infobox to appear and disappear but the second code has the type of content i need.

    thanks for the help.

     

     

    Wednesday, June 15, 2011 6:38 PM
  • Here is the code i am trying to use but i get nothing:

     var pin = new Microsoft.Maps.Pushpin(
      new Microsoft.Maps.Location(52.6, 1.26),
      { text: "1" } 
      );
     pin.setInfoBox(var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true}; 
    	var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );  
    	map.entities.push(defaultInfobox);
    	defaultInfobox.setHtmlContent('<div id="infoboxText" style="background-color:White; border-style:solid;border-width:medium; border-color:DarkOrange; min-height:100px; position:absolute;top:0px; left:23px; width:240px;"> <img src="http://www.actionatlas.org/images/otc/icons/types/15/pa367D5EA2E5FBE8F816.png" /> some text here bla bal and a <a href="http://dev.amphibians.org">link here</a> </div>'));
      map.entities.push(pin);
    


    Wednesday, June 15, 2011 7:44 PM
  • Note sure where the setInfoBox method you are using comes from, never seen that before. Not surprised it's not working are you normally do not declare variables inside of method calls. As I'm sure you found out by now, if you set the HTML content of the infobox the box and arrow disappear. If you want these remain and want an infobox that better supports custom HTML then take a look at this article: http://www.bing.com/community/site_blogs/b/maps/archive/2011/06/07/developer-tip-modular-plug-in-for-customizable-infobox-control.aspx
    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Thursday, June 16, 2011 12:11 PM
  • Thanks for the response, the setinfobox comes from http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/8eec78d8-e211-4245-b47c-e83289755f2c.

     

    I really like your infoboxes and would love to use them but am having an issue with them as stated above when reply to your last comment, here it is again

    "Thank you very much for your quick response, this looks like what i need. I am still however having a little issue in that when i try your examples the infobox won't appear. I am sure this is something i am doing wrong. I have downloaded your source code and tried the files there and copy and pasted into a notepad but still no infobox. Any suggestions. (FYI i am new to this so sorry for obvious questions)."

    thanks again

    Thursday, June 16, 2011 12:16 PM
  • What browser & version of browser are you using? Do the examples work for you as is? Are you running the files on their own or through Visual Studios?
    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Thursday, June 16, 2011 12:18 PM
  • I am using google chrome, latest version. But i think i might have an idea what i am doing wrong now. When i open basicexamples.html in the original folder it works fine but then if i move the file out to my maps folder the infobox doesn't appear anymore, so guessing it needs to call something that is in the original file. If this is the case how do i get this to work on wordpress website? I have a plugin that will allow me to add js. 
    Thursday, June 16, 2011 12:33 PM
  • You need to make sure that the sample is loading the Infobox module code which is a javascript file. Make sure that the url to the script file is correct. If it isn't then you won't get any infoboxes. 


    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Thursday, June 16, 2011 1:33 PM
  • Ok that makes sense do you have a guide on how to use this plugin with a wordpress website? i am thinking this might need to be another post.
    Thursday, June 16, 2011 3:49 PM