Google Fusion Tables API

Fusion Tables Layer Example: Open Info Window on Query


<!DOCTYPE html>
<!--
  Copyright 2011 Google Inc. All Rights Reserved.

  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

      http://www.apache.org/licenses/LICENSE-2.0

  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.
-->
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

    <title>Fusion Tables Layer Example: Open Info Window on Query</title>

    <link href="/apis/fusiontables/docs/samples/style/default.css"
        rel="stylesheet" type="text/css">
    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <script type="text/javascript">
      google.load('visualization', '1');

      function initialize() {
        var tableid = '15UY2pgiz8sRkq37p2TaJd64U7M_2HDVqHT3Quw';
        var geocoder = new google.maps.Geocoder();
        var infoWindow = new google.maps.InfoWindow();

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(37.5, -122.1),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var marker = new google.maps.Marker({
          map: map,
          animation: google.maps.Animation.DROP
        });

        var layer = new google.maps.FusionTablesLayer({
          query: {
            select: "'Delivery Zone'",
            from: tableid,
            where: "delivery = 'yes'"
          },
          map: map
        });

        var geocodeAddress = function() {
          var enteredAddress = document.getElementById('address').value;
          geocoder.geocode({
            address: enteredAddress
          }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {

              coordinate = results[0].geometry.location;

              marker.setAnimation(google.maps.Animation.DROP);
              marker.setPosition(coordinate);

              // Note: this query is approximate to 0.001 meters!
              var queryList = [];
              queryList.push("SELECT 'Store Name', Address FROM ");
              queryList.push(tableid);
              queryList.push(" WHERE delivery = 'yes' AND ");
              queryList.push("ST_INTERSECTS('Delivery Zone', ");
              queryList.push('CIRCLE(LATLNG(');
              queryList.push(coordinate.lat());
              queryList.push(',');
              queryList.push(coordinate.lng());
              queryList.push('), 0.001))');

              var query = encodeURIComponent(queryList.join(''));
              var gvizQuery = new google.visualization.Query(
                  'http://www.google.com/fusiontables/gvizdata?tq=' + query);

              gvizQuery.send(function(response) {
                var datatable = response.getDataTable();
                var header = 'No results';
                var content = 'Sorry, no store delivers here.';
                if (datatable && datatable.getNumberOfRows()) {
                  header = datatable.getValue(0, 0);
                  content = datatable.getValue(0, 1);
                }

                infoWindow.setContent('<h3>' + header + '</h3>' +
                    '<p>' + content + '</p>');
                infoWindow.setPosition(coordinate);
                infoWindow.open(map);
              });

            } else {
              alert('Error geocoding address');
            }
          });
        };

        // On button click or enter key press, geocode the address
        google.maps.event.addDomListener(document.getElementById('go'),
            'click', geocodeAddress);
        google.maps.event.addDomListener(window, 'keypress', function(e) {
          if (e.keyCode == 13) {
            geocodeAddress();
          }
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body onload="initialize()">
    <div id="map-canvas"></div>
    <input type="text" value="Milpitas, CA" id="address">
    <input type="button" id="go" value="Go">
  </body>
</html>

Authentification requise

Vous devez être connecté à Google+ pour effectuer cette opération.

Connexion en cours…

Le site Google pour les développeurs a besoin de votre autorisation pour effectuer cette opération.