I am looking at the Google Maps API MVC usage example. See

In the first simple example, I am unable to understand the marker.bindTo() call. The bindTo() is actually a method of the MVC object (See ). marker itself is not an MVC object but a property of an object that has a MVC object as its prototype. So how is this bindTo method associated as a property of marker?

May be something elementary that I am missing here!

Thanks for any explanation.

    /**
    * A distance widget that will display a circle that can be resized and will
    * provide the radius in km.
    *
    * @param {google.maps.Map} map The map on which to attach the distance widget.
    *
    * @constructor
    */
    function DistanceWidget(map) {
    this.set('map', map);
    this.set('position', map.getCenter());

    var marker = new google.maps.Marker({
    draggable: true,
    title: 'Move me!'
    });

    // Bind the marker map property to the DistanceWidget map property
    marker.bindTo('map', this);

    // Bind the marker position property to the DistanceWidget position
    // property
    marker.bindTo('position', this);
    }
    DistanceWidget.prototype = new google.maps.MVCObject();

I am looking at the Google Maps API MVC usage example. See https://developers.google./maps/articles/mvcfun?csw=1

In the first simple example, I am unable to understand the marker.bindTo() call. The bindTo() is actually a method of the MVC object (See https://developers.google./maps/documentation/javascript/reference#MVCObject). marker itself is not an MVC object but a property of an object that has a MVC object as its prototype. So how is this bindTo method associated as a property of marker?

May be something elementary that I am missing here!

Thanks for any explanation.

    /**
    * A distance widget that will display a circle that can be resized and will
    * provide the radius in km.
    *
    * @param {google.maps.Map} map The map on which to attach the distance widget.
    *
    * @constructor
    */
    function DistanceWidget(map) {
    this.set('map', map);
    this.set('position', map.getCenter());

    var marker = new google.maps.Marker({
    draggable: true,
    title: 'Move me!'
    });

    // Bind the marker map property to the DistanceWidget map property
    marker.bindTo('map', this);

    // Bind the marker position property to the DistanceWidget position
    // property
    marker.bindTo('position', this);
    }
    DistanceWidget.prototype = new google.maps.MVCObject();

• javascript
• model-view-controller
• google-maps-api-3
• google-maps-markers

2 Answers 2

The description may be found at the documentation of MVCObject:

The MVCObject constructor is guaranteed to be an empty function, and so you may inherit from MVCObject by simply writing MySubclass.prototype = new google.maps.MVCObject();

This technique will also be used for a google.maps.Marker-instance.

The constructor of a google.maps.Marker-instance is the constructor of a google.maps.MVCObject-instance, so a Marker will have the methods of a MVCObject

So the instance of a google.maps.Marker basically is an MVCObject extended with properties/methods of the google.maps.Marker-prototype

You are right bindTo is a MVC model object function. there is MVC model object is the object of map which is set from

DistanceWidget.prototype = new google.maps.MVCObject();

above line.

bindTo(key:string, target:MVCObject, targetKey?:string, noNotify?:boolean);

And as per documentation the second parameter of bondTo is a MVC object. and in the above first line of code there is pass the object of map by using the this keyword.

So this is the MVC object of map class which is called in the above line. you can see it in your code also.

marker.bindTo('map', this);

And DistanceWidget is a function which has the object of map class that why bondTo has the MVC Object which is correct.