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:
$(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 < 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 < 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 = "<div class='col-md-12 jumbotron style='display:inline-block;vertical-align:text-top'><p hidden>" + Id + "</p><img src =" + src + " width=" + width + " height=" + height + "><img class='pull-right' src='icon.png' width=50 height=50/>" + "<p><b>título: </b>:" + title + "</p>" + "<p><b>autor: </b>" + owner + "</p>" + "<p><b>data: </b>" + date + "</p>" + "<p><b>local: </b>" + local + "</br></br>" for (var i = 0; i < tags.length; i++) { htmlText += "<label style='border:1px solid grey;margin-left:10px'>" + $(tags[i]).attr('raw') + "</label>"; } htmlText += "</div>"; $('#results').append(htmlText); /*$('#results').append("<div class='col-md-4'><img src ="+src+" width="+width+" height="+height+">"); $('#results').append("<p><b>título: </b>:" + title + "</p>" + "<p><b>autor: </b>" + owner + "</p>" + "<p><b>data: </b>" + date + "</p>" + "<p><b>local: </b>" + local); $('#results').append("</br>");*/ } } }, 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 } ); } }); html
<html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="FlickrPhotosSearch.js"></script> <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style type="text/css"> #sq, #lg-sq, #thumb, #small, #mid, #ori { width: 100% } input { width: 50px; } #map{ width:1240; height:300; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Escolha o tamanho das imagens (em píxeis) que quer visualizar</h2> </div> </div> <div class="row"> <div class="col-md-2"> <button type="button" class="btn btn-primary" id="sq">Square [75X75]</button> </div> <div class="col-md-2"> <button type="button" class="btn btn-primary" id="lg-sq">Large Square</button> </div> <div class="col-md-2"> <button type="button" class="btn btn-primary" id="thumb">Thumbnail</button> </div> <div class="col-md-2"> <button type="button" class="btn btn-primary" id="small">Small</button> </div> <div class="col-md-2"> <button type="button" class="btn btn-primary" id="mid">Medium</button> </div> </div> <div class="row"> <div class="col-md-12"> <h2>Pesquisa de fotos</h2> </div> </div> <div class="row"> <div class="col-lg-2"> <input type="text" class="form-control" id="tag"> </div> <div class="col-lg-1"> <button type="button" class="btn btn-success" id="pesquisar">Pesquisar</button> </div> <div class="col-lg-1"> <button type="button" class="btn btn-alert" id="apagar">Apagar</button> </div> <div class="col-lg-2"> <input type="text" id="numero" class="form-control" placeholder="numero de fotos"> </div> </div> <hr> <div id="map"></div> <div class="row" id="results" style="margin-top:100px;margin-left:50px"> </div> </div> <script src="googleapi.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKKKmlp2uHM78D9NMhhzY-lVQmzI81Z_E&callback=initMap" async defer></script> </body> </html> second script
$(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 } ); } }); I coded a call to an initMap function on the bottom, but when I try to invoke it, I get the error:
initMapis not a function
I need to make this function available so I can make another AJAX call with the previously-described data. How can I do that?