Google Maps API: initMap() is not a function
<p>I'm working with Flickr's API.  I am asynchronously loading some images and related metadata.  I have a script where I do all this, using three AJAX calls:</p>

<pre><code>$(document).ready(function() {
    var latLon = {
        lat: 38.736946,
        lng: -9.142685
    };
    var numero = 10;
    var clicked = 1;

    $("#sq").click(function() {
        clicked = 1;
    });
    $("#lg-sq").click(function() {
        clicked = 2;
    });
    $("#thumb").click(function() {
        clicked = 3;
    });
    $("#small").click(function() {
        clicked = 4;
    });
    $("#mid").click(function() {
        clicked = 5;
    });

    $("#apagar").click(function() {
        $("#results").html('');
    });

    $('#pesquisar').click(function() {
        $("#results").html('');
        $.ajax({
            url: 'https://api.flickr.com/services/rest/?method=flickr.photos.search',
            dataType: 'xml',
            data: {
                api_key: '2fd41b49fedfd589dc265350521ab539',
                tags: $("#tag").val(),
                format: 'rest'
            },
            success: sucessHandler,
            error: errorHandler

        });

        function sucessHandler(data) {
            $("#results").html('');
            var fotos = Array.prototype.slice.call($(data).find("photo"));

            if ($("#numero").val() != "") {
                numero = parseInt($("#numero").val());
                console.log("entrou");
            }

            fotos.forEach(function(foto, key) {
                if (key &lt; numero) {
                    $.ajax({
                        url: 'https://api.flickr.com/services/rest/?method=flickr.photos.getSizes',
                        dataType: 'xml',
                        data: {
                            api_key: '2fd41b49fedfd589dc265350521ab539',
                            photo_id: $(foto).attr('id'),
                            format: 'rest'
                        },
                        success: function(dataSize) {
                            var farmId = $(foto).attr('farm');
                            var serverId = $(foto).attr('server');
                            var Id = $(foto).attr('id');
                            var secret = $(foto).attr('secret');
                            var src = "https://farm" + farmId + ".staticflickr.com/" + serverId + "/" + Id + "_" + secret + ".jpg";

                            $.ajax({
                                url: 'https://api.flickr.com/services/rest/?method=flickr.photos.getInfo',
                                dataType: 'xml',
                                data: {
                                    api_key: '2fd41b49fedfd589dc265350521ab539',
                                    photo_id: $(foto).attr('id'),
                                    format: 'rest',
                                    secret: secret
                                },
                                success: function(dataInfo) {

                                    for (var i = 1; i &lt; 6; i++) {
                                        if (clicked == i) {
                                            var size = dataSize.getElementsByTagName('size')[i - 1];
                                            var title = dataInfo.getElementsByTagName('title')[0].textContent;
                                            var owner = $(dataInfo.getElementsByTagName('owner')[0]).attr('username');
                                            var date = $(dataInfo.getElementsByTagName('dates')[0]).attr('taken');
                                            var local = $(dataInfo.getElementsByTagName('owner')[0]).attr('location');
                                            if (local == "") {
                                                local = "desconhecido";
                                            }
                                            var tags = $(dataInfo.getElementsByTagName('tag'));
                                            var allTags = "";
                                            var width = $(size).attr("width");
                                            var height = $(size).attr("height");
                                            var htmlText = "&lt;div class='col-md-12 jumbotron style='display:inline-block;vertical-align:text-top'&gt;&lt;p hidden&gt;" + Id + "&lt;/p&gt;&lt;img src =" + src + " width=" + width + " height=" + height + "&gt;&lt;img class='pull-right' src='icon.png' width=50 height=50/&gt;" +
                                                "&lt;p&gt;&lt;b&gt;título:  &lt;/b&gt;:" + title + "&lt;/p&gt;" + "&lt;p&gt;&lt;b&gt;autor:  &lt;/b&gt;" + owner + "&lt;/p&gt;" + "&lt;p&gt;&lt;b&gt;data:  &lt;/b&gt;" + date + "&lt;/p&gt;" + "&lt;p&gt;&lt;b&gt;local:  &lt;/b&gt;" + local + "&lt;/br&gt;&lt;/br&gt;"

                                            for (var i = 0; i &lt; tags.length; i++) {
                                                htmlText += "&lt;label style='border:1px solid grey;margin-left:10px'&gt;" + $(tags[i]).attr('raw') + "&lt;/label&gt;";
                                            }

                                            htmlText += "&lt;/div&gt;";
                                            $('#results').append(htmlText);




                                            /*$('#results').append("&lt;div class='col-md-4'&gt;&lt;img src ="+src+" width="+width+" height="+height+"&gt;");
                                            $('#results').append("&lt;p&gt;&lt;b&gt;título:  &lt;/b&gt;:" + title + "&lt;/p&gt;" + "&lt;p&gt;&lt;b&gt;autor:  &lt;/b&gt;" + owner + "&lt;/p&gt;" + "&lt;p&gt;&lt;b&gt;data:  &lt;/b&gt;" + date + "&lt;/p&gt;" + "&lt;p&gt;&lt;b&gt;local:  &lt;/b&gt;" + local);
                                            $('#results').append("&lt;/br&gt;");*/

                                        }

                                    }
                                },
                                error: function(req, status, err) {

                                }
                            });

                        },
                        error: errorSize

                    });
                }
            });

            function errorSize(req, status, err) {
                console.log("error size");
            }

        }

        function errorHandler(req, status, err) {
            console.log("fail");
        }
    });


    var map;

    function initMap() {
        map = new google.maps.Map(
            document.getElementById('map'), {
                center: latLon,
                zoom: 8
            }
        );
    }

});
</code></pre>

