none
How can I add pin in run time that show description message in bingmap? RRS feed

  • Question

  • Kindly help me with code or study link. when user clicks some location in the map(run-time) , a pin should be created and that should ask for some description message to fill and save for the particular location. I'm coding only with JavaScript platform.
    Thursday, May 12, 2016 1:23 PM

Answers

  • Here are the steps you would go through to do this:

    1. Add a click event to the map.
    2. When the click event fires, open up a dialog or form to let the user enter in information.
    3. When information is entered, create a pushpin and add the information to the pushpin using the metadata property.
    4. You can then use this metadata if you want to populate an infobox when the pushpin is clicked.
    5. Optionally, you can save this data to a database, local storage or some other place.

    Here is a simple code sample that does this:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    
        <script type='text/javascript'
                src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
                async defer></script>
    
        <script type='text/javascript'>
            var map, infobox, currentPushpin;
    
            function GetMap()
            {
                map = new Microsoft.Maps.Map('#myMap', {
                    credentials: 'Your Bing Maps Key'
                });
    
                //Add a click event to the map.
                Microsoft.Maps.Events.addHandler(map, 'click', mapClicked);
    
                //Create an infobox, but hide it. We can reuse it for each pushpin.
                infobox = new Microsoft.Maps.Infobox(map.getCenter(), { visible: false });
                infobox.setMap(map);
            }
    
            function mapClicked(e) {
                //Create a pushpin.
                currentPushpin = new Microsoft.Maps.Pushpin(e.location);
    
                //Add a click event to the pushpin.
                Microsoft.Maps.Events.addHandler(currentPushpin, 'click', pushpinClicked);
    
                //Add the pushpin to the map.
                map.entities.push(currentPushpin);
    
                //Open up an input form here the user can enter in details for pushpin. 
                document.getElementById('inputForm').style.display = '';
            }
    
            function saveData() {
                //Get the data from form and add it to the pushpin
                currentPushpin.metadata = {
                    title: document.getElementById('titleTbx').value,
                    description: document.getElementById('descriptionTbx').value
                };
    
                //Optionally save this data somewhere (like a database or local storage).
                
                //Clear the fields in the form and then hide the form.
                document.getElementById('titleTbx').value = '';
                document.getElementById('descriptionTbx').value = '';
                document.getElementById('inputForm').style.display = 'none';
            }
    
            function pushpinClicked(e) {
                infobox.setOptions({
                    location: e.target.getLocation(),
                    title: e.target.metadata.title,
                    description: e.target.metadata.description,
                    visible: true
                });
            }
        </script>
        <style>
            #myMap {
                ;
                width:800px;
                height:600px;
            }
    
            #inputForm {
                ;
                top:200px;
                left:250px;
                padding:10px;
                background-color:white;
                border:1px solid #000;
                border-radius:10px;
            }
        </style>
    </head>
    <body>
        <div id="myMap" style=""></div>
    
        <div id="inputForm" style="display:none;">
            <table>
                <tr><td colspan="2"></td></tr>
                <tr><td>Title</td><td><input id="titleTbx" type="text" /></td></tr>
                <tr><td>Description</td><td><input id="descriptionTbx" type="text" /></td></tr>
                <tr><td colspan="2"><input type="button" value="Save" onclick="saveData()" style="float:right;"/></td></tr>
            </table>
        </div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Thursday, May 12, 2016 5:02 PM

All replies

  • Here are the steps you would go through to do this:

    1. Add a click event to the map.
    2. When the click event fires, open up a dialog or form to let the user enter in information.
    3. When information is entered, create a pushpin and add the information to the pushpin using the metadata property.
    4. You can then use this metadata if you want to populate an infobox when the pushpin is clicked.
    5. Optionally, you can save this data to a database, local storage or some other place.

    Here is a simple code sample that does this:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    
        <script type='text/javascript'
                src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
                async defer></script>
    
        <script type='text/javascript'>
            var map, infobox, currentPushpin;
    
            function GetMap()
            {
                map = new Microsoft.Maps.Map('#myMap', {
                    credentials: 'Your Bing Maps Key'
                });
    
                //Add a click event to the map.
                Microsoft.Maps.Events.addHandler(map, 'click', mapClicked);
    
                //Create an infobox, but hide it. We can reuse it for each pushpin.
                infobox = new Microsoft.Maps.Infobox(map.getCenter(), { visible: false });
                infobox.setMap(map);
            }
    
            function mapClicked(e) {
                //Create a pushpin.
                currentPushpin = new Microsoft.Maps.Pushpin(e.location);
    
                //Add a click event to the pushpin.
                Microsoft.Maps.Events.addHandler(currentPushpin, 'click', pushpinClicked);
    
                //Add the pushpin to the map.
                map.entities.push(currentPushpin);
    
                //Open up an input form here the user can enter in details for pushpin. 
                document.getElementById('inputForm').style.display = '';
            }
    
            function saveData() {
                //Get the data from form and add it to the pushpin
                currentPushpin.metadata = {
                    title: document.getElementById('titleTbx').value,
                    description: document.getElementById('descriptionTbx').value
                };
    
                //Optionally save this data somewhere (like a database or local storage).
                
                //Clear the fields in the form and then hide the form.
                document.getElementById('titleTbx').value = '';
                document.getElementById('descriptionTbx').value = '';
                document.getElementById('inputForm').style.display = 'none';
            }
    
            function pushpinClicked(e) {
                infobox.setOptions({
                    location: e.target.getLocation(),
                    title: e.target.metadata.title,
                    description: e.target.metadata.description,
                    visible: true
                });
            }
        </script>
        <style>
            #myMap {
                ;
                width:800px;
                height:600px;
            }
    
            #inputForm {
                ;
                top:200px;
                left:250px;
                padding:10px;
                background-color:white;
                border:1px solid #000;
                border-radius:10px;
            }
        </style>
    </head>
    <body>
        <div id="myMap" style=""></div>
    
        <div id="inputForm" style="display:none;">
            <table>
                <tr><td colspan="2"></td></tr>
                <tr><td>Title</td><td><input id="titleTbx" type="text" /></td></tr>
                <tr><td>Description</td><td><input id="descriptionTbx" type="text" /></td></tr>
                <tr><td colspan="2"><input type="button" value="Save" onclick="saveData()" style="float:right;"/></td></tr>
            </table>
        </div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Thursday, May 12, 2016 5:02 PM
  • Thanks a lot Ricky_Brundritt!! 
    Friday, May 13, 2016 11:08 AM