Show bootstrap modal when clicking on marker

Display modal when clicking on marker, showing latitude and longitude

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<script src="http://www.voyagercuba.co.uk/CSS/owl.carousel.scss"></script>
<link rel="stylesheet" href="https://www.voyagercuba.co.uk/CSS/owl.theme.default.css">
<script src="https://www.voyagercuba.co.uk/SCRIPT/owl.carousel.js"></script>
<link rel="stylesheet" href="https://www.voyagercuba.co.uk/css/owl.carousel.min.css">
<div id="map-canvas"></div>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  

  
  <div class="modal-dialog modal-md">
    <div class="modal-content">
    
    
    
    
      <ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#profile" role="tab" data-toggle="tab">hotel</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#buzz" role="tab" data-toggle="tab">facilities</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#references" role="tab" data-toggle="tab">rooms</a>
  </li>
    <li class="nav-item">
    <a class="nav-link" href="#place" role="tab" data-toggle="tab">explore havana </a>
  </li>
  
      <li class="nav-item">
    <a class="nav-link" style="color:green;display:none;" href="#place" role="tab" data-toggle="tab">add to trip </a>
  </li>
  
        <li class="nav-item">
    <a class="nav-link" style="color:green; font-weight:600; display:normal;" href="#trip" role="tab" data-toggle="tab">trip stage 7 </a>
  </li>
  
  
   <button type="button" style="float:right; margin-top:3px; margin-right:3px;" class="btn btn-default" data-dismiss="modal">close</button>
</ul>
  <div style="font-size:19px; text-align:center; font-weight:400;" >Palacio Marques Felipe</div>

  <div style="font-size:16px; text-align:center;" >Historic Centre Small Hotel Heritage £££ </div>
<!-- Tab...

CSS

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

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

JavaScript

function initMap() {
  var pointA = new google.maps.LatLng(23.113593, -82.366596),
    pointB = new google.maps.LatLng(22.616705, -83.710499),
    myOptions = {
      zoom: 7,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "Palacio Marques Felipe",
      label: "Palacio Marques Felipe",
      map: map
    });
    
     markerB = new google.maps.Marker({
      position: pointB,
      title: "Vinales",
      label: "Vinales",
      map: map
    });
  markerA.addListener('mouseover', function(e) {
    map.setCenter(this.position);
    $('#myModal').modal('show');
  });
  
  
    markerB.addListener('click', function(e) {
    map.setCenter(this.position);
    $('#myModal').modal('show');
  });
}








if (typeof(google) == "undefined") {
  var mapsAPI = "AIzaSyAIPPUQ0PSWMjTsgvIWRRcJv3LGfRzGmnA";
  $.getScript('https://maps.google.com/maps/api/js?key=' + mapsAPI).done(function() {
    initMap()
  });
} else {
  console.log("google api already loaded");
}




$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    autoplay:true,
autoplayTimeout:5000,
autoplayHoverPause:false,
keyboard:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:2
        },
        1000:{
            items:3
        }
    }
})