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 the returned latitude and longitude. I then updated the location c-sharp and corresponding javascript models to include these values when the data is returned. Having the latitude and longitude available on the frontend model made it easy to use the Google Maps Javascript API to create a map.

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!

Working Code

Additionally, here are a couple of working fiddles to demonstrate:

Single Point, Multiple Maps

Multiple Points, Single Map

© Testa Software 2020. All rights reserved.