codelabs Loction data with big query ,Uncaught TypeError: Cannot read property 'jobId' of undefined

156 views
Skip to first unread message

varun kumar

unread,
Sep 27, 2017, 9:04:13 AM9/27/17
to gce-discussion

I am working on the following google cloud codelab 



    var billingProjectId = 'I enter my project id"
    var publicProjectId ="I enter my project id "
    var datasetId = 'new_york';
    var tableName = 'tlc_yellow_trips_2016';

/// what is mentioned in  documentation  is following 

Uncaught TypeError: Cannot read property 'jobId' of undefined 



the following is the code of the code lab; I think my details of the variable above are incorrect I a not able to figure out the value of billing and public project id I have tried values of project id and big query project id but still the error persists



the following is the code:-



<!DOCTYPE html>
<html>
<!--
Copyright 2016 Google Inc.

Licensed under the Apache License, Version 2.0 (the 'License');
you may not use this file except in compliance with the License.
You may obtain a copy of the License at


Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an 'AS IS' BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }     
    </style>
    <script type="text/javascript">
    // Client ID for OAuth 2.0 authorization against BigQuery.
    var clientId ="i know the clientId"
    // BigQuery settings. Replace these with your project, dataset and table names.
    var billingProjectId ='hellboyvarun013';
    //var publicProjectId ='BigQueryMapsAPICodelab';
    var publicProjectId= 'bigquery-public-data';
    var datasetId = 'new_york';
    var tableName = 'tlc_yellow_trips_2016';

    var map;
    var jobCheckTimer;

    // Check if the user is authorized.
    function authorize(event) {
      gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
      return false;
    }

    // If authorized, load BigQuery API
    function handleAuthResult(authResult) {
      if (authResult && !authResult.error) {
        loadApi();
        console.log("loadApi");
      } else {
        console.error('Not authorized.')
      }
    }

    // Load BigQuery client API and then initialize the map.
    function loadApi(){
      gapi.client.load('bigquery', 'v2').then(
        function() {
          console.log("goes to initmap");
          initMap();
        }
      );
    }

    // Send a query to BigQuery using the Google Client API for JavaScript.
    function sendQuery(queryString){
      console.log("query sent");
      var request = gapi.client.bigquery.jobs.query({
          'query': queryString,
          'timeoutMs': 30000,
          'datasetId': datasetId,
          'projectId': billingProjectId,
          'useLegacySql':false
      });
      request.execute(function(response) {
          checkJobStatus(response.jobReference.jobId);
      });
    }

    // Poll a job to see if it has finished executing.
    function checkJobStatus(jobId){
      var request = gapi.client.bigquery.jobs.get({
        'projectId': billingProjectId,
        'jobId': jobId
      });
      request.execute(function(response){
        if (response.status.errorResult){
          // Handle any errors
          console.log(response.status.error);
          console.log("request _error");

        } else {
          if (response.status.state == 'DONE'){
            // Get the results
            clearTimeout(jobCheckTimer);
            getQueryResults(jobId);
            console.log("request sent");

          } else {
            // Not finished, check again in a moment
            jobCheckTimer = setTimeout(checkJobStatus, 500, [jobId]);
          }
        }
      });
    }

    // When a BigQuery job has completed, fetch the results.
    function getQueryResults(jobId){
      var request = gapi.client.bigquery.jobs.getQueryResults({
        'projectId': billingProjectId,
        'jobId': jobId
      });
      request.execute(function(response){
        // Do something with the results
      })
    }

    // Map-related functions.

    function initMap() {
      console.log("inside initmap");
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York
        zoom: 12
      });
      setUpDrawingTools();
    }

    // Add the DrawingManager and set up drawing event handlers.
    function setUpDrawingTools(){
      // Initialize drawing manager
      console.log("inside drawing tools");
      drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.CIRCLE,
        drawingControl: true,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_LEFT,
          drawingModes: [
            google.maps.drawing.OverlayType.CIRCLE,
            google.maps.drawing.OverlayType.POLYGON,
            google.maps.drawing.OverlayType.RECTANGLE
          ]
        },
        circleOptions: {
          fillOpacity: 0
        },
        polygonOptions: {
          fillOpacity: 0
        },
        rectangleOptions: {
          fillOpacity: 0
        }
      });
      drawingManager.setMap(map);

      // Handle the drawing events.
      drawingManager.addListener('rectanglecomplete', function (rectangle) {
        rectangleQuery(rectangle.getBounds());
              console.log("inside rectangle maker");

      });

      drawingManager.addListener('circlecomplete', function (circle) {
        // We will add code here in a later step.
      });

      drawingManager.addListener('polygoncomplete', function (polygon) {
        // We will add code here in a later step.
      });
    }

    // Query-related functions.

    // Query locations by rectangular area.
    function rectangleQuery(latLngBounds){
            console.log("inside rect query maker");

      var queryString = rectangleSQL(latLngBounds.getNorthEast(), latLngBounds.getSouthWest());
      sendQuery(queryString);
    }

    function rectangleSQL(ne, sw){
      console.log("rect query SELECT form");

      var queryString = 'SELECT pickup_latitude, pickup_longitude '
      queryString +=  'FROM `' + publicProjectId +'.' + datasetId + '.' + tableName + '`'
      queryString += ' WHERE pickup_latitude > ' + sw.lat();
      queryString += ' AND pickup_latitude < ' + ne.lat();
      queryString += ' AND pickup_longitude > ' + sw.lng();
      queryString += ' AND pickup_longitude < ' + ne.lng();
      return queryString;
    }
    </script>
  </head>
  <body>
    <div id="map"></div>
    async defer></script>
    <script src="https://apis.google.com/js/client.js"></script>
    <script type="text/javascript">
      gapi.load('client:auth', authorize);
    </script>
  </body>
</html>


Faizan (Google Cloud Support)

unread,
Sep 27, 2017, 4:39:42 PM9/27/17
to gce-discussion
Hello Varun,

As your question is related to BigQuery and not GCE, I would recommend posting your question on Stack Overflow with google-bigquery tag for further assistance.

I hope that helps.

Faizan

Niyas

unread,
Jun 18, 2019, 8:07:54 PM6/18/19
to gce-discussion
hey i am facing the same issue.did u find the solution?

Ali T (Cloud Platform Support)

unread,
Jul 16, 2019, 4:12:12 PM7/16/19
to gce-discussion
Hey,

As indicated by Faizan, given this is unrelated to the topic of this discussion group (GCE), I would suggest bringing that question up on Stackoverflow under the google-bigquery tag to have the right people see it. 

Reply all
Reply to author
Forward
0 new messages