title: load google map on dynamic latitude / longitude in bootstrap modal
body: <p>I am facing issue with google maps. Actually I have a listing page where every row have map button to show map for lat/long for that particular row.</p>
  
  <p>I am using jQuery ajax call to open popup where a div </p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp"&gt;&lt;/script&gt;
  function showMap(id) {
     $("#map .modal-body").load("/showmap?id=" + id, function() { 
        $("#map").modal("show");
        return false; 
     });
  }
  </code></pre>
  
  <p>While showmap template have map show code like </p>
  
  <pre><code>loadMap();
  
  function loadMap() {
  
      var latitude = &lt;?php echo $latitude ?&gt;;
      var longitude = &lt;?php echo $longitude ?&gt;;
  
      map = new google.maps.Map(document.getElementById('map-body'), {
          zoom: 4,
          center: {lat: 21.0000, lng: 78.0000}
      });
  
      var myLatlng = new google.maps.LatLng(latitude, longitude);
      var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: 'Location'
          });
  
      $('#map').on('shown.bs.modal', function () {
          var center = map.getCenter();
          google.maps.event.trigger(map, "resize");
          map.setCenter(center);
      });
  }
  </code></pre>
  
  <p>That is working fine. However to reduce main page load time , I need to include maps script inclusion at popup that generate issue because subsequent maps libs not loaded and code gave error.</p>
  
  <p>I found solution for remove inclusion from main page and add following code at popup which define callback for map code ( which needed for deferred execution of my map code after all libs load )   </p>
  
  <pre><code>$(document).ready(function() {
      $.getScript("https://maps.googleapis.com/maps/api/js?v=3.exp&amp;callback=loadMap", function() {
          // No code here
       });
  });
  </code></pre>
  
  <p>But then I got google map multiple inclusion error. <strong>"You have included the Google Maps API multiple times on this page. This may cause unexpected errors."</strong></p>
  
  <p>If someone have idea how it could be resolved ?</p>