KnockoutJS by Example

Placing markers on the map

The fourth feature is about placing markers on the map for the selected addresses. To implement this feature, we will:

• Update the address model to hold the marker
• Create a method to place a marker on the map
• Create a method to remove an existing marker
• Register subscribers to trigger removal of the existing markers when an address changes
• Update the module to add a marker to the map

Let's get started by updating the address model. Open the MapsApplication module and locate the AddressModel variable. Add an observable to this model to hold the marker:

/* generic model for address */
var AddressModel = function() {
  this.marker = ko.observable(); this.location = ko.observable(); this.streetNumber = ko.observable(); this.streetName ...