Centralize Google Maps between two Javascript routes

Question

Good Afternoon, Folks!

I’m facing problems to centralize using Google Maps API between 2 points, what happens follows in the images below.

The application is in Ruby on Rails and we use the JS for part of the maps, when I click to open the modal it opens the modal with the maps only it does not center as you can see in the images, even if I use a map.setZoom() and map.setCenter(). It follows the code I developed attached.

Thanks for your help!

$(document).ready(function() {

		$("#pipeline_modal_map_tracker").html("");
		$("#pipeline_modal_map_tracker").html("<%= j render 'pipeline_modal_map_tracker' %>");
		$("#modalPipelineMapTracker").modal("show");




	var map;
	var marker;
	var center = new google.maps.LatLng(-13.4949748,-69.825632);

	function initMap() {
			var directionsService = new google.maps.DirectionsService;
			var directionsDisplay = new google.maps.DirectionsRenderer;
			map = new google.maps.Map(document.getElementById('map_pipeline2'), {
					zoom: 7
			});

			directionsDisplay.setMap(map);

			"<%= puts  @sender_location.address  + ',' +  @sender_location.address_number + ',' + @sender_location.city + ',' + @sender_location.state  %>"
			"<%= puts  @receiver_location.address  + ',' + @receiver_location.address_number  + ',' + @receiver_location.city + ',' + @receiver_location.state  %>"

				directionsService.route({
					origin:  "<%= @sender_location.address  + ',' +  @sender_location.address_number + ',' + @sender_location.city + ',' + @sender_location.state  %>" ,
					destination:  "<%=  @receiver_location.address  + ',' + @receiver_location.address_number  + ',' + @receiver_location.city + ',' + @receiver_location.state  %>" ,
					travelMode: 'DRIVING'
				}, function(response, status) {
					if (status === 'OK') {

						/*New Test God*/
						document.getElementById('map_pipeline2').className = "directions";
						directionsDisplay.setDirections(response);
						var bounds = response.routes[0].bounds;

						map.fitBounds(bounds);
						map.setCenter(bounds.getCenter());
						map.setZoom(6);


					} else {
				        alert("");
				    }
				});






	}

	$( "#modalPipelineMapTracker" ).on("shown.bs.modal", function(){
		google.maps.event.trigger(map, "resize");
	});


	initMap();
});