Knockout Binding Handlers, FTW!
Very recently a client request came in for some new ‘maps’ features to their existing site. Their site is a C#/.NET 4.0 backend with a knockout.js frontend. They have a series of pages that represent their locations. To accompany the location information they wanted to display an interactive map. Google maps makes this easy enough, but with knockout it was even easier!
First the data. To position a map we’re going to need latitude and longitude. Google makes this process super easy with their geo-coding services. We start with a model to represent our location…
Then create a simple static method to use Google’s geo-coding service to populate that model based on a street address that we already have for the location.
What I ended up doing was creating a Knockout binding handler to create the map.
Below is a simple example of how to actually use this binding handler…
(note you need to specify a height and width for your map)
Easy enough! 15 minutes of work!
Additionally, here are a couple of working fiddles to demonstrate:
Single Point, Multiple Maps
Multiple Points, Single Map