Allow User To Move Marker Position Back (z-index?) In Google Maps Custom Map

I would like to allow user to be able to move order of custom google maps marker on a click inside an InfoWindow. This is to overcome issue of overlapping markers. I have conside

Solution 1:

1. set zIndex for all the markers (otherwise it is not defined), good value is (latitude * -100000) << 5 (from Mike Williams in ancient history)

   var marker = new google.maps.Marker({
       position: myLocation,
       zIndex: Math.round(myLocation.lat()*-100000)<<5
   });
   

2. keep references to all your markers (array markers)

   markers.push(marker);
   

3. decrement zIndex by -100000 when the link is clicked.

working fiddle

code snippet:

functionsetMarkerBack(i) {
  var currentZ = markers[i].get('zIndex');
  markers[i].set('zIndex', currentZ - 100000);
}
var markers = [];

// scoping for jquery
$(document).ready(function() {

  "use strict";

  // variable to hold a mapvar map;

  // variable to hold current active InfoWindowvar activeInfoWindow;

  // ------------------------------------------------------------------------------- //// initialize function      // ------------------------------------------------------------------------------- //functioninitialize() {

    // ------------------------------------------------------------------------------- //// LISTENER ON CLICK EVENT// ------------------------------------------------------------------------------- //
    $("a").on("click", function() {
      alert("got here!");
      // do something to change z-index of this marker//...// my_index = my_index-1; //...returnfalse;
    });

    // map options - lots of options available here var mapOptions = {
      zoom: 5,
      draggable: true,
      center: new google.maps.LatLng(44.960, -93.100),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // create map in div called map-canvas using map options defined above
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    // define two Google Map LatLng objects representing geographic pointsvar stPaul = new google.maps.LatLng(44.95283, -93.08925);
    var minneapolis = new google.maps.LatLng(44.97984, -93.26620);

    // place two markersfnPlaceMarkers(stPaul, "St Paul");
    fnPlaceMarkers(minneapolis, "Minneapolis");
  }


  // ------------------------------------------------------------------------------- //// create markers on the map// ------------------------------------------------------------------------------- //functionfnPlaceMarkers(myLocation, myCityName) {

    var marker = new google.maps.Marker({
      position: myLocation,
      zIndex: Math.round(myLocation.lat() * -100000) << 5


    });

    // Renders the marker on the specified map
    marker.setMap(map);
    var i = markers.length;
    markers.push(marker);
    // create an InfoWindowvar infoWnd = new google.maps.InfoWindow();

    // add content to your InfoWindow
    infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '<br/><a href="javascript:setMarkerBack(' + i + ');">Click</a> to move this marker to the back<br>zIndex=' + marker.get('zIndex') + '</div>');

    // add listener on InfoWindow - close last infoWindow  before opening new one 
    google.maps.event.addListener(marker, 'click', function() {

      //Close active window if exists - [one might expect this to be default behaviour no?]               if (activeInfoWindow != null) activeInfoWindow.close();

      // Open InfoWindow
      infoWnd.open(map, marker);

      // Store new open InfoWindow in global variable
      activeInfoWindow = infoWnd;
    });
  }


  // ------------------------------------------------------------------------------- //// initial load// ------------------------------------------------------------------------------- //       
  google.maps.event.addDomListener(window, 'load', initialize);

}); // end query

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="map-canvas"style="border: 2px solid #3872ac;"></div>