Rectangle 27 4

Although pretty much on progress maybe also worth to mention angular-googleapi, which wraps nicely some Google Calendar and Google Plus API calls and easy extendable.

$scope.authenticated = false;

$scope.$on("google:authenticated", function(){
   $scope.authenticated = true;
   $scope.$on('googleCalendar:loaded', function(){
       # work your magic here
       # $scope.calendars = googleCalendar.listCalendars();
       # $scope.$apply();
   });
});

function checkAuth() {
   setTimeout(function(){
       gapi.auth === undefined ? checkAuth() : googleLogin.checkAuth();
   }, 20);
}

checkAuth();

javascript - Angular Js and google api client.js (gapi) - Stack Overfl...

javascript angularjs google-app-engine google-cloud-endpoints gapi
Rectangle 27 25

Rather than bootstrapping or setting a timeout, it's most efficient to let Angular load before/while you're making the server requests. I followed the advice described in AngularJS + Cloud Endpoints: A Recipe for Building Modern Web Applications, which does the following.

Keep your ng-app directive as usual (no bootstrapping)

<html ng-app="myApp">
<head>
  <script src="angular.js" type="text/javascript"></script>
  <script src="app.js" type="text/javascript"></script>
  <script src="https://apis.google.com/js/client.js?onload=init"></script>
</head>
<body ng-show="backendReady">

Create a global variable for the GAPI callback function anywhere in your JS

var app = angular.module('myApp', []);

var init = function() {
  window.initGapi();
}

app.controller('MainController', function($scope, $window, gapiService) {
  var postInitiation = function() {
    // load all your assets
  }
  $window.initGapi = function() {
    gapiService.initGapi(postInitiation);
  }
});

app.service('gapiService', function() {
  this.initGapi = function(postInitiation) {
    gapi.client.load('helloWorld', 'v1', postInitiation, restURL);
  }
});

The reason why you would not want to execute the initialization in the first init() method is so you can put as much of the code as possible in the AngularJS world, such as controllers, services and directives. As a result, you can harness the full power of AngularJS and have all your unit tests, integrations tests,and so forth.

This may seem like a roundabout way of doing things, but it optimizes for speed, testability, and separation of concerns.

@CadeThacker Your edit was rejected, but it was correct, so I replicated it. Thanks.

init
initGapi

Hi Willlma, I am trying to use this method. But i met an error saying window.initGapi is not defined. I define the method in a BaseControler which tied to the Body.

javascript - Angular Js and google api client.js (gapi) - Stack Overfl...

javascript angularjs google-app-engine google-cloud-endpoints gapi
Rectangle 27 3

I wrote a simple directive to load the google map API asynchronously :

// js/directives/gmapAsync.js

(function(){
'use strict';

angular.module('app').directive('gmapAsync',
    ['$window', '$rootScope', gmapAsync]
);

function gmapAsync($window, $rootScope){

    var gmapScript = $window.document.createElement('script');  

    $window.onGmapScriptLoaded = function(){
        console.log('google maps script loaded');

        $rootScope.gmapApiLoaded = true;
        $rootScope.$broadcast('gmap.api.loaded');

    };

    return {
        restrict: 'A',
        transclude: false,
        scope:false,
        link:   function(scope, element, attributes){

            if (navigator.onLine) {
                appendScript();
            } else {
                $window.addEventListener('online',appendScript);
            }

            function appendScript(){
                gmapScript.type = 'text/javascript';
                gmapScript.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'callback=onGmapScriptLoaded';
                $window.document.body.appendChild(gmapScript);
            }
        }
    };
}
})();

Then in your main controller, you can handle the event :

// js/controllers/AppCtrl.js

(function(){
'use strict';

    angular.module('app').controller('AppCtrl',[$scope,AppCtrl])

    function AppCtrl($scope){

        $scope.$on('gmap.api.loaded',function(){
            // your stuff to init after the api is loaded
        });
    }

})();

