Adding class into google marker from jQuery / Js

Question

how can I add a class into the google marker for each marker that marked on different places. So that I can do .fadeIn() & .fadeOut() function when use click on those markers.

I don't think adding this will work for it.

var NewYork = new google.maps.Marker({
  position: mapOptions.center,
  map: map,
  icon: img
});
marker.addListener('click', changeContent);
}

function changeContent() {
    $("#klk-map-content-1").fadeOut(fast, function(){
        $("#klk-map-content-2").fadeIn("slow");
    });
}

Also the left side is the content for each marker. So when the user select one of the marker the content will be change.

Here's the snippet: (Please expand the snippet)

function initialize() {

  var mapOptions = {
    center: {
      lat: 40.7499256, 
      lng: -73.9854028
    },
    zoom: 3,
    zoomControl: false,
    panControl: false,
    streetViewControl: false
  };
  
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
  var img = "https://i.sstatic.net/JWM0W.png";
  
  var NewYork = new google.maps.Marker({
      position: mapOptions.center,
      map: map,
      icon: img
   });
  
  var London = new google.maps.Marker({
      position: {lat: 51.5106122, lng: -0.1529072},
      map: map,
      icon: img
   });
  
  var Paris = new google.maps.Marker({
      position: {lat: 48.8588589, lng: 2.3470599},
      map: map,
      icon: img
   });
  
  var HongKong = new google.maps.Marker({
      position: {lat: 22.2753729, lng: 114.1757384},
      map: map,
      icon: img
   });
  
  var markers = {
    'NewYork': NewYork,
    'London': London,
    'Paris': Paris,
    'HongKong': HongKong
  };
  
  var styles = [
    {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#d3d3d3"
            }
        ]
    },
    {
        "featureType": "transit",
        "stylers": [
            {
                "color": "#808080"
            },
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#b3b3b3"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#ffffff"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#ffffff"
            },
            {
                "weight": 1.8
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#d7d7d7"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#ebebeb"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#a7a7a7"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#ffffff"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#ffffff"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#efefef"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#696969"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#737373"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#d6d6d6"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {},
    {
        "featureType": "poi",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#dadada"
            }
        ]
    }
];
  
  map.setOptions({styles: styles});
  
  function getCoords (position) {
     var text = position.replace(/[()]/g,'').split(", ");
     var lat = Number(text[0]);
     var lng = Number(text[1]);
    
     return {
       lat: lat,
       lng: lng
     };
  }
  
   $('.nav li').on('click', function () {
     $('.nav li').removeClass('active');
     $(this).addClass('active');
     var id = $(this).attr('id');
     $('#active').animate({
       'margin-left': $(this).offset().left
     });
     var position = String(markers[id].getPosition());
     map.panTo(new google.maps.LatLng(getCoords(position).lat, getCoords(position).lng));
   });
  
 }

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

* {
  box-sizing: border-box !important;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-canvas {
  height: 85%;
  width: 100%;
}

#overlay {
  background-color: black;
  height: 100%;
  width: 100%;
  z-index: 1000;
}

#active {
  background-color: #333;
  display: block;
  margin-bottom: -5px;
  height: 5px;
  width: 25.00%;
  position: relative;
  z-index: 999;  
}

.nav {
  display: table;
  height: 15%;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.nav li {
  border-left: 1px solid #E5E5E5;
  color: #787878;
  cursor: pointer;
  display: table-cell;
  font-family: 'Sanchez', serif;
  text-align: center;
  vertical-align: middle;
  width: 25%;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.nav li:first-child {
  border-left: none;
}

<!DOCTYPE html>
<html>

<head>
	<title></title>
<!-- Link -->	
	<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Sanchez">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>

<body>
<!-- Content -->
	<div id="map-canvas" style="position: relative; overflow: hidden;"></div>
	<span id="active"></span>
	<ul class="nav">
	  <li class="active" id="NewYork">New York</li>
	  <li id="London">London</li>
	  <li id="Paris">Paris</li>
	  <li id="HongKong">Hong Kong</li>
	</ul>

	<div id="overlay" style="display: block; position: absolute; z-index: 1000; background-color: white; top: 50px; left: 10px; height: auto; width: 300px; overflow: auto; border-top: 5px green solid; padding: 1rem;">
		<div class="klk-map-contents" id="klk-map-content-1">Content 1</div>
		<div class="klk-map-contents" id="klk-map-content-2" style="display: none;">Content 2</div>
	</div>
	

<!-- Script CDN -->	
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=your_api_key"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
	<script type="text/javascript" src="js/function.js"></script>


<!-- Script -->
	<script type="text/javascript">
		$("#map-markers-1").click(function(e){
    		$("#klk-map-content-1").fadeOut("fast", function(){
       			$("#klk-map-content-2").fadeIn("slow");
		    });
		});
	</script>
</body>
</html>

Answer 1

Ok, this is how I solved it, you were in a good direction thou.

Taking your first guess:

var NewYork = new google.maps.Marker({
position: mapOptions.center,
map: map,
icon: img
});
marker.addListener('click', changeContent);
}

function changeContent() {
$("#klk-map-content-1").fadeOut(fast, function(){
    $("#klk-map-content-2").fadeIn("slow");
});
}

there is nothing in your code called marker , so if you actually want to add a event listener to the New York marker you should write:

NewYork.addListener('click', changeContent);

and in the fadeout() just write fast as "fast"

Here is your example back working:

http://jsbin.com/hukike/1/edit?html,css,js,output