Bing Maps Drop pin button

Question

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>

rbrundritt rbrundritt · Accepted Answer · 2021-04-13T23:43:01

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://docs.microsoft.com/en-us/azure/azure-maps/

Bing Maps Drop pin button

1 Answers