Modified code to reposition individual marker overlays on hover/focus, instead...

Modified code to reposition individual marker overlays on hover/focus, instead of repositioning all overlays on map change. Also made a minor fix to button CSS.

accessible_gmaps.css

@@ -59,7 +59,7 @@ div#zoom-base {
 }
 .map-bn {
 	cursor:pointer;
-	text-indent:-100em;
+	text-indent:-10000em;
 	border: none;
 	width: 100%;
 	height: 100%;
@@ -138,7 +138,7 @@ span.accessibilityInfoClose {
     background: url('icons/ic_close_black_24px.svg') no-repeat 0px 0px/100% 100%;
 	width: 100%;
 	height: 100%;
-	text-indent:-100em;
+	text-indent:-10000em;
 	position: absolute;
 	right: 0px;
 	top: 0px;

accessible_gmaps.js

@@ -4,7 +4,6 @@
 	function load_accessible_gmaps(){
 		var accessible_gmaps = {};
 		
-		// TODO: properly isolate these global variables so they don't cause trouble when dropped into other sites
 		accessible_gmaps.markers = [];
 		accessible_gmaps.infowindowsEnabled;
 		accessible_gmaps.map;
@@ -75,14 +74,10 @@
 				accessible_gmaps.infowindow = new google.maps.InfoWindow();
 			}
 			// Create marker overlays
-			// We need a timeout - I'm not sure why. But the map bounds aren't caught up with us if we don't wait, and we need the map bounds set before we can position markers.
-			setTimeout(function(){
-				for(var i = 0; i < accessible_gmaps.markers.length; i++){
-					var marker = accessible_gmaps.markers[i];
-					accessible_gmaps.create_marker_div(marker, i);
-				}
-				accessible_gmaps.resetAllMarkers();
-			}, 2000);
+			for(var i = 0; i < accessible_gmaps.markers.length; i++){
+				var marker = accessible_gmaps.markers[i];
+				accessible_gmaps.create_marker_div(marker, i);
+			}
 		}
 
 		/**
@@ -177,9 +172,20 @@
 			jQuery('div#map-controls').after('<div id="' + markerID + '" title="' + title + '" class="map-marker" tabindex="0"><span>' + title + '</span></div>');	
 			jQuery('div#' + markerID).data('markerID', markerIndex) // Data attribute is added to the div so its associated marker can be identified.
 			
+			// Bind events to the marker hover to reposition its shim:
+			marker.addListener('mouseover', function() {
+				accessible_gmaps.resetMarker(markerIndex, accessible_gmaps.getMapData());
+			});
+			
 			// Bind events to the marker overlay to manipulate its marker's z index.
-			jQuery('div#' + markerID).focus(accessible_gmaps.zUp);
-			jQuery('div#' + markerID).blur(accessible_gmaps.zDown);
+			jQuery('div#' + markerID).focus(function(){
+				//accessible_gmaps.zUp
+				accessible_gmaps.resetMarker(markerIndex, accessible_gmaps.getMapData());
+			});
+			jQuery('div#' + markerID).blur(function(){
+				//accessible_gmaps.zDown
+				accessible_gmaps.resetMarker(markerIndex, accessible_gmaps.getMapData());
+			});
 			
 			// If the accessible infowindows module is enabled, bind handlers to open the modal infowindow.
 			if(accessible_gmaps.infowindowsEnabled){
@@ -332,13 +338,13 @@
 		}
 
 		/**
-		 *	Wrapper function for resetMarker 
-		 *	that resets all markers in the markers array.
+		 *	Moves all marker shims off-screen.
 		 */
 		accessible_gmaps.resetAllMarkers = function(){
 			var mapData = accessible_gmaps.getMapData();
 			for(var i = 0; i < accessible_gmaps.markers.length; i++){
-				accessible_gmaps.resetMarker(i, mapData);
+				var markerID = "mkr-" + i;
+				jQuery('div#' + markerID).css('display', 'none');
 			}
 		}