Knockout Binding Handler for Google Maps
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 actually ended up doing was using these two bits of code to update their database location records to include
these values when the data is returned. Having the latitude and longitude available on the frontend model made it easy to
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
I am a developer, consultant, entrepreneur and self described foosball champion. I like to blog occassionally about technology, code, trends and the community.