Search code examples
htmlgoogle-maps-api-3google-fusion-tables

Info window two layers polygon and marker

I've been using fusion tables layer wizard. The first layer is a map with markers within a city. The second one is the polygon of this city. In the new map, I only want the info window of the first layer to work. How can I suppress the info window of the polygon? Here is the code:

<!DOCTYPE html>
<html>
  <head>
  <style>
    #map-canvas { width:500px; height:400px; }
    .layer-wizard-search-label { font-family: sans-serif };
  </style>
  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
    var map;
    var layer_0;
    var layer_1;
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(49.38240150737995, 11.039327819824182),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      layer_0 = new google.maps.FusionTablesLayer({
        query: {
          select: "col1",
          from: "1MamWhdXCiB-m2Ak9gppNY9ZflBJsdGWvhSSR9NMB"
        },
        map: map,
        styleId: 3,
        templateId: 4
      });
      layer_1 = new google.maps.FusionTablesLayer({
        query: {
          select: "col8",
          from: "1Xr-majg8ib430CcbcPP3OR50Eoe3biu0cczlhw1Y"
        },
        map: map,
        styleId: 2,
        templateId: 2
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
Solution

  • Disable the default infowindows by adding the "suppressInfoWindows: true" option to the FusionTablesLayer constructor for the layer that you don't want to have infowindows.

    From the documentation:

    suppressInfoWindows | Type: boolean

    Suppress the rendering of info windows when layer features are clicked.

    You also need to put the polygon layer on the bottom (add it to the map first).

    code snippet:

    var map;
var layer_0;
var layer_1;

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(49.38240150737995, 11.039327819824182),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  // polygons, no infowindow, put on bottom
  layer_1 = new google.maps.FusionTablesLayer({
    query: {
      select: "col8",
      from: "1Xr-majg8ib430CcbcPP3OR50Eoe3biu0cczlhw1Y"
    },
    map: map,
    suppressInfoWindows: true,
    styleId: 2,
    templateId: 2
  });
  // markers, infowindows, put on top
  layer_0 = new google.maps.FusionTablesLayer({
    query: {
      select: "col1",
      from: "1MamWhdXCiB-m2Ak9gppNY9ZflBJsdGWvhSSR9NMB"
    },
    map: map,
    styleId: 3,
    templateId: 4
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
    html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
    <script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>