Show bootstrap modal when clicking on marker

Display modal when clicking on marker, showing latitude and longitude

by designworksinteractive

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>
<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>
  
   <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 panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="profile">
  <img style="width:100%;" src="http://www.voyagercuba.co.uk:10200/Images/Images-PlacesHotels/HAVANAcommendadorExterior1may07.JPG" >

  <div style="font-size:14px; margin:6px;" >
Accommodation
Located next door to the famous Hostal Valencia with which it shares its facilities, the Hostal El Commendador is one of the most peaceful of Havana's heritage hotels as well as boasting a superb location. The only real difference between the Valencia and Commendador is the standard of accommodation with the latter offering slightly higher standards. The proximity of the main car rental office, just 50 metres away, only adds to the hotel's...

CSS

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

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

JavaScript

function initMap() {
  var pointA = new google.maps.LatLng(55.9533, -3.1883),
    pointB = new google.maps.LatLng(57.4778, 4.2247),
    myOptions = {
      zoom: 7,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "Marker A",
      label: "havana",
      map: map
    });
  markerA.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");
}