4_TemperatureHeatmapFromBigQueryOnMap/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Scoped heatmap example</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="mapstyle.css">
    <script type="text/javascript" src="mapinteraction.js"></script>
  </head>
  <body>
    <h2>Worldwide maximum temperatures in Jan 2015</h2>
    Draw an area on the map to fetch results for that area. <br /><br />

    <!--The div element for the map. We will attach the map via the JS above -->
    <div id="map"></div>

    <!-- LOADING SPINNER -->
    <img id="spinner" class="fade" src="img/loader.gif">
    <!-- MENU -->
    <div id="menu">
        <div id="stats">
            <h3>Statistics:</h3>
            <table>
                <tr>
                    <td>Total Locations:</td><td id="rowCount"> - </td>
                </tr>
                <tr>
                    <td>Query Execution:</td><td id="duration"> - </td>
                </tr>
                <tr>
                    <td>Data Processed:</td><td id="bytes"> - </td>
                </tr>
            </table>
        </div>
    </div>
    <!-- MENU END -->

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <!-- Note that we load the visualization & drawing library here in the querystring, for allowing the user to draw an area on the map & displaying heatmaps in that area -->
    <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization,drawing&key=[Your-Api-Key]" async defer></script>
    
    <!-- You will use the Google Client API for Javascript to run queries against BigQuery. -->
    <script src="https://apis.google.com/js/client.js"></script>
    
    <!-- The end user of the application needs to authorize the application to access data in BigQuery on their behalf.
         The Google Client API for JavaScript handles the OAuth logic to do this. -->
    <script type="text/javascript">
      gapi.load('client:auth', authorize);
    </script>
  </body>
</html>