CODEWITHSUNDEEP
javascriptbing-mapspushpin
williswin
williswin

Reputation: 133

Bing Maps Drop pin button

I am unable to get a drop pin button working on my bing map. I'm able to get a regular push pin on the map (it is auto created in the center) but I'd like to be able to move around and push a button to drop it in the center.

Thanks for any help.

function dropPin() {
              dropPushPin = new Microsoft.Maps.Pushpin(map.getCenter(), {
                                color: '#f00',
                                position: map.getCenter(),
                                map: map,
                                draggable: true
                            });
                            map.entities.push(dropPushPin);
                            
            }

<button onclick="dropPin()">Try it</button>

Upvotes: 1

Views: 209

Answers (1)

rbrundritt
rbrundritt

Reputation: 18013

The code you have will add a pin to the center of the map. If you are looking to animate the pin dropping onto the map, the Bing Maps control doesn't support animations well. One option if you have the icon for the pushpin is to animate that to the center of the map div using CSS and when the animation ends, add a pushpin to the map using your current code.

Alternatively, take a look at Azure Maps Web SDK which supports animations and has a full animation library: https://github.com/Azure-Samples/azure-maps-animations/tree/main/

Here are some other resources on Azure Maps:

https://azure.microsoft.com/en-us/services/azure-maps/

https://learn.microsoft.com/en-us/azure/azure-maps/

Upvotes: 0

Related Questions