Google maps API v3: Adding polyline conflicts with multimarker

Question

I am using Multimarker to add markers with labels to a custom google map. The div containing the label calls a function with onclick. But if I add a polyline to the map, the onclick stops working. I can not figure out why...

This is the code for adding a marker:

var fastMarkers = [];
var myLatlng = new google.maps.LatLng(70,-101);
var marker = new com.redfin.FastMarker(/*id*/1, myLatlng, ["<div onclick='test()'><span>mylabel</span></div>"], null);
fastMarkers.push(marker);                
new com.redfin.FastMarkerOverlay(map, fastMarkers);

This is the polyline:

 var linepathcoords = [
    new google.maps.LatLng(71, -103),
    new google.maps.LatLng(73, -107),
 ];

var linepath=new google.maps.Polyline({
  path:linepathcoords,
  strokeColor:"#ff0000",
  strokeOpacity:0.9,
  strokeWeight:2
});
//This next line is what's causing the onclick in the marker to stop working. Why?
linepath.setMap(map);
};

And this is the code for Multimarker:

/*
 Copyright 2010 Redfin Corporation
 Licensed under the Apache License, Version 2.0: 
 http://www.apache.org/licenses/LICENSE-2.0 
 */

com = {redfin: {}};

/* Construct a new FastMarkerOverlay layer for a V2 map
 * @constructor
 * @param {google.maps.Map} map the map to which we'll add markers
 * @param {Array.<com.redfin.FastMarker>} markers the array of markers to display on the map
 */
com.redfin.FastMarkerOverlay = function(map, markers) {
  this.setMap(map);
  this._markers = markers;
}

com.redfin.FastMarkerOverlay.prototype = new google.maps.OverlayView();

com.redfin.FastMarkerOverlay.prototype.onAdd = function() {
  this._div = document.createElement("div");
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(this._div);
}

/* Copy our data to a new FastMarkerOverlay
 * @param {google.maps.Map} map the map to which the copy will add markers
 * @return {FastMarkerOverlay} Copy of FastMarkerOverlay
 */
com.redfin.FastMarkerOverlay.prototype.copy = function(map) {
  var markers = this._markers;
  var i = markers.length;
  var markersCopy = new Array(i);
  while (i--) {
    markersCopy[i] = markers[i].copy();
  }
  return new com.redfin.FastMarkerOverlay(map, markers);
};

/* Draw the FastMarkerOverlay based on the current projection and zoom level; called by Gmaps */
com.redfin.FastMarkerOverlay.prototype.draw = function() {
  // if already removed, never draw
  if (!this._div) return;

  // Size and position the overlay. We use a southwest and northeast
  // position of the overlay to peg it to the correct position and size.
  // We need to retrieve the projection from this overlay to do this.
  var overlayProjection = this.getProjection();

  // DGF use fastloop http://ajaxian.com/archives/fast-loops-in-js
  // JD Create string with all the markers
  var i = this._markers.length;
  var textArray = [];
  while (i--) {
    var marker = this._markers[i];
    var divPixel = overlayProjection.fromLatLngToDivPixel(marker._latLng);
    textArray.push("<div style='position:absolute; left:");
    textArray.push(divPixel.x + marker._leftOffset);
    textArray.push("px; top:");
    textArray.push(divPixel.y + marker._topOffset);
    textArray.push("px;")
    if (marker._zIndex) {
      textArray.push(" z-index:");
      textArray.push(marker._zIndex);
      textArray.push(";");
    }
    textArray.push("'");
    if (marker._divClassName) {
      textArray.push(" class='");
      textArray.push(marker._divClassName);
      textArray.push("'");
    }
    textArray.push(" id='");
    textArray.push(marker._id);
    textArray.push("' >");

    var markerHtmlArray = marker._htmlTextArray;
    var j = markerHtmlArray.length;
    var currentSize = textArray.length;
    while (j--) {
      textArray[j + currentSize] = markerHtmlArray[j];
    }
    textArray.push("</div>");
  }

  //Insert the HTML into the overlay
  this._div.innerHTML = textArray.join('');
}

/** Hide all of the markers */
com.redfin.FastMarkerOverlay.prototype.hide = function() {
  if (!this._div) return;
  this._div.style.display = "none";
}

/** Show all of the markers after hiding them */
com.redfin.FastMarkerOverlay.prototype.unhide = function() {
  if (!this._div) return;
  this._div.style.display = "block";
}

/** Remove the overlay from the map; never use the overlay again after calling this function */
com.redfin.FastMarkerOverlay.prototype.onRemove = function() {
  this._div.parentNode.removeChild(this._div);
  this._div = null;
}


/** Create a single marker for use in FastMarkerOverlay
 * @constructor
 * @param {string} id DOM node ID of the div that will contain the marker
 * @param {google.maps.LatLng} latLng geographical location of the marker 
 * @param {Array.<string>} htmlTextArray an array of strings which we'll join together to form the HTML of your marker
 * @param {string=} divClassName the CSS class of the div that will contain the marker. (optional)
 * @param {string=} zIndex zIndex of the div that will contain the marker. (optional, 'auto' by default)
 * @param {number=} leftOffset the offset in pixels by which we'll horizontally adjust the marker position (optional)
 * @param {number=} topOffset the offset in pixels by which we'll vertically adjust the marker position (optional)
*/
com.redfin.FastMarker = function(id, latLng, htmlTextArray, divClassName, zIndex, leftOffset, topOffset) {
  this._id = id;
  this._latLng = latLng;
  this._htmlTextArray = htmlTextArray;
  this._divClassName = divClassName;
  this._zIndex = zIndex;
  this._leftOffset = leftOffset || 0;
  this._topOffset = topOffset || 0;
}

/** Copy the FastMarker
 * @return {com.redfin.FastMarker} duplicate of this marker
 */
com.redfin.FastMarker.prototype.copy = function() {
  var htmlArray = this._htmlTextArray;
  var i = htmlArray.length;
  var htmlArrayCopy = new Array(i);
  while (i--) {
    htmlArrayCopy[i] = htmlArray[i];
  }
  return new com.redfin.FastMarker(this._id, latLng, htmlArrayCopy, this._divClassName, this._zIndex, this._leftOffset, this._topOffset);
}

Additional info: Before adding the polyline I can use the "inspect" tool in Firefox and select the div and span containing the label. But after adding the polyline the div is gone (the label is still visible on the map, but I can not click it, and I can not select it with the inspect-tool. Also, after adding the polyline I see in the Firefox "inspect"-list that a lot of divs suddenly have "overflow:hidden" on them, and I don't think they had it before. Is this a clue? Also it does not help if I remove the polyline. The onclick function of the labels still don't work. Like, I can add polyline, remove it, add labels, and the labels' onclick is not working. Or I can add labels, add ployline, labels' onclick stops working, remove polyline, labels' onclick still not working.)

Answer 1

There are differences between the Multimarker js-script contained in the zip-file offered for download (2013-03-22) ( http://code.google.com/p/multimarker/) and the js-script accessed through http://multimarker.googlecode.com/svn/trunk/fast-marker-overlay/maps-v3/src/FastMarkerOverlay.js.

The script accessed through http:// says:

line 24:

panes.floatPane.appendChild(this._div);

instead of

panes.overlayLayer.appendChild(this._div);

and line 140:

this.latLng

instead of

latLng

I changed these things in the downloaded script and now it works! Thank you so much geocodezip for helping me solve this! If there is any way I can give you cred for this please tell me. I'm new to the site and I'm not sure of how it works...