PDA

View Full Version : Ext.extend google.maps.Polyline does not proper initialize polyline object?



jasper_rcs
28 Oct 2010, 2:00 AM
Hi guys,

I've been breaking my head lately on the following piece of code:


<script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script language="javascript">
Ext.onReady(function() {
// Setup map #works
var map = new google.maps.Map(Ext.get('mapcontainer').dom, {
center: new google.maps.LatLng(47.9, 1.9),
zoom: 12,
mapTypeId: google.maps.MapTypeId.TERRAIN
});

// Setup polyline #works
var poly = new google.maps.Polyline({
strokeWeight: 3,
strokeColor: "#FF00FF",
map: map
});

// Add two latlngs to poly #works
var p1 = poly.getPath();
p1.insertAt(0, new google.maps.LatLng(47.89, 1.89));
p1.insertAt(1, new google.maps.LatLng(47.91, 1.91));





// Create route class extending poly (not sure if this is correct?)
Route = Ext.extend(google.maps.Polyline, {
extension: 'some extension',
constructor: function(options) {
Route.superclass.constructor.call(this, options);
}
});

// Setup route, same way as polyline
var route = new Route({
strokeWeight: 3,
strokeColor: "#FF00FF",
map: map
});

// Add two latlngs to route, same way as polyline
var p2 = route.getPath(); //ERROR: 'this.get("latLngs") is undefined'
p2.insertAt(0, new google.maps.LatLng(47.91, 1.91));
p2.insertAt(1, new google.maps.LatLng(47.89, 1.89));
});
</script>
<div id="mapcontainer" style="width:500px;height:500px"></div>
As you can see, its roughly devided in two pieces. The first part works, and just initializes a map, polyline and two latlngs on the polylines' path. The second part however, extending the polyline to a Route class, does not work. As soon as I try to call it's superclass method "getPath()" it yields an error:

'this.get("latLngs") is undefined'

I guess it has something to with the line "Route.superclass.constructor.call(this, options)" which somehow does not initialize the superclass properly.

Am i doing something wrong with scopes? I happen to have troubles with them. Any clues are more than welcome.

Animal
28 Oct 2010, 2:41 AM
Maybe they create their object in a weird way. I've seen patterns where they throw away the "this" and return an object. Like the constructor is more a factory function than a constructor.

If they do that , it will defeat any prototypal subclassing you do.

try




Route = Ext.extend(google.maps.Polyline, {
extension: 'some extension',
constructor: function(options) {
return Route.superclass.constructor.call(this, options);
}
});

jasper_rcs
28 Oct 2010, 2:52 AM
return Route.superclass.constructor.call(this, options);


Thanks for your input on this, but it doesn't solve the issue. I tried to find the source code for the Polyline class to see how it's constructed etc., because I do think you are right about the weird way of constructing their objects. However the source is not available, as far as I can see. Do you perhaps have other suggestions as to how it might be constructed and thus how I should extend it's class?

Cheers, Jasper

jasper_rcs
28 Oct 2010, 5:09 AM
Let me refrase the question, maybe this helps:



I want to extend a google.map.Marker class such that:
Waypoint extends Point extends google.map.Marker
Waypoint.ICON and Point.ICON both result in a (although different) google.map.MarkerImage.
Waypoint and Point both have registered event handlers for click/mouseover/mouseout, but with their own implementation for 'onClick', i.e.:



Point = {
constructor: function() {
google.maps.addListener(this, 'click', this.onClick(e));
},
onClick = function(e) { /*do waypoint thingies*/ },
onMouseover = function(e) {
//code for point & waypoint
this.setIcon(this.ICON_HOVER);
},
onMouseout = function(e) {
//code for point & waypoint
this.setIcon(this.ICON);
}
...
}

Waypoint = {
constructor: function() {
Waypoint.superclass.constructor.call(this);
}
onClick = function(e) { /*do waypoint thingies*/ }
...
}

Animal
28 Oct 2010, 5:35 AM
You'll have to uncompress their code and try to figure out what they're doing.

jasper_rcs
28 Oct 2010, 7:09 AM
Hi guys,

When i don't override the constructor, the object instantiation works. So far, so good. However i do need to add a few listeners to the new subclass object that's to be created:


Point = Ext.extend(google.map.Marker, {
constructor: function() {
google.maps.event.addListener(this, 'click', this.onClick);
},
onClick: function() {
//do some
}
});

Any thoughts on how i can add these listeners, without using the constructor and without calling an extra method after object instantiation (i.e.: var point = new Point(); point.initialize();) ?

winklerd
28 Oct 2010, 8:55 AM
Whenever you overload a constructor, it is a really good idea to call the original constructor.


MyClass = Ext.extend(TheirClass, {
constructor: function(config) {
MyClass.superclass.constructor.call(config);
//More code
}
}

deister
9 Sep 2011, 8:13 AM
You need to call explicitly their constructor:



Point = Ext.extend(google.maps.Marker, {
constructor : function(config) {

// custom code...
var coords = config.shapes[0].points[0];
var opts = { position: new google.maps.LatLng(coords[0], coords[1]) };
if (config.style && config.style.icon_url) {
opts.icon = config.style.icon_url
}

// call parent class constructor explicitly
google.maps.Marker.call(this, opts);

}
});