Good Afternoon, Guys!
I'm having trouble centralizing using Google Maps API between 2 points, which happens below in the screenshots below.
The application is in Ruby on Rails and we use JS for some 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 I using a map.setZoom ( ) and map.setCenter (). Follow the code I developed in the appendix.
Thanks in advance 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();
}); 
