load google maps on click
<p>I want to show Google Map, after a link is clicked.</p>

<p>I have tried the following. When the link is clicked, then:</p>

<ol>
<li>Insert <code>div</code> after link with id <code>map</code></li>
<li>Load Google Maps API with jQuery method $.getScript</li>
<li>Add Google Maps to <code>div</code> with id <code>map</code></li>
</ol>

<p>Unfortunately, step 2 does not seem to work. In the JS console I find the error</p>

<blockquote>
  <p>ReferenceError: google is not defined</p>
</blockquote>

<p>This is my code, except that I have replaced my actual Google API key with the string <code>mykey</code> at the line</p>

<pre><code> $.getScript("https://maps.googleapis.com/maps/api/js?key=mykey");
</code></pre>

<p>Why cant I include the Google Maps API like this? How can I include it?</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;window.jQuery || document.write('&lt;script src="/resources/vendor/jQUery/jquery-1.11.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
    &lt;script&gt;
    $(document).ready(function(){
      $('#showMap').click(function(e){
        e.preventDefault();

        $('#showMap').after("&lt;div id='map' style='height: 200px;background-color:#08c;width: 200px;'&gt;&lt;/div&gt;");

        $.getScript("https://maps.googleapis.com/maps/api/js?key=mykey");

        $lat   = 10.1364;
        $lng   = -80.2514;

        var myLatLng = {lat: $lat, lng: $lng};

          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 11,
            center: myLatLng
          });

          var marker = new google.maps.Marker({
            position: myLatLng,
            map: map
          });
      });
    });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;a href='#' id="showMap"&gt;Hello&lt;/a&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>