Question

I have tried to find this online but without much luck. Stackoverflow also does not seem to have a similar question-solution. This is the closest comparison I found:

http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/2121de2422cf5053?pli=1

But this person’s live page doesn’t look like they made it very far (they only have Jan 2010 working on their map)…but same idea as what I want to do. I don’t know how to implement the given solution, either, since I will have hundreds of polylines and do not want to create a global variable for each one of them…

What I would like to do is “cluster” somehow a placemark with a set of polylines starting / ending from that marker. I will then have a link in a sidebar / menu off-map to this placemark, and I would like that when the user hovers / mouseovers the link to the placemark, the polylines associated with the placemark change their opacity (i.e. highlight). I think my questions are:

1. How can I reference a polyline that has already been created? How do I figure out its handle?
2. Can I somehow change a polyline’s properties using the fact that it “passes through” my marker? (i.e. aSel.onmouseover(“all polylines touching this object have opacity = 1”))
3. Any suggestions on how to modify the gmaps4rails.base.js file’s “create polyline” function to do this? https://github.com/apneadiving/Google-Maps-for-Rails/blob/master/app/assets/javascripts/gmaps4rails/gmaps4rails.base.js.coffee
   I have the feeling then my problem would become “how do I know the handler for the link / placemark when creating polylines?” if I try this method…

I am currently using Rails and the gmaps4rails plugin to try this, but am open to other elegant suggestions / solutions.

Thanks for your help!

==========================================

This is the code for what I’ve tried so far, following apneadiving’s suggestion below (I am not a Rails, javascript, Coffeescript, or Maps expert…):

In gmaps4rails.base.js, in the createSidebar function, added the second line:

aSel.onclick = @sidebar_element_handler(currentMap, marker_container.serviceObject, 'click')
aSel.onmouseover = @sidebar_highlight_paths(currentMap, marker_container.serviceObject)

Then defined:

sidebar_highlight_paths : (currentMap, marker) ->
  return () ->
    for polyline in Gmaps.map.polylines
      points = polyline.serviceObject.latLngs.getArray()[0].getArray()
      if (@sidebar_intersect(points, marker.position))
        @polyline.setOptions({strokeOpacity: 1.0})

sidebar_intersect : (a, b) ->
  [a, b] = [b, a] if a.length > b.length
  value for value in a when value in b

The intersect function is based off of the response here:
Coffeescript: Array element matches another array

Now I get no change in opacity and this error in my Chrome javascript console whenever I mouseover a link:

Uncaught TypeError: Object javascript:void(0); has no method ‘sidebar_intersect’
Gmaps4Rails.Gmaps4Rails.sidebar_highlight_pathsgmaps4rails.base.js:434

Resource interpreted as Image but transferred with MIME type text/html: “http://maps.googleapis.com/maps/gen_204?ev=api_viewport&cad=src:apiv3,ts:1336420051554“.

Line 434 (for the no method error above) is:

if @map_options.auto_adjust
  #from markers
  @extendBoundsWithMarkers()
->line 432<-
  #from polylines:
  for polyline in @polylines ->line 434<-
    polyline_points = polyline.serviceObject.latLngs.getArray()[0].getArray()
    for point in polyline_points
      @boundsObject.extend point

Which has nothing to do with my new function, sidebar_intersect, so I am confused! Also, I am ignoring the Resource Interpreted error right now since it seems much more common…

Thanks for your tips, aneadiving, and I appreciate anyone else who can shed some light on my new errors…

=============================

Okay, figured this out–thanks apneadiving for your tips! For future reference (if this actually helps anyone), I basically added these two lines (onmouseover and onmouseout) to createSidebar in gmaps4rails.base.js.coffee:

aSel.onclick = @sidebar_element_handler(currentMap, marker_container.serviceObject, 'click')
aSel.onmouseover = @sidebar_highlight_paths(currentMap, marker_container.serviceObject)
aSel.onmouseout = @sidebar_reset_paths(currentMap, marker_container.serviceObject)
li.appendChild(aSel)
ul.appendChild(li)

Then:

sidebar_highlight_paths : (currentMap, marker) ->
return () ->
  for polyline in Gmaps.map.polylines
     b = polyline.serviceObject.latLngs.getArray()[0].getArray()
     for latlng in b
       if (marker.position.equals(latlng))
         polyline.serviceObject.setOptions({strokeOpacity: 1})

sidebar_reset_paths : (currentMap, marker) ->
return () ->
  for polyline in Gmaps.map.polylines
    polyline.serviceObject.setOptions({strokeOpacity: 0.1}

Answer 1

Okay, figured this out–thanks apneadiving for your tips! For future reference (if this actually helps anyone), I basically added these two lines (onmouseover and onmouseout) to createSidebar in gmaps4rails.base.js.coffee:

aSel.onclick = @sidebar_element_handler(currentMap,marker_container.serviceObject, 'click')
aSel.onmouseover = @sidebar_highlight_paths(currentMap,marker_container.serviceObject)
aSel.onmouseout = @sidebar_reset_paths(currentMap,marker_container.serviceObject)
li.appendChild(aSel)
ul.appendChild(li)

Then:

sidebar_highlight_paths : (currentMap, marker) ->
return () ->
  for polyline in Gmaps.map.polylines
     b = polyline.serviceObject.latLngs.getArray()[0].getArray()
     for latlng in b
       if (marker.position.equals(latlng))
         polyline.serviceObject.setOptions({strokeOpacity: 1})

sidebar_reset_paths : (currentMap, marker) ->
return () ->
  for polyline in Gmaps.map.polylines
    polyline.serviceObject.setOptions({strokeOpacity: 0.1}