You just have to declare the directive in your body tag :

<!DOCTYPE html>
<html>

    <head></head>

    <body data-ng-app="app" data-gmap-async data-ng-controller="AppCtrl">

        <!-- template body -->

        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/controllers/AppCtrl.js"></script>
        <script type="text/javascript" src="js/directives/gmapAsync.js"></script>
    </body>

</html>

javascript - Angular Js and google api client.js (gapi) - Stack Overfl...

javascript angularjs google-app-engine google-cloud-endpoints gapi
Rectangle 27 6

Nice post and thanks! This approach worked for me. It might matter what order that the code appears in your index.html file. It did not work for me until I had things inthis order.

...
<script>
  function googleOnLoadCallback(){
      alert('googleOnLoadCallback called');
      var apisToLoad = 1; // must match number of calls to gapi.client.load()
      var gCallback = function() {
          if (--apisToLoad == 0) {
              //Manual bootstraping of the application
              var $injector = angular.bootstrap(document, ["myApp"]);
              console.log("myApp bootstrap complete " + gapi);
          };
      };
      gapi.client.setApiKey("my_client_id");
      gapi.client.load("translate", "v2", gCallback);

  }
</script>
<!-- See https://developers.google.com/api-client-library/javascript/samples/samples -->
<script src="https://apis.google.com/js/client.js?onload=googleOnLoadCallback"></script>
</head>

javascript - Angular Js and google api client.js (gapi) - Stack Overfl...

javascript angularjs google-app-engine google-cloud-endpoints gapi
Rectangle 27 2

angular.module('fiveMinCatchupApp').controller('MainCtrl', function ($scope, uiGmapGoogleMapApi) {

$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };

  navigator.geolocation.getCurrentPosition(function(pos) {
    $scope.map.center = {
     latitude: pos.coords.latitude,
     longitude: pos.coords.longitude
    };
    $scope.$apply();
  });
});

javascript - Angular Js & google maps API ngGeolocation - Stack Overfl...

javascript angularjs google-maps google-maps-api-3 geolocation
Rectangle 27 25

I would set properties on the $scope in a user access object of some sort to toggle them whenever you load the user.

Assuming the user is loaded when the controller is it could be something like so:

app.controller('SecuredForm', function($scope) {
     //get your user from where ever.
     var user = getSomeUser(); 

     // set your user permissions
     // here's some contrived example.
     $scope.permissions = {
         showAdmin: user.isRegistered && user.isAdmin,
         showBasic: user.isRegistered,
         showHelp: !user.isBanned
     }
});
<div ng-show="permissions.showAdmin">
  <h3>Admin Area</h3>
  <!-- admin stuff here -->
</div>
<div ng-show="permissions.showBasic">
  <h3>Basic Info</h3>
  <!-- admin stuff here -->
</div>
<div ng-show="permissions.showHelp">
  <h3>Help</h3>
  <!-- help stuff here -->
</div>

One thing to note is that ng-show and ng-hide are simply not displaying the HTML... the html is still on the client. So be sure when you're making calls back to the server that require permissions to alter something you're checking them at the server. You can't assume the user has permission to do something just because the form was visible. (You probably already know this, I just want to be thorough).

javascript - Angular JS: ng-hide and ng-show API - Stack Overflow

javascript angularjs
Rectangle 27 15

Why not give this jsfiddle a go. Change the $scope.userId variable and you will see the updated changes when you hit "run" at jsFiddle. The code:

<div ng-app>
    <div ng-controller="DivGroup">
        <div ng-show="getUserId() == 1">Div 1</div>
        <div ng-show="getUserId() == 2">Div 2</div>
        <div ng-show="getUserId() == 1">Div 3</div>
        <div ng-show="getUserId() == 2">Div 4</div>       
    </div>
</div>
function DivGroup($scope) {

    $scope.userId = 2;

    $scope.getUserId = function() {
        console.log('test');
        return $scope.userId;             
    }
}

