CODEWITHSUNDEEP
javascriptmapsbingpushpin
Poul Kristensen
Poul Kristensen

Reputation: 134

Placing PushPins on Bing Maps works fine for the first, then I cannot place anymore and my mouse stops working. But I cannot see anything wrong?

I'm trying to make a program where I can place pushpin's on a bing map with my mouse. But when running the program I can only place the first one, and then my mouse stops working. I cannot find anything wrong, so I would appreciate some advice.

Okay, it says I am to add more details. But the problem seems quite easy to understand: Ido something that should be legal, and which is demonstrated in Microsofts own demos, and still it does not work when I try it out. It is such a simple, basic thing, so I feel there must be something basic I just don't get. I am running it on a pretty new Pc, a HP. I plan to run it on another Pc later today. It seems to be something I do not understand on maps but this is actually some demos taken from Bings homepage, and they seem to work. Also, it seems to work the same way on Chrome, Firefox and edge.

Thanks

PoulK

<!DOCTYPE html>
<html>
    <style>
    html, body {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden; 
        font-family:'Segoe UI', Helvetica, Arial, Sans-Serif;
        position: relative;
    }
    #UserMenu {
        width : 20%;
        height : 40%;
        top : 50px;
        left : 50px;
        position: absolute;
        background-color: cyan;
        color: black;
        visibility: hidden; 
        padding: 5px;
        border: 1px solid blue;
        border-radius: 10px;
    }    
</style>
    <body>
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=&callback=loadMapScenario' async defer></script>
        <div id='myMap' style='width: 100vw; height: 100vh;'></div>
        
        <div id='UserMenu'>
            <button id="CreateNewPushPin" class="menuknap" onclick="CreateNewPushPin()">Place pushpin</button>
            <p id="LatLong" style="margin-left: 10px;margin-top: 0px;"> Latitude, Longitude </p>
        </div>

        <script type='text/javascript'>
            var gLoc;
            function UserMenu(l) {
                gLoc = l;               
                var o = document.getElementById('UserMenu').style;
                if (o.visibility == "visible")
                    o.visibility = "hidden"
                else  {
                    o.visibility = "visible";
                    var e = document.getElementById("LatLong");
                    e.innerHTML = "Latitude: " + l.latitude + ' Longitude: ' + l.longitude;
                }
            } // UserMenu()
            
            function CreateNewPushPin() {
                var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
                var pushpin = new Microsoft.Maps.Pushpin(gLoc, null);
                map.entities.push(pushpin);
                
                // Seems I can place as many pushpins as I'd like. Works fine, but the mouse still stops working when this function ends...
                var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(gLoc.latitude, gLoc.longitude - 0.1), { color: '#0f0'});
                map.entities.push(pushpin);
                
                var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(gLoc.latitude, gLoc.longitude + 0.1), { color: '#0f0'});
                map.entities.push(pushpin);
                
                document.getElementById('UserMenu').style.visibility = "hidden";
            } // CreateNewPushPin()
                
            function handleArgs(id, e) {
                if (id == 'mapRightclick') 
                    UserMenu(e.location);
            }

            function loadMapScenario() {
                var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
                Microsoft.Maps.Events.addHandler(map, 'rightclick', function (e) { handleArgs('mapRightclick', e); });
            }
        </script>
    </body>
</html>

Upvotes: 0

Views: 82

Answers (1)

Poul Kristensen
Poul Kristensen

Reputation: 134

Okay, I got the solution, thanks to Microsofts Ricky Brundritt. I am not supposed to allocate the same map more than once. If I allocate it once, there is no problem. Thats it.

Upvotes: 0

Related Questions