Google Maps Javascript API with Fusion Tables - 如何获取自定义信息窗口答案

【问题标题】：Google Maps Javascript API with Fusion Tables - How to get Custom Info WindowGoogle Maps Javascript API with Fusion Tables - 如何获取自定义信息窗口
【发布时间】：2017-11-14 13:40:41
【问题描述】：

我有一个与this post 类似的问题，但我不知道他们从哪里得到templateId。我没有设法抑制默认信息窗口（即使我认为我输入了正确的代码），而且我不知道如何从我的融合表中显示我的自定义信息窗口。从其他人的代码看来，我需要指定一个templateId，以便 API 知道如何格式化窗口。现在我有以下代码来初始化地图。

      //CREATE AN INSTANCE OF A GOOGLE MAP
        map = new google.maps.Map(document.getElementById('map'), {
          //MAP BASED ON FOLLOWING CONTROLS AND THEIR OPTIONS
           center: {lat:33.746828, lng:-118.299448},
           zoom: 13,
           rotateControl: true,
           scaleControl: true,
           mapTypeControl: true,
           mapTypeControlOptions: {
             style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
             position: google.maps.ControlPosition.TOP_LEFT,
            mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
                    'styled_map']
          },
           streetViewControl: true,
               streetViewControlOptions: {
               position: google.maps.ControlPosition.LEFT_TOP},
           zoomControl: true,
               zoomControlOptions: {
               position: google.maps.ControlPosition.LEFT_TOP},
           fullscreenControl: true,
               fullscreenControlOptions: {
               position: google.maps.ControlPosition.TOP_LEFT}
     });
  var infoWindow = new google.maps.InfoWindow();
  //CALL INSTANCE OF NEW LAYER ADDING IN MY FUSION TABLE
        var layer = new google.maps.FusionTablesLayer({
  //BASED ON A QUERY TO THE FUSION DATA AND DEFINING COORDINATES
    query: {
      select: "Location",
      from: '1h7ZlgimMOBfutZ2dLspShafWRnNE2TlNmQgVPb1T'
    },
          styles: [{
  markerOptions: {
  iconName: "measle_turquoise"}}
                  ],
 suppressInfoWindows: true
          
  });
  google.maps.event.addListener(layer, 'click', function(e) {windowControl(e, infoWindow, map);
            });
  function windowControl(e, infoWindow, map) {
            infoWindow.setOptions({
                content: e.infoWindowHtml,
                position: e.latLng,
                pixelOffset: e.pixelOffset
            });
            infoWindow.open(map);
        }
  layer.setMap(map);

        //ADD MY CUSTOM STYLE TO THE LIST OF MAP TYPES AND SET IT TO ACTIVE
        map.mapTypes.set('styled_map', styledMapType);
        map.setMapTypeId('styled_map');

对不起，它有很多代码。我的主要问题是我如何找到这个 templateId 并且我是否遗漏了任何其他我需要让我的自定义信息窗口在单击标记时显示的内容？谢谢。

【问题讨论】：

标签： javascript google-maps-api-3 google-fusion-tables

【解决方案1】：

我找到了它，但我会留下它，因为它不是那么明显。 templateId 和 styleId 值可以在 Fusion Table 中找到。从 Fusion Tables 中转到 工具 -> 发布。现在激活“获取 Html 和 Javascript” 的下拉菜单。在这里你会找到它们。我正在为我妈妈制作具有不同风格的自定义地图，并且我正在使用各种服务，因此它提供的代码与我的不同，但 templateId 和 styleId 仍然有效。现在我只需要让我的自定义样式不那么难看......我也想知道为什么它不默认显示自定义样式。如果您要在 fusionTableLayer 中引入您的自定义数据，为什么不使用信息窗口。我确信有一个简单的答案可能与比我的更复杂的地图（包含更多图层）有关，但我看不出来。

也可以让您自定义信息窗口，只需插入您在图层中找到的值。对于我的地图，我将它们放在

之后

iconName: "measle_turquoise"}}
                  ],

我有我的自定义信息窗口！希望这可以帮助。 my ugly info windows 我尝试嵌入图像，但我猜没有足够的 slackoverflow 点

【讨论】：