When the userId is 1, it displays the contents of one and three, when it's 2 it displays the contents of two and four.

javascript - Angular JS: ng-hide and ng-show API - Stack Overflow

javascript angularjs
Rectangle 27 4

I struggled over this for a long time, and I was able to find a similar question posted here:

However, this person already knew what had to be done, just not how to make the appropriate call, so it was fairly lucky that I found it.

In order to make gapi requests using an existing access token, you must call:

gapi.auth.setToken({
        access_token: "token_string"
    });
Meteor.user().services.google.accessToken
"token_string"

Documentation on the method is here:

javascript - Authorized client-side JS API calls with Google's gapi li...

javascript meteor access-token meteor-accounts gapi
Rectangle 27 1

I think is not so easy to correctly load both libraries each in its way, because both are asynchronous in a different way. Instead, is easier to let one load the other.

The first and simplier approach is to put the client.js lib at the end of all scripts, and then do a manual Angular bootstrap when the Google library is fully loaded.

Other method could be the opposite, so let Angular create the Google client.js script tag and load the library.

Check this project: https://github.com/canemacchina/angular-google-client I've create this library to help me using Google client library in Angular, and it use the second method...

javascript - The correct order to load Google Client api gapi and angu...

javascript angularjs gapi
Rectangle 27 1

I had a similar issue. Perhaps you can try something like this for the init function so that it retries again when the controller is not loaded yet.

function init() {
    if (window.initGapi != undefined) {
        window.initGapi();
    }
    else {
        setTimeout(init, 500); // wait for 500 ms
    }
 }

javascript - The correct order to load Google Client api gapi and angu...

javascript angularjs gapi
Rectangle 27 203

With jQuery and the Google AJAX Feed API

jQuery.getFeed({
   url     : FEED_URL,
   success : function (feed) {
      console.log(feed.title);
      // do more stuff here
   }
});
$.get(FEED_URL, function (data) {
    $(data).find("entry").each(function () { // or "item" or whatever suits your feed
        var el = $(this);

        console.log("------------------------");
        console.log("title      : " + el.find("title").text());
        console.log("author     : " + el.find("author").text());
        console.log("description: " + el.find("description").text());
    });
});

But that means you're relient on them being online and reachable.

Once you've successfully extracted the information you need from the feed, you could create DocumentFragments (with document.createDocumentFragment() containing the elements (created with document.createElement()) you'll want to inject to display your data.

Select the container element that you want on the page and append your document fragments to it, and simply use innerHTML to replace its content entirely.

$('#rss-viewer').append(aDocumentFragmentEntry);
$('#rss-viewer')[0].innerHTML = aDocumentFragmentOfAllEntries.innerHTML;

