Google map multiple markers

locations.php

 			<script>
 				var pointerArray 	=	<?php echo json_encode( $locaArr ); ?>;

 				function initialize(){
 					var directionsService   =   new google.maps.DirectionsService();
			        var directionsDisplay   =   new google.maps.DirectionsRenderer({
			                                            polylineOptions: {
			                                              strokeColor: "#542626"
			                                            },
			                                            suppressMarkers: true
			                                        });
			        var myOptions           =   {
			                                        zoom: 10,
			                                        center: {lat: 7.877508, lng: 80.010906},  
			                                        maxZoom: 18                          
			                                    };

			        var map     =   new google.maps.Map(document.getElementById('map-area') ,myOptions);

			        var points  =   <?php echo json_encode( $init_array ); ?>;

			        viewAllLocationsList(points[0]);

 				}

			    $('.map-list li').on( 'click', function(e){
			    	e.preventDefault();
			    	var arrayVal = [];

			    	var elemntId 	=	$(this).data('key');
		    		var clickedAr 	= 	pointerArray[elemntId];

		    		viewAllLocationsList(clickedAr);
			    	

			    });

			    function viewAllLocationsList( clickedAr ){
			    	var markersLoc 	=	[];
		    		var bounds  			=   new google.maps.LatLngBounds();
		    		var directionsService   =   new google.maps.DirectionsService();
			        var directionsDisplay   =   new google.maps.DirectionsRenderer({
			                                            polylineOptions: {
			                                              strokeColor: "#542626"
			                                            },
			                                            suppressMarkers: true
			                                        });
			        var myOptions           =   {
			                                        zoom: 10,
			                                        center: {lat: 7.877508, lng: 80.010906},  
			                                        maxZoom: 18                          
			                                    };

			        var map     =   new google.maps.Map(document.getElementById('map-area') ,myOptions);

			        if ( clickedAr.length != 0 ) {
				        markersLoc.push(clickedAr);
			        	if( clickedAr.sub_loc.length != 0 ){
				        	for (var i = 0; i < clickedAr.sub_loc.length; i++) {
				        		markersLoc.push(clickedAr.sub_loc[i]);
				        	}
				        }
			        	// markersLoc.push(defaultStart[0]);
			        	if (markersLoc.length != 0 ) {

			        		for (var i = 0; i < markersLoc.length; i++) {
			        			var latLang 	=	markersLoc[i].lat_lang.split(",");
			        			if ( latLang.length != 0 ) {
					        		var markpos =   new google.maps.LatLng( latLang[0].trim() , latLang[1].trim() ); 
									/* make markers array */
								    marker = new google.maps.Marker({
								        position: markpos,
								        map: map,
								        icon: markersLoc[i].icon,
								    });

								    bounds.extend(marker.position);
			        			}
			        		}

			        		map.fitBounds(bounds);
			        	}
			        }
			    }

 				google.maps.event.addDomListener(window, "load", initialize);
 			</script>