使用Fusion Tables的Google Maps Javascript API - 如何获取自定义信息窗口

时间:2017-06-12 23:42:29

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

我对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,我错过了我需要的其他任何东西,让我的自定义信息窗口显示点击标记?感谢。

1 个答案:

答案 0 :(得分:1)

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

为您提供自定义信息窗口,只需插入您在图层中找到的值即可。对于我的地图,我把它们放在

之后
iconName: "measle_turquoise"}}
                  ],

和繁荣我有我的自定义信息窗口!希望这可以帮助。 my ugly info windows 我试图嵌入图像,但没有足够的slackoverflow点,我想