CODEWITHSUNDEEP
google-maps-api-3event-handlingmouseeventpolylineextending
user2639494
user2639494

Reputation: 21

Extend polyline and handle mouse event

I write JS app where I draw a lot of polylines using array of points, but in avery point I have some additional properties in this point (GPS data, speed etc).

I want to show these additional props onmouseover or onmouseclick event.

I have two ways:

  1. use the standard polylines and event handler. But in this case I can't to determine additional properties for start point of this polyline cause I can't to save these props in polyline properties. There is one solution - save in array additional properties and try to find them by LatLng of first point of the polyline, but it's too slow I guess..

  2. extend polyline and save additional properties in new Object, but I can't to extend mouse events :(

To extend polyline I use this code:

function myPolyline(prop, opts){
    this.prop = prop;
    this.Polyline = new google.maps.Polyline(opts);
}

myPolyline.prototype.setMap = function(map) {
    return this.Polyline.setMap(map);
}

myPolyline.prototype.getPath = function() {
    return this.Polyline.getPath();
}

myPolyline.prototype.addListener= function(prop) {
    return this.Polyline.addListener();
} 

myPolyline.prototype.getProp= function() {
    return this.prop;
}

myPolyline.prototype.setProp= function(prop) {
    return this.prop = prop;
}

and create new object in for loop (i - index of current point in array of points) like that:

var polyline_opts   = {
    path: line_points,
    strokeColor: color,
    geodesic: true,
    strokeOpacity: 0.5,
    strokeWeight: 4,
    icons: [
        {
        icon:   lineSymbol,
        offset: '25px',
        repeat: '50px'
        }
    ],              
    map: map
};

var add_prop    = {
    id:  i,
    device_id: device_id
};

... 

devices_properties[device_id].tracks[(i-1)] = new myPolyline(add_prop, polyline_opts);

Where:

After that I set event handler like that:

var tmp = devices_properties[device_id].tracks[(i-1)];
google.maps.event.addListener(tmp.Polyline, 'click', function(e) {
...
console.log(tmp.prop.id);
...
}

But in this case I always get the same id in console..

When I use 

google.maps.event.addListener(devices_properties[device_id].tracks[(i-1)].Polyline, 'click', function(e) {
...
console.log(???); // How to get parent of polyline fired the event?
...
}

I don't know how to get parent of polyline fired the event?

Upvotes: 1

Views: 1196

Answers (1)

user2639494
user2639494

Reputation: 21

I answer my own question - It's done, I've just have some troubles with using "for" instead "$.each" :)

Before I use:

for ( i = 1; i < devices_properties[device_id].history_points.length; i++ ) {
    ...
    create myPolyline
    ...
}

and it's doesn't work - created one event handle.

After:

$.each(devices_properties[device_id].history_points, function(i, tmp){
    ...
    create myPolyline ()
    ...
}

and it works - create a lot of event handlers.

To handle event I use this:

google.maps.event.addListener(c_polyline.Polyline, 'mouseover', function(e) {
    var prop = c_polyline.getProp();
    ...
    console.log(prop.id, prop.device_id);
}

Upvotes: 1

Related Questions