I played with Bing Maps AJAX-based API and found it to be very easy to use after you know basic objects and you are able to use them. In this posting I will show you simple example about how to add pushpins to map and how to show coordinates of pushpins to users.
Our Bing Maps solution
Before we dig ourselves to pretty simple code let’s see the end result so we are motivated to read on. On this map I tracked down one of my walking paths when I want some good coffee and clear my mind. Click on image to see it at original size.
To add pushpin to map I just have to double-click on point where I want to add new pushpin. New row will be added to table on right automatically.
Here is the HTML for my simple map solution.
<div id="myMap" class="mapLayer"></div> <div id="routeLayer"> <table id="routeTable"> <tr> <th>LAT</th> <th>LON</th> </tr> </table> </div> <div style="clear:both;"> </div>That’s all about additional mark-up. Of course, I modified styles of default MVC application a little bit but it was nothing that is worth showing here. When my app is ready to use I will publish it to my Visual Studio experiments page at GitHub. You can hear more about my solution from my new blog that I will announce during next couple of months. Meanwhile let it be secret, okay? :)
Including API and loading map
NB! To get map loaded right now comment in second line of GetMap() method!
The first script reference loads Bing Maps API. GetMap() function initializes map with coordinates and zoom level. In the end of script block windows onload event is made to fire GetMap() method. This is how we get map work and this is how we show there what user should see when map is loaded.
Adding pushpins to map
In the GetMap() method we registered double-click event for our map. Double-click event is handled by AddPushpin() method that adds new pushpin to map.
Adding pushpin coordinates to table
To add pushpin coordinates to table I call AddPointToRoute() method in double-click handler. In this method I ask table from DOM, create new row and add columns to it with latitude and longitude values. The code is here.