与融合表地图，自定义标记和infowindow的问题

Question

我一直在研究融合表地图。我试图添加自定义标记和infowindows，但我有问题让它显示我的标记和infowindows。我认为我有一些不符合规定的内容，或者可能有一些我无法找到的语法错误。我对这个过程有点困惑。我将不胜感激任何帮助。

var tableId ="1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds"; // original table 

google.load('visualization', '1'); 

var map; 
var markers = []; 
var infoWindow = new google.maps.InfoWindow(); 

function initialize() { 
     var ak = new google.maps.LatLng(64.958056,-147.618333); 

     map = new google.maps.Map(document.getElementById('map_canvas'), { 
     center: ak, 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

    var queryStr = "SELECT name, lat, lng, description FROM "+tableId+" ORDER BY name"; 
    document.getElementById('info').innerHTML += queryStr +"<br>"; 
    var queryText = encodeURIComponent(queryStr); 
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 

    query.send(getData); 
} 

function getData(response) { 
    if (!response) { 
     alert('no response'); 
     return; 
    } 
    if (response.isError()) { 
     alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
     return; 
    } 
    var dt = response.getDataTable(); 

    document.getElementById('info').innerHTML += "rows="+dt.getNumberOfRows()+"<br>"; 
    for (var i = 0; i < dt.getNumberOfRows(); i++) { 
     var lat = dt.getValue(i,1); 
     var lng = dt.getValue(i,2); 
     var name = dt.getValue(i,0); 
     var description = dt.getValue(i,3); 
    } 
    var pt = new google.maps.LatLng(lat, lng); 

    var html = "<span style='font-size:13px;font-weight:bold;color:#236192;'>" + name + "</span><p style='font-size:12px;'>" + description + "</p>"; 

var info = html; 

} 
function createMarker(pt,info) { 
    var iconURL = 'uaf-icon.png';    
    var iconSize = new google.maps.Size(29,60); 
    var iconOrigin = new google.maps.Point(0,0);  
    var iconAnchor = new google.maps.Point(15,60); 
    var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor); 

    var shadowURL = 'uaf-shadow.png';   
    var shadowSize = new google.maps.Size(63, 60); 
    var shadowOrigin = new google.maps.Point(0, 0); 
    var shadowAnchor = new google.maps.Point(15, 60); 
    var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor); 

    var iconShape = [18,0,20,1,22,2,23,3,24,4,25,5,26,6,27,7,27,8,28,9,28,10,28,11,28,12,28,13,28,14,28,15,28,16,28,17,28,18,28,19,27,20,27,21,26,22,26,23,25,24,24,25,23,26,21,27,20,28,16,29,21,31,21,32,21,33,21,34,21,35,20,36,20,37,20,38,19,39,19,40,19,41,18,42,18,43,18,44,18,45,17,46,17,47,17,48,17,49,16,50,16,51,16,52,15,53,15,54,15,55,14,56,14,57,14,58,14,59,13,59,13,58,13,57,13,56,12,55,12,54,12,53,12,52,11,51,11,50,11,49,11,48,11,47,10,46,10,45,10,44,10,43,9,42,9,41,9,40,9,39,9,38,8,37,8,36,8,35,8,34,8,33,7,32,7,31,12,29,9,28,7,27,6,26,4,25,3,24,3,23,2,22,1,21,1,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,1,9,1,8,2,7,2,6,3,5,4,4,5,3,6,2,8,1,10,0,18,0]; 
var myMarkerShape = { 
     coord: iconShape, 
     type: 'poly' 
    }; 

var myMarkerOpts = { 
     position: point, 
     map: map, 
     icon: myIcon, 
     shadow: myShadow, 
     shape: myMarkerShape 
    }; 

var marker = new google.maps.Marker(myMarkerOpts); 

markers.push(marker); 

google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.close(); 
     infoWindow.setContent(info); 
     infoWindow.open(map,marker); 
    }); 
} 

function myclick(num) { 
google.maps.event.trigger(markers[num], "click"); 
} 

Answer 1

1. 首先得到使用默认的标记显示在地图上。你是不是调用createMarker功能（或创建任何标记）：

   for (var i = 0; i < dt.getNumberOfRows(); i++) { 
       var lat = dt.getValue(i,1); 
       var lng = dt.getValue(i,2); 
       var name = dt.getValue(i,0); 
       var description = dt.getValue(i,3); 
       var pt = new google.maps.LatLng(lat, lng); 
       createMarker(pt,"<b>"+name+"</b><br>"+description); 
   } 
   

2. 存在createMarker一个错字（有没有“点”的功能范围变量，它应该是“PT” ），查找并解决JavaScript控制台中的任何错误。

   function createMarker(pt,info) { 
       var iconURL = 'uaf-icon.png';    
       var iconSize = new google.maps.Size(29,60); 
       var iconOrigin = new google.maps.Point(0,0);  
       var iconAnchor = new google.maps.Point(15,60); 
       var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor); 
   
       var shadowURL = 'uaf-shadow.png';   
       var shadowSize = new google.maps.Size(63, 60); 
       var shadowOrigin = new google.maps.Point(0, 0); 
       var shadowAnchor = new google.maps.Point(15, 60); 
       var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor); 
   
       var iconShape = [18,0,20,1,22,2,23,3,24,4,25,5,26,6,27,7,27,8,28,9,28,10,28,11,28,12,28,13,28,14,28,15,28,16,28,17,28,18,28,19,27,20,27,21,26,22,26,23,25,24,24,25,23,26,21,27,20,28,16,29,21,31,21,32,21,33,21,34,21,35,20,36,20,37,20,38,19,39,19,40,19,41,18,42,18,43,18,44,18,45,17,46,17,47,17,48,17,49,16,50,16,51,16,52,15,53,15,54,15,55,14,56,14,57,14,58,14,59,13,59,13,58,13,57,13,56,12,55,12,54,12,53,12,52,11,51,11,50,11,49,11,48,11,47,10,46,10,45,10,44,10,43,9,42,9,41,9,40,9,39,9,38,8,37,8,36,8,35,8,34,8,33,7,32,7,31,12,29,9,28,7,27,6,26,4,25,3,24,3,23,2,22,1,21,1,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,1,9,1,8,2,7,2,6,3,5,4,4,5,3,6,2,8,1,10,0,18,0]; 
       var myMarkerShape = { 
        coord: iconShape, 
        type: 'poly' 
       }; 
   
       var myMarkerOpts = { 
       position: pt, 
       map: map, 
       icon: myIcon, 
       shadow: myShadow, 
       shape: myMarkerShape */ 
       }; 
   
       var marker = new google.maps.Marker(myMarkerOpts); 
   
       markers.push(marker); 
   
       google.maps.event.addListener(marker, 'click', function() { 
       infoWindow.close(); 
       infoWindow.setContent(info); 
       infoWindow.open(map,marker); 
       }); 
   } 
   

working example (with default icons)