none
Using Bing Maps v8 with a List Display (sidebar) RRS feed

  • Question

  • Hoping our resident expert can help us out here.  I've seen this question asked multiple times but no viable response - or the code given have been outdated / deprecated. 

    I've put together some very basic code - one that would show a map and a simple list to the side.  The task is to create a hover effect on the list items that would pop up the appropriate info box and possibly change the color of the pushpin marker so that people know what location the list is referring to.

    The problem I'm having is finding the proper pushpin and info box - basically - I know something is missing from the showInfobox code - just not sure how to structure the missing elements.  I was considering looping through all the markers to find the appropriate one - but thought if you have a big result set - this would not be viable.  Also - still having that one issue identifying the correct pushpin when assigning an ID value to it.  Here's the code.

    		var mycredentials = 'YOUR BING MAPS CREDENTIALS';
    		var startingLatitude = latitude; // working latitude value
    		var startingLongitude = longitude; // working longitude value
    
    		var contentDiv = document.getElementById('NameOfYourListDIV');
    		var newLI = '';
    		
    		function loadMapScenario() {
    			map = new Microsoft.Maps.Map(document.getElementById('map_canvas'), {
    				credentials: mycredentials,
    				center: new Microsoft.Maps.Location(startingLatitude, startingLongitude),
    				zoom:13,
    			    mapTypeId: Microsoft.Maps.MapTypeId.road
        		});
    
    		} 
    
    		function getMapMarkers(method) {	
    			$.ajax({
    				type: "GET",
    				url: "http://get_some_data_from_somewhere", 
    				data: {	method: 'getProperties' },
    				cache:true,
    				dataType: "json", 
    				success: function(results, code) {
    					var foundproperties = results.length;
    
    						for (var i=0; i < foundproperties; i++) {
    								// the following creates a custom pushpin - very small circle
    								var mypushpin = createCirclePushpin(new Microsoft.Maps.Location(results[i].latitude, results[i].longitude), 7, 'rgba(85,36,72, 0.8)', '', 1);
    									mypushpin.metadata = {
    											title: results[i].propertyaddress,
    											description: results[i].listing_price,
    											myimage: results[i].listing_number,
    											Beds: results[i].beds, 
    											Baths: results[i].baths, 
    											urladdress: results[i].url_address.toLowerCase(),
    											Logo: results[i].idx_office
    										};
    									mypushpin.ID = i;
    		
    								var infoboxTemplate = '<div class="customInfobox"><div class="infoboxImage"><a href="http://somelocation/' + results[i].listing_number + '/' +  results[i].url_address.toLowerCase() + '/"><img src="http://www.somelocation.com/photos/properties/' + results[i].listing_number + '.jpg"></a></div><div class="title">' + results[i].listing_price + '<br><span>' + results[i].beds + ' Beds - ' + results[i].baths + ' Baths</span><br><div class="address">' + results[i].title + '</div> </div>';
    								var infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(results[i].latitude, results[i].longitude), {title: 'title', description: 'description', showCloseButton: true, visible: false });
    
    								infobox.setMap(map);
    								
    										Microsoft.Maps.Events.addHandler(mypushpin, 'click', function (mypushpin) {
    											var newinfoboxdata = '<div class="customInfobox"><div class="infoboxImage"><a href="http://somelocationurl.com/' + mypushpin.target.metadata.myimage + '/' +  mypushpin.target.metadata.urladdress.toLowerCase() + '/"><img src="http://somelocation.com/photos/properties/' + mypushpin.target.metadata.myimage + '.jpg"></a></div><div class="title">' + mypushpin.target.metadata.description + '<br><span>' + mypushpin.target.metadata.Beds + ' Beds - ' + mypushpin.target.metadata.Baths + ' Baths</span><br><div class="address">' + mypushpin.target.metadata.title + '</div> </div>';
    		
    											infobox.setOptions({
    												location: mypushpin.target.getLocation(),
    												title: mypushpin.target.metadata.title,
    												description: newinfoboxdata, visible: true 
    											});
    										});
    										
    									
    									map.entities.push(mypushpin);
    									pins.push(mypushpin);
    									
    									if (i < 30 ) {
    										newLI = newLI + '<li  onmouseover="showInfobox('+ i + ');" onmouseout="hideInfobox('+ i + ');" >Some Awesome information about this list item</li>';
    									}
    						}
    
    						document.getElementById('PropertiesFound').innerHTML = 'DISPLAYING ' + foundproperties + ' PROPERTIES';
    						contentDiv.innerHTML = newLI;
    						
    				} 
    			});			
    
    		function showInfobox(id) {
                  if (e.targetType == 'pushpin') {
                      infobox.setLocation(e.target.getLocation());
                      infobox.setOptions({ visible: true, title: e.target.Title, description: e.target.Description });
                  }
              }  
    
    		function hideInfobox(id) {
                  if (e.targetType == 'pushpin') {
                      infobox.setLocation(e.target.getLocation());
                      infobox.setOptions({ visible: false, title: e.target.Title, description: e.target.Description });
                  }
              }  


    Goliath Development



    • Edited by Goliath Development Thursday, December 15, 2016 7:18 PM Protecting client sensitive information
    Thursday, December 15, 2016 4:41 PM

Answers