Google Maps v3 href link for polyline

Question

First post so bear with me.

I have a google map that displays polylines.

I create the polylines using the following method:

function createPoly(number,path, color, name) {

  var g = google.maps;
  var poly = new g.Polyline({
    path: path,
    strokeColor: color,
    strokeOpacity: 1,
    strokeWeight: 3
  });

  var label = new Label({ map: map }, poly);

  // Add mouse events to poly
  g.event.addListener(poly, "mouseover", function() {
   label.add_(name);
   poly.setOptions({strokeWeight: 6.0,strokeColor: "#0000FF",});
  });
  g.event.addListener(poly, "mouseout", function() {
   label.remove_();
   poly.setOptions({strokeWeight: 3.0,strokeColor: "#FF0000",});

  });
    g.event.addListener(poly, "click", function() {
    $('.LORDesc').empty();
    $('.LORDesc').append(name);
  });



  poly.setMap(map);
  return poly;
 }

The above code works, and every time I want to create a poly on my map I use:

var MyPoly = createPoly(0,SC001, "#FF0000", "SC001 <BR>Poly 1");

which works fine also.

My problem is I want to create Links to the side of my map and allow the user to hover over the link and have the poly change weight and color. Like it does when the user hovers over the poly on the map. Basically to identify the poly as they hover over the links.

I hope this makes sense.

Any help would be appreciated. I have tried various techniques on my own but have failed.

Regards,

Jonny

You just need to save some reference to your polyline objects in a wider, perhaps document-level scope, and leave yourself a "key" so that you can reference them with your links. — elrobis, Apr 15 '14 at 13:36

score 2 · Answer 1 · edited May 23 '17 at 12:20

You can listen for mouseover and mouseout events on link and trigger event for polyline object. For example:

var linkId = document.getElementById('polylink');

google.maps.event.addDomListener(linkId, 'mouseover', function(event) {
    google.maps.event.trigger(polyLine, 'mouseover', {
        stop: null,
        latLng: new google.maps.LatLng(48, 13.5),
        edge: 0,
        path: 0,
        vertex: 0
    });
});

google.maps.event.addDomListener(linkId, 'mouseout', function(event) {
    google.maps.event.trigger(polyLine, 'mouseout', {
        stop: null,
        latLng: new google.maps.LatLng(48, 13.5),
        edge: 0,
        path: 0,
        vertex: 0
    });
});

See complete example at jsbin.

If you don't provide the 3rd parameter for trigger method you will get the message error in console:

Uncaught TypeError: Cannot read property 'vertex' of undefined

mouseover and mouseout polyline event handler provides google.maps.PolyMouseEvent object. I made it like it was suggested for google.maps.MouseEvent object in question Simulate a click in a Google Map.

score 1 · Answer 2 · answered Feb 17 '19 at 10:33

1

I just add {} to third parameter of trigger function and this error don't show again.

Example: google.maps.event.trigger(yourPolygon, 'mouseover', {});

answered Feb 17 '19 at 10:33

Thai Ha

1,331
14
21

Google Maps v3 href link for polyline

2 Answers2