Skip to content Skip to sidebar Skip to footer
Home / Bing Maps / Javascript / Pins

Draggable And Clickable Pushpin In Javascript Bing Map

Post a Comment
Does anyone get the way to put draggable pushpins through the bing api using javascript? Its is even possible to have that functionality through the api (javascript)?

Solution 1:

The answer is there! http://www.bingmapsportal.com/ISDK/AjaxV7#Pushpins13

var pushpinOptions = {icon: 'poi_custom.png', draggable:true}; 
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions); 
pushpindragend= Microsoft.Maps.Events.addHandler(pushpin, 'dragend', enddragDetails);  
map.entities.push(pushpin);

Solution 2:

Yet another solution with draggable pushpin and draggable infobox

<!DOCTYPE html><html><head><title>pushpinDragEventsHTML</title><metahttp-equiv='Content-Type'content='text/html; charset=utf-8'/><styletype='text/css'>body{margin:0;padding:0;overflow:hidden;font-family:'Segoe UI',Helvetica,Arial,Sans-Serif}</style></head><body><divid='printoutPanel'></div><divid='myMap'style='width: 100vw; height: 100vh;'></div><scripttype='text/javascript'>functionloadMapScenario() {
        var map = newMicrosoft.Maps.Map(document.getElementById('myMap'), {});
        var center   = map.getCenter();
        varEvents   = Microsoft.Maps.Events;
        varLocation = Microsoft.Maps.Location;
        varPushpin  = Microsoft.Maps.Pushpin;
        var pins = [
                newPushpin(newLocation(center.latitude, center.longitude), { color: '#00F', draggable: true }),
            ];
        
             // Setting up the pin_coordinates printout paneldocument.getElementById('printoutPanel').innerHTML = '<div id="pushpinDragEnd">' + center +'</div>';      
            
            var infobox = newMicrosoft.Maps.Infobox(
                center, { 
                title: 'Map Center',
                description: 'Initail Lable' });
                infobox.setMap(map);
            
            
            map.entities.push(pins);

            // Binding the events for the pinEvents.addHandler(pins[0], 'dragend', function () {  displayPinCoordinates('pushpinDragEnd'); });


            functiondisplayPinCoordinates(id) {
                    infobox.setMap(null); // delete infoboxvar pin_location =pins[0].getLocation();
                
                    document.getElementById(id).innerHTML =pin_location;   // display pin coordinates in printout panel// display dragged infobox
                    infobox = newMicrosoft.Maps.Infobox(
                        pin_location, { 
                        title: 'Pin Center',
                        description: 'Dragable Lable' });
                        infobox.setMap(map);
            }
        
        }


    </script><scripttype='text/javascript'src='https://www.bing.com/api/maps/mapcontrol?key=yourBingMapsKey&callback=loadMapScenario'asyncdefer></script></body></html>

Post a Comment for "Draggable And Clickable Pushpin In Javascript Bing Map"