Using this question's feed, which as of this writing gives:

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:re="http://purl.org/atompub/rank/1.0">
    <title type="text">How to parse a RSS feed using javascript? - Stack Overflow</title>
    <link rel="self" href="https://stackoverflow.com/feeds/question/10943544" type="application/atom+xml" />
        <link rel="hub" href="http://pubsubhubbub.appspot.com/" />        
    <link rel="alternate" href="https://stackoverflow.com/q/10943544" type="text/html" />
    <subtitle>most recent 30 from stackoverflow.com</subtitle>
    <updated>2012-06-08T06:36:47Z</updated>
    <id>https://stackoverflow.com/feeds/question/10943544</id>
    <creativeCommons:license>http://www.creativecommons.org/licenses/by-sa/3.0/rdf</creativeCommons:license> 
    <entry>
        <id>https://stackoverflow.com/q/10943544</id>
        <re:rank scheme="http://stackoverflow.com">2</re:rank>
        <title type="text">How to parse a RSS feed using javascript?</title>
        <category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="javascript"/><category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="html5"/><category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="jquery-mobile"/>
        <author>
            <name>Thiru</name>
            <uri>https://stackoverflow.com/users/1126255</uri>
        </author>
        <link rel="alternate" href="https://stackoverflow.com/questions/10943544/how-to-parse-a-rss-feed-using-javascript" />
        <published>2012-06-08T05:34:16Z</published>
        <updated>2012-06-08T06:35:22Z</updated>
        <summary type="html">
            &lt;p&gt;I need to parse the RSS-Feed(XML version2.0) using XML and I want to display the parsed detail in HTML page, I tried in many ways. But its not working. My system is running under proxy, since I am new to this field, I don&#39;t know whether it is possible or not. If any one knows please help me on this. Thanks in advance.&lt;/p&gt;

        </summary>
    </entry>
    <entry>
        <id>https://stackoverflow.com/questions/10943544/-/10943610#10943610</id>
        <re:rank scheme="http://stackoverflow.com">1</re:rank>
        <title type="text">Answer by haylem for How to parse a RSS feed using javascript?</title>
        <author>
            <name>haylem</name>
            <uri>https://stackoverflow.com/users/453590</uri>
        </author>    
        <link rel="alternate" href="https://stackoverflow.com/questions/10943544/how-to-parse-a-rss-feed-using-javascript/10943610#10943610" />
        <published>2012-06-08T05:43:24Z</published>   
        <updated>2012-06-08T06:35:22Z</updated>
        <summary type="html">&lt;h1&gt;Parsing the Feed&lt;/h1&gt;

&lt;h3&gt;With jQuery&#39;s jFeed&lt;/h3&gt;

&lt;p&gt;Try this, with the &lt;a href=&quot;http://plugins.jquery.com/project/jFeed&quot; rel=&quot;nofollow&quot;&gt;jFeed&lt;/a&gt; &lt;a href=&quot;http://www.jquery.com/&quot; rel=&quot;nofollow&quot;&gt;jQuery&lt;/a&gt; plug-in&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;jQuery.getFeed({
   url     : FEED_URL,
   success : function (feed) {
      console.log(feed.title);
      // do more stuff here
   }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;With jQuery&#39;s Built-in XML Support&lt;/h3&gt;

&lt;pre&gt;&lt;code&gt;$.get(FEED_URL, function (data) {
    $(data).find(&quot;entry&quot;).each(function () { // or &quot;item&quot; or whatever suits your feed
        var el = $(this);

        console.log(&quot;------------------------&quot;);
        console.log(&quot;title      : &quot; + el.find(&quot;title&quot;).text());
        console.log(&quot;author     : &quot; + el.find(&quot;author&quot;).text());
        console.log(&quot;description: &quot; + el.find(&quot;description&quot;).text());
    });
});
&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;With jQuery and the Google AJAX APIs&lt;/h3&gt;

&lt;p&gt;Otherwise, &lt;a href=&quot;https://developers.google.com/feed/&quot; rel=&quot;nofollow&quot;&gt;Google&#39;s AJAX Feed API&lt;/a&gt; allows you to get the feed as a JSON object:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$.ajax({
  url      : document.location.protocol + &#39;//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;amp;num=10&amp;amp;callback=?&amp;amp;q=&#39; + encodeURIComponent(FEED_URL),
  dataType : &#39;json&#39;,
  success  : function (data) {
    if (data.responseData.feed &amp;amp;&amp;amp; data.responseData.feed.entries) {
      $.each(data.responseData.feed.entries, function (i, e) {
        console.log(&quot;------------------------&quot;);
        console.log(&quot;title      : &quot; + e.title);
        console.log(&quot;author     : &quot; + e.author);
        console.log(&quot;description: &quot; + e.description);
      });
    }
  }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;But that means you&#39;re relient on them being online and reachable.&lt;/p&gt;

&lt;hr&gt;

&lt;h1&gt;Building Content&lt;/h1&gt;