<p><strong>html</strong></p>

<pre><code>&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="FlickrPhotosSearch.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
    &lt;style type="text/css"&gt;
        #sq,
        #lg-sq,
        #thumb,
        #small,
        #mid,
        #ori {
            width: 100%
        }

        input {
            width: 50px;
        }

        #map{
            width:1240;
            height:300;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
                &lt;h2&gt;Escolha o tamanho das imagens (em píxeis) que quer visualizar&lt;/h2&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-2"&gt;
                &lt;button type="button" class="btn btn-primary" id="sq"&gt;Square [75X75]&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="col-md-2"&gt;
                &lt;button type="button" class="btn btn-primary" id="lg-sq"&gt;Large Square&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="col-md-2"&gt;
                &lt;button type="button" class="btn btn-primary" id="thumb"&gt;Thumbnail&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="col-md-2"&gt;
                &lt;button type="button" class="btn btn-primary" id="small"&gt;Small&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="col-md-2"&gt;
                &lt;button type="button" class="btn btn-primary" id="mid"&gt;Medium&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
                &lt;h2&gt;Pesquisa de fotos&lt;/h2&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-lg-2"&gt;
                &lt;input type="text" class="form-control" id="tag"&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-1"&gt;
                &lt;button type="button" class="btn btn-success" id="pesquisar"&gt;Pesquisar&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-1"&gt;
                &lt;button type="button" class="btn btn-alert" id="apagar"&gt;Apagar&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-2"&gt;
                &lt;input type="text" id="numero" class="form-control" placeholder="numero de fotos"&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;hr&gt;
        &lt;div id="map"&gt;&lt;/div&gt;

        &lt;div class="row" id="results" style="margin-top:100px;margin-left:50px"&gt;

        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="googleapi.js"&gt;&lt;/script&gt;
    &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKKKmlp2uHM78D9NMhhzY-lVQmzI81Z_E&amp;callback=initMap" async defer&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p><strong>second script</strong></p>

<pre><code>$(document.ready(function(){
var map;
    var latLon = {lat:38.736946,lng:-9.142685};
    function initMap() {
        map = new google.maps.Map(
            document.getElementById('map'),
            {
                center: latLon,
                zoom: 8
            }
        );
    }
});
</code></pre>

<p>I coded a call to an <code>initMap</code> function on the bottom, but when I try to invoke it, I get the error:</p>

<blockquote>
  <p><code>initMap</code> is not a function</p>
</blockquote>

<p>I need to make this function available so I can make another AJAX call with the previously-described data. How can I do that?</p>