Extracting sender info in jQuery for Bootstrap ifr

I'm attempting to display a Google Map in a modal in Bootstrap 4.0 Beta.

I found this post and the code works, but I'm not "fluent" enough in jQuery to do in Javascript what I need it to do. I also took a look here to figure out how to get the sender, but I can't figure it out.

Let's say my <button> is declared like so:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#google-map-modal" data-source="https://www.google.com/maps/embed?a-whole-bunch-of-gibberish"><i class="icon-food"></i> Graceland Directions</button>

...and in my <footer>, I've set up the basic modal...

<footer>
  <!-- Code for map modal -->
  <div class="modal fade" id="google-map-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div class="close">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" frameborder="0"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>

I found this answer on, which is exactly what I wanted to do, but the address is hardcoded into the example:

// Bootstrap modal Google Map
$('#google-map-modal').on('shown.bs.modal', (function() {
  console.log("something happened");
  var mapIsAdded = false;

  return function() {
    if (!mapIsAdded) {
      $('.modal-body').html('<h1>Test</h1><br><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d9808.974038062652!2d4.3244048859985185!3d52.07529689519739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1419588821379" width="100%" height="400" frameborder="0" style="border:0"></iframe>');

      mapIsAdded = true;
    }
  };
})());

// Bootstrap modal Google Map
$('#google-map-modal').on('shown.bs.modal', (function() {
  console.log("something happened");
  var mapIsAdded = false;

  return function() {
    if (!mapIsAdded) {
      $('.modal-body').html('<h1>Test</h1><br><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d9808.974038062652!2d4.3244048859985185!3d52.07529689519739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1419588821379" width="100%" height="400" frameborder="0" style="border:0"></iframe>');

      mapIsAdded = true;
    }
  };
})());

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Directions to Graceland</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <img class="img-responsive" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/23/web-elvis-rex.jpg" alt="Fat Elvis" style="max-height: 200px;height: auto;width:auto">
      <h1>The King!</h1>
      <p>Here are directions to Graceland.</p>

      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#google-map-modal" data-source="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d13044176.127729293!2d-92.52026694322687!3d37.04286531005349!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x89b7c6de5af6e45b%3A0xc2524522d4885d2a!2sWashington+D.C.%2C+DC!3m2!1d38.9071923!2d-77.0368707!4m5!1s0x87d57d31cebd7225%3A0xfd48f1ff0c23cb11!2sGraceland%2C+Elvis+Presley+Blvd%2C+Memphis%2C+TN+38116!3m2!1d35.047691199999996!2d-90.0260493!5e0!3m2!1sen!2sus!4v1504803828896"><i class="icon-food"></i> Graceland Directions</button>


<!-- Raw Google embed code -->
<!--
<iframe src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d13044176.127729293!2d-92.52026694322687!3d37.04286531005349!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x89b7c6de5af6e45b%3A0xc2524522d4885d2a!2sWashington+D.C.%2C+DC!3m2!1d38.9071923!2d-77.0368707!4m5!1s0x87d57d31cebd7225%3A0xfd48f1ff0c23cb11!2sGraceland%2C+Elvis+Presley+Blvd%2C+Memphis%2C+TN+38116!3m2!1d35.047691199999996!2d-90.0260493!5e0!3m2!1sen!2sus!4v1504803828896" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
-->
    </div>

    <footer>
      <!-- Code for map modal -->
      <div class="modal fade" id="google-map-modal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body">
              <div class="close">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div>
              <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" frameborder="0"></iframe>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>

How would I update jQuery to grab the sender's data-source attribute and the title of the button?

Perhaps by using event.relatedTarget ?

 $('#your-modal').on('show.bs.modal', function (e) {
   var $invoker = $(e.relatedTarget);
 });

Update from OP:

This code got me over the finish line:

$('#google-map-modal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var locationName = button.text();
  var locationUrl = button.attr('data-source');
  var modal = $(this)
  modal.find('.modal-title').text(locationName);
  modal.find('.modal-body').html('<iframe src="'+locationUrl+'"width="100%" height="400" frameborder="0" style="border:0"></iframe>');
})