Search code examples
javascriptbing-mapspushpin

Bing maps pushpins


I want to draw a Bing map that takes latitude and longitude values and draws pushpins on the map. For the moment I'm just using some test data as I've only just started learning the API. The following piece of code draws a map but doesn't add any pushpins to it. I can't seem to see what I'm missing so any feedback is appreciated.

    <script>
        var getLocations = function(mapObj, latitude, longtitude)
        {
            for (var i = 0; i < latitude.length; i++)
            {
                var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude[i] + ", " + longtitude[i]), null);
                Microsoft.Maps.Events.addHandler(pushpin, 'mouseup', ZoomIn);
                mapObj.entities.push(pushpin);
            }
        }

        var lats = [26.273714, 19.890723, 15.961329];
        var longs = [84.902344, 84.624022, 80.1416];

        var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'myBingMapsKeyGoesHere'
        });

            map.entities.clear();
            getLocations(map, lats, longs);
            function ZoomIn(e) {
                if (e.targetType == 'pushpin') {
                    var location = e.target.getLocation();
                    map.setView({
                        zoom: 5,
                        center: location
                    });
                }
            }
     </script>

Solution

  • Simple fix. The issue is with how you are creating the location object for the pushpin. You are creating a string when you do this: latitude[i] + ", " + longtitude[i]

    Instead do this: new Microsoft.Maps.Location(latitude[i], longtitude[i]));