DORIAN COLLIER
MAR 10
We were recently asked to add dynamic Bing maps into a website. "No problem" we said - having no clue of the heartache that lay ahead. After beating our head against the wall for a while we eventually figured out how to use javascript to add Bing maps into a webpage, and we thought we'd share.
WHY BING
Before we begin, let's explore why we might want to use Bing maps instead of Google maps.
- Bing has more accurate results (according to our client - a luxury real estate company)
- Bing maps looks better (again, according to our client)
- Bing maps have more features (you guessed it - our client said so)
THE PROBLEM
After a quick web search I thought that I would be able to use Bing's built in "Embed In A Webpage" feature. Wrong! I quickly discovered that it doesn't allow for dynamic addresses. In fact, the only to display dynamic addresses is to pass the latatude and longitude of the location. (click here to learn more about Bing's Build in Embed a Map feature)
Next I tried using the Bing Maps SDK to get the map. After a little time, and a little javascript, I got it to work. Yes!!...wait...NO!! This map displayed correctly, but it uses funky little PushPins created by some designer in the mid 90s. This will not do. We're modern web developers right? We create modern websites, and these fugly pushpins just will not do. Nothing but the best, right!??
THE SOLUTION
The answer is to use the Bing Maps SDK to get the longitute and latitude of the address, and then insert that into the code from Bing's Emed a Map feature. It works great!! We created the original solution in ASP.NET MVC, but I converted it to pure javascript so that you can use it on any platform.
Click here to view the demo
Click here to download the files
Enjoy!!