javascript - Marker hovering on a Google Map

Question

I am displaying multiple events as markers on a Google Map.

Hover on the event changes the marker color. (See picture below).

Multiple event can take place at the same address.

And this is my problem because the marker of an event can be hidden behind the latest one and it is then impossible to see where the event takes place by hover on it.

What would be a solution to see a change of colour of the marker in case of multiple events at the same place?

Here is a working Fiddle with event 3 hidden behind event 4: http://jsfiddle.net/5qk4zqz4/110/

And here is the code:

var geocoder;
var infoWindow = new google.maps.InfoWindow();

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var name = "Event1";
  var address = "address 1";
  var point = new google.maps.LatLng(42, -72);
  var html = "<b>" + name + "</b> <br/>" + address;
  var image1 = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
  var image2 = 'http://labs.google.com/ridefinder/images/mm_20_red.png';

  var i = 0;
  createMarker(point,html, i, map);

  point = new google.maps.LatLng(42.02, -72.02);
  name = "Event2";
  address = "address 2";
  html = "<b>" + name + "</b> <br/>" + address;
  i++;
  var marker = createMarker(point,html, i, map);

  point = new google.maps.LatLng(42.01, -72.01);
  name = "Event3";
  address = "address 3";
  html = "<b>" + name + "</b> <br/>" + address;
  i++;
  var marker = createMarker(point,html, i, map);
  map.setCenter(marker.getPosition());

  point = new google.maps.LatLng(42.01, -72.01);
  name = "Event4";
  address = "address 3";
  html = "<b>" + name + "</b> <br/>" + address;
  i++;
  var marker = createMarker(point,html, i, map);
  map.setCenter(marker.getPosition());
  

}

function createMarker(point, html, i, map) {
  var marker = new google.maps.Marker({
    map: map,
    position: point,
    draggable: true

  });
  var activeIcon, idleIcon;
 
  idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';

  marker.setIcon(idleIcon);

  var elem = document.getElementById('a' + i);
  if (!!elem) {
    elem.onmouseover = function() {
      marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
    }
    elem.onmouseleave = function() {
      marker.setIcon(idleIcon);
    }
  }
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);

  });

  return marker;
}


function hover(marker, i) {
  document.getElementById('a' + i).onmouseover = function() {
    marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
  }
  document.getElementById('a' + i).onmouseleave = function() {
    marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_blue.png');
  }
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);

  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?" type="text/javascript"></script>

<div id="a0">Event 1 address 1</div>
<div id="a1">Event 2 address 2</div>
<div id="a2">Event 3 address 3</div>
<div id="a3">Event 4 address 3</div>

<div id="map_canvas"></div>

Answer 1

You can make the bottom marker visible by seeing its zIndex above the other marker's zIndex.

function createMarker(point, html, i, map) {
  var marker = new google.maps.Marker({
    map: map,
    position: point,
    zIndex: 0,
    draggable: true

  });
  var activeIcon, idleIcon;

  idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';

  marker.setIcon(idleIcon);

  var elem = document.getElementById('a' + i);
  if (!!elem) {
    elem.onmouseover = function() {
      marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
      marker.setZIndex(100);
    }
    elem.onmouseleave = function() {
      marker.setIcon(idleIcon);
      marker.setZIndex(0);
    }
  }
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);

  });

  return marker;
}

proof of concept fiddle

var geocoder;
var infoWindow = new google.maps.InfoWindow();

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var name = "Event1";
  var address = "address 1";
  var point = new google.maps.LatLng(42, -72);
  var html = "<b>" + name + "</b> <br/>" + address;
  var image1 = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
  var image2 = 'http://labs.google.com/ridefinder/images/mm_20_red.png';

  var i = 0;
  createMarker(point, html, i, map);

  point = new google.maps.LatLng(42.02, -72.02);
  name = "Event2";
  address = "address 2";
  html = "<b>" + name + "</b> <br/>" + address;
  i++;
  var marker = createMarker(point, html, i, map);

  point = new google.maps.LatLng(42.01, -72.01);
  name = "Event3";
  address = "address 3";
  html = "<b>" + name + "</b> <br/>" + address;
  i++;
  var marker = createMarker(point, html, i, map);
  map.setCenter(marker.getPosition());

  point = new google.maps.LatLng(42.01, -72.01);
  name = "Event4";
  address = "address 3";
  html = "<b>" + name + "</b> <br/>" + address;
  i++;
  var marker = createMarker(point, html, i, map);
  map.setCenter(marker.getPosition());


}

function createMarker(point, html, i, map) {
  var marker = new google.maps.Marker({
    map: map,
    position: point,
    zIndex: 0,
    draggable: true

  });
  var activeIcon, idleIcon;

  idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';

  marker.setIcon(idleIcon);

  var elem = document.getElementById('a' + i);
  if (!!elem) {
    elem.onmouseover = function() {
      marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
      marker.setZIndex(100);
    }
    elem.onmouseleave = function() {
      marker.setIcon(idleIcon);
      marker.setZIndex(0);
    }
  }
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);

  });

  return marker;
}


function hover(marker, i) {
  document.getElementById('a' + i).onmouseover = function() {
    marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
  }
  document.getElementById('a' + i).onmouseleave = function() {
    marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_blue.png');
  }
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);

  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?" type="text/javascript"></script>

<div id="a0">Event 1 address 1</div>
<div id="a1">Event 2 address 2</div>
<div id="a2">Event 3 address 3</div>
<div id="a3">Event 4 address 3</div>

<div id="map_canvas"></div>