none
Map Marker Click Event - Data push to a list box RRS feed

  • Question

  • Hi, I am trying to create web functionality where:

    1) The user clicks a Bing map marker

    2) The marker click event takes the marker data (supplied by me ... Ex: A unique database record key/ID and address) and appends it to a web based listbox.  I am sure all of this can be done in Javascript.

    Can someone supply example code for this or a working page?

    Thanks

    Friday, June 13, 2014 12:45 PM

Answers

  • Here is a quick code sample:

    <!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">
    	var map;
    	
    	function GetMap()
    	{	
    		map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
    			credentials: "YOUR_BING_MAPS_KEY"
    		});
    		
    		var pin = new Microsoft.Maps.Pushpin(map.getCenter());
    		
    		pin.Metadata = { id : 1, address : "1234" };
    		
    		Microsoft.Maps.Events.addHandler(pin, 'click', showInfo); 
    		
    		map.entities.push(pin);
    	}
    	
    	function showInfo(e){
    		if(e.target.Metadata){
    			alert("id: " + e.target.Metadata.id + "\r\naddress: " + e.target.Metadata.address);
    			
    			//do what you like with the selected data.
    		}
    	}
    	</script>
    </head>
    <body onload="GetMap();">
    	<div id='myMap' style=';width:800px;height:600px;'></div>
    </body>
    </html>
    


    http://rbrundritt.wordpress.com

    Saturday, June 14, 2014 8:44 PM
  • No where in your code are you adding anything to the textarea. Try adding an ID to the textarea and then getting a reference to it using document.getElementById.

    http://rbrundritt.wordpress.com

    Sunday, June 15, 2014 5:28 PM
  • Highway signs are part of the base map layer. They can't be turned off.

    http://rbrundritt.wordpress.com

    Tuesday, June 17, 2014 7:59 AM

All replies

  • Here is a quick code sample:

    <!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">
    	var map;
    	
    	function GetMap()
    	{	
    		map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
    			credentials: "YOUR_BING_MAPS_KEY"
    		});
    		
    		var pin = new Microsoft.Maps.Pushpin(map.getCenter());
    		
    		pin.Metadata = { id : 1, address : "1234" };
    		
    		Microsoft.Maps.Events.addHandler(pin, 'click', showInfo); 
    		
    		map.entities.push(pin);
    	}
    	
    	function showInfo(e){
    		if(e.target.Metadata){
    			alert("id: " + e.target.Metadata.id + "\r\naddress: " + e.target.Metadata.address);
    			
    			//do what you like with the selected data.
    		}
    	}
    	</script>
    </head>
    <body onload="GetMap();">
    	<div id='myMap' style=';width:800px;height:600px;'></div>
    </body>
    </html>
    


    http://rbrundritt.wordpress.com

    Saturday, June 14, 2014 8:44 PM
  • I just threw a text area on the form for now.  I inserted the javascript to push the value to the text area and it is ignoring me.  Any ideas?

    <!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">
        var map;
        function GetMap()
        {    
            map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
                credentials: 'YOUR_BING_MAPS_KEY'
            });
            var pin = new Microsoft.Maps.Pushpin(map.getCenter());
            pin.Metadata = { id : 12345, address : "1 Main Street, Albemarle, NC 28001" };
            Microsoft.Maps.Events.addHandler(pin, 'click', showInfo);
            map.entities.push(pin);
        }
        
        function showInfo(e){
            if(e.target.Metadata){
                alert("id: " + e.target.Metadata.id + "\r\naddress: " + e.target.Metadata.address);
                
                // Add it to the list
                var myForm = document.addresses;  // Form Name
                var mySel = myForm.list;          // List Name
                var myOption;
                myOption = document.createElement("Option");
                myOption.text = e.target.Metadata.id;          
                myOption.value = e.target.Metadata.address;     
                mySel.add(myOption);
            }
        }
        </script>
    </head>
    <body onload="GetMap();">
        <div id='myMap' style='; width:89%;height:100%;'></div>
        <div style="display: inline; float:right;">
            <form name="addresses" method="POST" action="test.html">
                <p><textarea name="list" rows="33" name="S1" cols="20"></textarea></p>
                <p>
                    <input type="submit" value="Submit" name="B1">
                    <input type="reset" value="Reset" name="B2">
                </p>
            </form>
        </div>
    </body>
    </html>

    Sunday, June 15, 2014 2:47 PM
  • No where in your code are you adding anything to the textarea. Try adding an ID to the textarea and then getting a reference to it using document.getElementById.

    http://rbrundritt.wordpress.com

    Sunday, June 15, 2014 5:28 PM
  • Have it all working now.  Thanks friend.

    Do you know how to turn off layers like the HIGHWAY signs? 

    It's hard to see the smaller markers the client wants.

    Monday, June 16, 2014 7:56 PM
  • Highway signs are part of the base map layer. They can't be turned off.

    http://rbrundritt.wordpress.com

    Tuesday, June 17, 2014 7:59 AM
  • Ok, then is there a way to grayscale the map including the roads, signs so the markers will pop out

    Here is how I implement grayscale in Google Maps.  I need to do this in Bing maps.

    var mapStyleGrayLight = [{featureType:'water',elementType:'all',stylers:[{color: '#3b5998'},{saturation:-5},{lightness:54},{
    

    new GMaps({ div: '#gmap-markers', lat: 35.3703190, lng: -80.2074890, zoom: 6, scrollwheel: true, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: mapStyleGrayLight }).addMarkers([ {icon: 'assets/images/map-markers/16x16/blue-light.png', data: 1234, lat: 35.2262530, lng: -80.8443130, title: '', animation: google.maps.Animation.DROP}, {icon: 'assets/images/map-markers/16x16/red.png', data: 12345, lat: 36.1700250, lng: -86.7727043, title: '', animation: google.maps.Animation.DROP}, {icon: 'assets/images/map-markers/16x16/green.png', data: 123456, lat: 35.8365770, lng: -80.0590579, title: '', animation: google.maps.Animation.DROP}, {icon: 'assets/images/map-markers/16x16/factory.png', data: 1234567, lat: 32.7944437, lng: -79.9840978, title: '', animation: google.maps.Animation.DROP}, {icon: 'assets/images/map-markers/16x16/orange.png', data: 1234567, lat: 37.5430473, lng: -77.4444012, title: '', animation: google.maps.Animation.DROP}, {icon: 'assets/images/map-markers/16x16/gray.png', data: 1234567, lat: 35.4600374, lng: -79.1446002, title: '', animation: google.maps.Animation.DROP}, ]);

    Here is a LINK to the Google Map as an example:
    Google Grayscale Example


    • Edited by AvoliInc Tuesday, June 17, 2014 12:40 PM
    Tuesday, June 17, 2014 12:36 PM