&lt;p&gt;Once you&#39;ve successfully extracted the information you need from the feed, you need to create document fragments containing the elements you&#39;ll want to inject to display your data.&lt;/p&gt;

&lt;hr&gt;

&lt;h1&gt;Injecting the content&lt;/h1&gt;

&lt;p&gt;Select the container element that you want on the page and append your document fragments to it, and simply use innerHTML to replace its content entirely.&lt;/p&gt;
</summary>
    </entry></feed>
$.get('https://stackoverflow.com/feeds/question/10943544', function (data) {
    $(data).find("entry").each(function () { // or "item" or whatever suits your feed
        var el = $(this);

        console.log("------------------------");
        console.log("title      : " + el.find("title").text());
        console.log("author     : " + el.find("author").text());
        console.log("description: " + el.find("description").text());
    });
});
$.ajax({
  url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('https://stackoverflow.com/feeds/question/10943544'),
  dataType : 'json',
  success  : function (data) {
    if (data.responseData.feed && data.responseData.feed.entries) {
      $.each(data.responseData.feed.entries, function (i, e) {
        console.log("------------------------");
        console.log("title      : " + e.title);
        console.log("author     : " + e.author);
        console.log("description: " + e.description);
      });
    }
  }
});
------------------------
title      : How to parse a RSS feed using javascript?
author     : Thiru
description: undefined
------------------------
title      : Answer by haylem for How to parse a RSS feed using javascript?
author     : haylem
description: undefined

@Thiru: I just tried the last method with this question's RSS feed (stackoverflow.com/feeds/question/10943544) and it worked fine for me.

You have might entire working code snippet here. I'm sure you can work out the rest on your own.

@Timmy: doing what? Are you a friend of Thiru? You have similar problem reporting techniques. I just copy-pasted the last 2 code snippets into my console and ran them and got the outputs as expected. What did you do, how, for what resource?

@haylem is this just an example for same domain requests? I get the following message: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at stackoverflow.com/feeds/question/10943544. (Reason: CORS header 'Access-Control-Allow-Origin' missing)."

html - How to parse an RSS feed using JavaScript? - Stack Overflow

javascript html rss
Rectangle 27 6

I found something interesting in the source code of https://apis.google.com/js/client.js. It reads:

gapi.load("client",{callback:window["gapi_onload"], ......

gapi.load is invoked as soon as client.js is loaded in the webpage. It seems like window.gapi_onload will be invoked as a callback once gapi.client is loaded.

Both gapi.auth and gapi.client are successfully printed to console.

I put this in the background section of my mainfest.json:

"background": {
  "scripts": [
    "background.js",
    "gapi-client.js"
  ]
}

in which background.js is the main background script in my extension. All content of gapi-client.js is directly copy-and-pasted from https://apis.google.com/js/client.js.

window.gapi_onload = function(){
  console.log('gapi loaded.', gapi.auth, gapi.client);

  // Do things you want with gapi.auth and gapi.client.
}
background.js
gapi-client.js
window["gapi_onload"]
window.gapi_onload

As a result window.gapi_onload is invoked as expected, with both gapi.auth and gapi.client populated.

In my solution I did not create a background.html on my own. I did not modify the content security policy either. However, notice that the solution is rather undocumented, thus is subject to change in the future.

Great solution! I've found the same thing but even using windo.gapi_onload is not very comfartable in modular application (I'm writing backbone.js application). Didn't you find any useful wrappers around this API?

when I include the gapi-client.js in my manifest, it tries to include a third external script from apis.google.com in the background.html source. Did you see this at all? Because it is effectively the same error for me. Here is the full url for the script: apis.google.com/_/scs/apps-static/_/js/

Loading Google API Javascript Client Library into Chrome Extension - S...

javascript google-chrome-extension google-api-java-client
Rectangle 27 6

I found something interesting in the source code of https://apis.google.com/js/client.js. It reads:

gapi.load("client",{callback:window["gapi_onload"], ......

gapi.load is invoked as soon as client.js is loaded in the webpage. It seems like window.gapi_onload will be invoked as a callback once gapi.client is loaded.

Both gapi.auth and gapi.client are successfully printed to console.

I put this in the background section of my mainfest.json:

"background": {
  "scripts": [
    "background.js",
    "gapi-client.js"
  ]
}

in which background.js is the main background script in my extension. All content of gapi-client.js is directly copy-and-pasted from https://apis.google.com/js/client.js.

window.gapi_onload = function(){
  console.log('gapi loaded.', gapi.auth, gapi.client);

  // Do things you want with gapi.auth and gapi.client.
}
background.js
gapi-client.js
window["gapi_onload"]
window.gapi_onload

As a result window.gapi_onload is invoked as expected, with both gapi.auth and gapi.client populated.

In my solution I did not create a background.html on my own. I did not modify the content security policy either. However, notice that the solution is rather undocumented, thus is subject to change in the future.

Great solution! I've found the same thing but even using windo.gapi_onload is not very comfartable in modular application (I'm writing backbone.js application). Didn't you find any useful wrappers around this API?

when I include the gapi-client.js in my manifest, it tries to include a third external script from apis.google.com in the background.html source. Did you see this at all? Because it is effectively the same error for me. Here is the full url for the script: apis.google.com/_/scs/apps-static/_/js/

Loading Google API Javascript Client Library into Chrome Extension - S...

javascript google-chrome-extension google-api-java-client
Rectangle 27 3

The content of those two files are (nearly) identical, and in fact it seems you can put any name before .js and it will load the same file. That said, I'd recommend sticking with the file names shown in the documentation, as those are guaranteed to work.

Interesting about any file working. I'm guessing it relates to the way Google's script loader works. The way the files are used in the example were different which made me think the API was different. But comparing the actual file show they are mostly the same. I guess it's just something internal to Google that we will never know. :)

app.js JavaScript API on Google Drive - Stack Overflow

javascript google-api google-drive-sdk google-drive-realtime-api
Rectangle 27 1

I did some work around this and now I can force select 1st option from google placces using angular js and angular Autocomplete module. Thanks to kuhnza my code

<form method="get" ng-app="StarterApp"  ng-controller="AppCtrl" action="searchresults.html" id="target" autocomplete="off">
   <br/>
    <div class="row">
    <div class="col-md-4"><input class="form-control" tabindex="1" autofocus g-places-autocomplete force-selection="true"  ng-model="user.fromPlace" placeholder="From Place" autocomplete="off"   required>
    </div>
        <div class="col-md-4"><input class="form-control" tabindex="2"  g-places-autocomplete force-selection="true"  placeholder="To Place" autocomplete="off" ng-model="user.toPlace" required>
    </div>
    <div class="col-md-4"> <input class="btn btn-primary"  type="submit" value="submit"></div></div><br /><br/>
    <input class="form-control"  style="width:40%" type="text" name="sourceAddressLat" placeholder="From Place Lat" id="fromLat">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddressLang" placeholder="From Place Long" id="fromLong">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddress" placeholder="From Place City" id="fromCity">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLat" placeholder="To Place Lat" id="toLat">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLang" placeholder="To Place Long"id="toLong">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddress"placeholder="To Place City" id="toCity">
</form>

javascript - Google maps Places API V3 autocomplete - select first opt...

javascript google-maps autocomplete google-maps-api-3
Rectangle 27 1

I did some work around this and now I can force select 1st option from google placces using angular js and angular Autocomplete module. Thanks to kuhnza my code

<form method="get" ng-app="StarterApp"  ng-controller="AppCtrl" action="searchresults.html" id="target" autocomplete="off">
   <br/>
    <div class="row">
    <div class="col-md-4"><input class="form-control" tabindex="1" autofocus g-places-autocomplete force-selection="true"  ng-model="user.fromPlace" placeholder="From Place" autocomplete="off"   required>
    </div>
        <div class="col-md-4"><input class="form-control" tabindex="2"  g-places-autocomplete force-selection="true"  placeholder="To Place" autocomplete="off" ng-model="user.toPlace" required>
    </div>
    <div class="col-md-4"> <input class="btn btn-primary"  type="submit" value="submit"></div></div><br /><br/>
    <input class="form-control"  style="width:40%" type="text" name="sourceAddressLat" placeholder="From Place Lat" id="fromLat">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddressLang" placeholder="From Place Long" id="fromLong">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddress" placeholder="From Place City" id="fromCity">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLat" placeholder="To Place Lat" id="toLat">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLang" placeholder="To Place Long"id="toLong">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddress"placeholder="To Place City" id="toCity">
</form>

javascript - Google maps Places API V3 autocomplete - select first opt...

javascript google-maps autocomplete google-maps-api-3
Rectangle 27 1

I did some work around this and now I can force select 1st option from google placces using angular js and angular Autocomplete module. Thanks to kuhnza my code

<form method="get" ng-app="StarterApp"  ng-controller="AppCtrl" action="searchresults.html" id="target" autocomplete="off">
   <br/>
    <div class="row">
    <div class="col-md-4"><input class="form-control" tabindex="1" autofocus g-places-autocomplete force-selection="true"  ng-model="user.fromPlace" placeholder="From Place" autocomplete="off"   required>
    </div>
        <div class="col-md-4"><input class="form-control" tabindex="2"  g-places-autocomplete force-selection="true"  placeholder="To Place" autocomplete="off" ng-model="user.toPlace" required>
    </div>
    <div class="col-md-4"> <input class="btn btn-primary"  type="submit" value="submit"></div></div><br /><br/>
    <input class="form-control"  style="width:40%" type="text" name="sourceAddressLat" placeholder="From Place Lat" id="fromLat">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddressLang" placeholder="From Place Long" id="fromLong">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddress" placeholder="From Place City" id="fromCity">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLat" placeholder="To Place Lat" id="toLat">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLang" placeholder="To Place Long"id="toLong">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddress"placeholder="To Place City" id="toCity">
</form>

javascript - Google maps Places API V3 autocomplete - select first opt...

javascript google-maps autocomplete google-maps-api-3
Rectangle 27 1

Turns out it wasn't loading the api correctly(the reason my gapi object was missing functions), fixed by adding the <script src="https://apis.google.com/js/client.js?onload=onApiLoad"></script> in the header.

Google Drive SDK/API gapi can't load auth on IIS server(Javascript) - ...

javascript google-api google-drive-sdk gapi
Rectangle 27 2

have you done reading/using the google custom markers?. If not visit google custom marker this might answer your question, who knows.

I read so much the documentation! My question is how to create some stylers and the documentation do not treat about this. You do not very well understand my question. Sorry.

javascript - Create styler using google maps api 3 and js - Stack Over...

javascript google-maps google-maps-api-3
Rectangle 27 1

You are trying to use a service account with the Google JavaScript client library which does not support service accounts.

Switch to Oauth2 authentication or if you must use a service account switch to a server sided language like PHP or python for example. Which support service account authentication.

My original intention was to use the FusionTables as a lightweight db to power a standalone GAS deployed as a Web App accessed by anyone, even anonymous. And to reduce latency, I decided to make the request from the client-side (HTMLService). I was trying to figure out how to do it, when I came across the JS client library, and although it explicitly says that sandbox environments like iframes are not supported (I guess that precludes my original environment), I decided to experiment with it a bit to learn to use it in other projects. So how do you suggest I approach the original problem?

I think you should open another question with your original problem. Try and point out what you have tried and what hasn't worked.

oauth - authenticating a service account to call a Google API with Jav...

javascript oauth google-api google-api-js-client