Google picker did not load when button clicked

Question

I use Google picker to select location of place using bellow code. the problem is picker did not load when text field is clicked and work normally if i loaded it when page load

     // The API developer key obtained from the Google Cloud Console.
  var developerKey = 'AI..............................';

   $( "#maplocation" ).click(function() {
         // Use the API Loader script to load google.picker.
      function loadPicker() {
        gapi.load('picker', {'callback': createPicker});
      }
   });


  // Create and render a Picker object for searching images.
  function createPicker() {
    var picker = new google.picker.PickerBuilder().
        addView(google.picker.ViewId.MAPS).
        setDeveloperKey(developerKey).
        setCallback(pickerCallback).
        build();
    picker.setVisible(true);
  }

  // A simple callback implementation.
  function pickerCallback(data) {
    var url = 'nothing';
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
      var doc = data[google.picker.Response.DOCUMENTS][0];
      url = doc[google.picker.Document.URL];
    }
    var message = 'You picked: ' + url;
    document.getElementById('result').innerHTML = message;
  }

Answer 1

I think it is because you didn't set up the oauth token in your picker builder.

var picker = new google.picker.PickerBuilder().
        addView(google.picker.ViewId.DOCUMENTS).
        setOAuthToken('').
        setDeveloperKey('').

...