Javascript 马克赢了'；它不会出现在地图上，但地图显示得很好

我很难把艺术标记载入地图。Google提供的脚本在我的网站上呈现了一张空白地图，但是标记和地图在JSFIDLE上的显示应该是一样的。任何帮助都将不胜感激

代码如下：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

google.charts.load('current', {'packages': ['geochart']});
google.charts.setOnLoadCallback(drawMarkersMap);

  function drawMarkersMap() {
  var data = google.visualization.arrayToDataTable([
    ['City', 'Collaborator'],
    ['Detroit', "text here"],
    ['Cleveland', "text here"],
    ['Joondalup', "text here"],
    ['Wanaka', "text here"]
    ['Liverpool', "text here"],
    ['Styria', "text here"],
    ['Edwardsville', "text here"],
    ['Austin', "text here"],
    ['Houston', "text here"],
    ['Stockholm', "text here"],
    ]);

  var options = {
    region: 'world',
    displayMode: 'markers',
    backgroundColor: '#252426',
    colorAxis: {colors: ['blue']},
    magnifyingGlass: {enable: false},
    defaultColor: '#f1910e',
    enableRegionInteractivity: 'true',
     };

  var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  chart.draw(data, options);
};
</script>

load（'current'，{'packages'：['geochart']}）；
google.charts.setOnLoadCallback（drawMarkersMap）；
函数drawMarkersMap（）{
var data=google.visualization.arrayToDataTable([
[“城市”、“合作者”]，
[‘底特律’，“此处文本”]，
[‘克利夫兰’，“此处文本”]，
['Joondalup'，“此处文本”]，
['Wanaka'，“此处文本”]
['Liverpool'，“此处文本”]，
['Styria'，“此处文本”]，
['Edwardsville'，“此处文本”]，
['Austin'，“此处文本”]，
['Houston'，“此处文本”]，
[‘斯德哥尔摩’，“此处文本”]，
]);
变量选项={
地区:"世界",，
显示模式：“标记”，
背景颜色：“#252426”，
colorAxis:{colors:['blue']}，
放大镜：{enable:false}，
defaultColor:“#f1910e”，
enableRegionInteractivity:“true”，
};
var chart=new google.visualization.geograpart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
};

基于此，您的网络可能会阻止地理编码。地质艺术需要对标记进行地理编码，以便知道在哪里绘制标记

检查这个相关的和

---

希望这有帮助

我想出来了！显然，谷歌现在需要一个API键来在地图上显示标记。这是经过修改的功能性脚本。 第二行是唯一的变化

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_GOES_HERE" async="" defer="defer"></script>

<script type="text/javascript">

google.charts.load('current', {'packages': ['geochart']});
google.charts.setOnLoadCallback(drawMarkersMap);

function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Collaborator'],
['Detroit', "text here"],
['Cleveland', "text here"],
['Joondalup', "text here"],
['Wanaka', "text here"]
['Liverpool', "text here"],
['Styria', "text here"],
['Edwardsville', "text here"],
['Austin', "text here"],
['Houston', "text here"],
['Stockholm', "text here"],
]);

var options = {
region: 'world',
displayMode: 'markers',
backgroundColor: '#252426',
colorAxis: {colors: ['blue']},
magnifyingGlass: {enable: false},
defaultColor: '#f1910e',
enableRegionInteractivity: 'true',
};

var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>

load（'current'，{'packages'：['geochart']}）；
google.charts.setOnLoadCallback（drawMarkersMap）；
函数drawMarkersMap（）{
var data=google.visualization.arrayToDataTable([
[“城市”、“合作者”]，
[‘底特律’，“此处文本”]，
[‘克利夫兰’，“此处文本”]，
['Joondalup'，“此处文本”]，
['Wanaka'，“此处文本”]
['Liverpool'，“此处文本”]，
['Styria'，“此处文本”]，
['Edwardsville'，“此处文本”]，
['Austin'，“此处文本”]，
['Houston'，“此处文本”]，
[‘斯德哥尔摩’，“此处文本”]，
]);
变量选项={
地区:"世界",，
显示模式：“标记”，
背景颜色：“#252426”，
colorAxis:{colors:['blue']}，
放大镜：{enable:false}，
defaultColor:“#f1910e”，
enableRegionInteractivity:“true”，
};
var chart=new google.visualization.geograpart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
};

只要你的网站没有收到太多的流量，API密钥通过谷歌是免费的。您需要注册一个“浏览器密钥”。这里有一个链接来设置它：

---

谢谢您的回复！我发现了一些控制台错误，这似乎是我的adblocker造成的。禁用adblocker后，只有一个控制台错误，我认为这可能是问题所在：“Google Maps API error:MissingKeyMapError”我生成了一个API密钥，但现在我不确定如何/在哪里将其插入脚本。有没有建议启用此功能，以便对api密钥使用环境变量或其他内容，从而使api密钥不被硬编码（这是一种安全风险）？

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_GOES_HERE" async="" defer="defer"></script>

<script type="text/javascript">

google.charts.load('current', {'packages': ['geochart']});
google.charts.setOnLoadCallback(drawMarkersMap);

function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Collaborator'],
['Detroit', "text here"],
['Cleveland', "text here"],
['Joondalup', "text here"],
['Wanaka', "text here"]
['Liverpool', "text here"],
['Styria', "text here"],
['Edwardsville', "text here"],
['Austin', "text here"],
['Houston', "text here"],
['Stockholm', "text here"],
]);

var options = {
region: 'world',
displayMode: 'markers',
backgroundColor: '#252426',
colorAxis: {colors: ['blue']},
magnifyingGlass: {enable: false},
defaultColor: '#f1910e',
enableRegionInteractivity: 'true',
};

var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>