Google Maps JavaScript API与Fusion Tables - 如何获得自定义信息窗口

问题描述：

我有一个类似的问题this post，但我不知道他们从哪里得到templateId。我还没有设法抑制默认的信息窗口（即使我认为我把正确的代码），我不知道如何让我的自定义信息窗口从我的融合表显示出来。从这个其他人的代码，它看起来像我需要指定一个templateId，所以API知道如何格式化窗口。现在我有以下代码来初始化地图。Google Maps JavaScript API与Fusion Tables - 如何获得自定义信息窗口

 //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，我是否缺少其他的东西，我需要让我的自定义信息窗口显示在点击标记上？谢谢。

答

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

太让你自定义信息窗口只需插入你在图层中找到的值。对于我的地图，我把它们放在

iconName: "measle_turquoise"}} 
        ],

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

Google Maps JavaScript API与Fusion Tables - 如何获得自定义信息窗口

相关推荐