CODEWITHSUNDEEP
google-fusion-tables
Daniel Montenegro
Daniel Montenegro

Reputation: 1559

fusion tables map isn't showing

I saved this code as an html file, but I'm not being able to visualize the map. I took the code directly from FusionTablesLayer Wizard 2.0. Is it something wrong with the code? I thought that it would be 'ready to use'. I need some help!

<!DOCTYPE html>
<html>
  <head>
  <style>
    #map-canvas { width:500px; height:400px; }
  </style>
  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
    var map;
    var layerl0;
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(0, 0),
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      layerl0 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
      from: 1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc
    },
    map: map
  });
}
function changeMapl0() {
  var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
  layerl0.setOptions({
    query: {
      select: "'geometry'",
      from: 1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc,
      where: "'NOME' = '" + searchString + "'"
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div style="margin-top: 10px;">
      <label>Escolha a cidade</label>
      <select id="search-string-l0" onchange="changeMapl0(this.value);">
        <option value="">--Select--</option>
    <option value="ALVORADA">ALVORADA</option>
    <option value="ARARICA">ARARICA</option>
    <option value="ARROIO DOS RATOS">ARROIO DOS RATOS</option>
    <option value="CACHOEIRINHA">CACHOEIRINHA</option>
    <option value="CAMPO BOM">CAMPO BOM</option>
    <option value="CANOAS">CANOAS</option>
    <option value="CAPELA DE SANTANA">CAPELA DE SANTANA</option>
    <option value="CHARQUEADAS">CHARQUEADAS</option>
    <option value="DOIS IRMAOS">DOIS IRMAOS</option>
    <option value="ELDORADO DO SUL">ELDORADO DO SUL</option>
    <option value="ESTANCIA VELHA">ESTANCIA VELHA</option>
    <option value="ESTEIO">ESTEIO</option>
    <option value="GLORINHA">GLORINHA</option>
    <option value="GRAVATAI">GRAVATAI</option>
    <option value="GUAIBA">GUAIBA</option>
    <option value="IVOTI">IVOTI</option>
    <option value="MONTENEGRO">MONTENEGRO</option>
    <option value="NOVA HARTZ">NOVA HARTZ</option>
    <option value="NOVA SANTA RITA">NOVA SANTA RITA</option>
    <option value="NOVO HAMBURGO">NOVO HAMBURGO</option>
    <option value="PAROBE">PAROBE</option>
    <option value="PORTAO">PORTAO</option>
    <option value="PORTO ALEGRE">PORTO ALEGRE</option>
    <option value="ROLANTE">ROLANTE</option>
    <option value="SANTO ANTONIO DA PATRULHA">SANTO ANTONIO DA PATRULHA</option>
    <option value="SAO JERONIMO">SAO JERONIMO</option>
    <option value="SAO LEOPOLDO">SAO LEOPOLDO</option>
    <option value="SAPIRANGA">SAPIRANGA</option>
    <option value="SAPUCAIA DO SUL">SAPUCAIA DO SUL</option>
    <option value="TAQUARA">TAQUARA</option>
    <option value="TRIUNFO">TRIUNFO</option>
    <option value="VIAMAO">VIAMAO</option>
  </select>
</div>
  </body>
  </html>

Upvotes: 0

Views: 419

Answers (2)

Eric Bridger
Eric Bridger

Reputation: 3794

My understanding was that the encrypted doc id's only apply to the Fusion Table API but not to the GMaps API for Fusion Table layers. Visit your table via the FT UI and select File -> About which will display both the Encrypted Id and the Numeric ID. Try using the Numeric ID instead of the encrypted id:

layerl0 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
      from: 1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc  // change this to numeric id
    },

Upvotes: 0

Odi
Odi

Reputation: 6916

The only missing thing are the quotes around the encoded table ids :-)

function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(0, 0),
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      layerl0 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
      from: "1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc"
    },
    map: map
  });
}

function changeMapl0() {
  var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
  layerl0.setOptions({
    query: {
      select: "'geometry'",
      from: "1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc",
      where: "'NOME' = '" + searchString + "'"
    }
  });
}

I put your code on jsFiddle with my correction.

Upvotes: 1

Related Questions