Javascript 如何将地图标记打开为弹出窗口

所以，我在tumblr上做了一个个人项目，我想用城市标记制作一张世界地图。我希望标记打开一个弹出窗口时点击，并提供信息，取决于哪个城市被点击。我发现amCharts有一些现成的东西，但我是一个完全的初学者，需要指导如何实现这一点。我正在使用它来轻松获取城市标记，并找到了如何检索单击项目的信息。但是我不知道如何在弹出窗口中打开信息。他们有一个关于弹出窗口的教程，但它没有真正解释如何实现这一点，没有一个明确的例子，我可以尝试得到它的窍门

此外，我似乎不能实际点击城市标记，只有国家，这是我也希望能够做到的

当我预览地图时，它会正确地显示国家的名称，但当我保存页面时，当我将鼠标悬停在这些国家的名称上时，它不会显示这些国家的名称，因此我需要对此进行修复。编辑：我很确定这是因为Tumblr将polygoontemplate.tooltipText=“{name}”；进入polygonTemplate.tooltipText=“username”；在代码中，是否有任何方法可以绕过或修复此问题？因为我不希望每个国家在鼠标悬停时都显示一个仅仅是我的用户名的工具提示

正如我所说，我是一名初学者，amCharts教程似乎假定对javascript有一定程度的理解，而我对此一无所知。我已经尽了最大的努力去阅读每一件似乎对我有帮助，但似乎无法掌握窍门的东西。我相信我正在尝试做的事情是可以实现的，而且可能很容易实现，但我缺乏专业知识，需要实际的指导，例如“将x放入代码的y部分”或“将x替换为代码的y部分”，以便为我“单击”

以下是我目前掌握的情况：

{Title}
WebFontConfig={
谷歌：{families:['Lato:300400:latin'，'Montserrat:700:latin']}
};
（功能（）{
var wf=document.createElement（'script'）；
wf.src=（'https:'==document.location.protocol？'https'：'http'）+
“：//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js”；
wf.type='text/javascript'；
wf.async='true'；
var s=document.getElementsByTagName（'script'）[0]；
s、 parentNode.insertBefore（wf，s）；
})(); 
身体{
背景图像：url（'http://i.imgur.com/rYsfgEL.png“）；/*将背景图像的url放在“”之间（如果有）*/
背景附件：固定；
}
#地图{
位置：固定；
最高：50%；
边缘顶部：-251px；
宽度：810px；
高度：455px；
左：50%；
左边距：-416px；
背景：#2722A；/*此处更改地图背景颜色*/
填充：10px 0px 16px 10px；
边框：3倍纯色#bbb；/*此处更改内边框颜色*/
轮廓：3倍纯色#2722A；/*此处更改轮廓颜色。如果与地图背景匹配，效果更佳*/
}
：-webkit滚动条{
宽度：5px；
高度：5px；
}
：-webkit滚动条轨迹{
边界半径：1px；
背景色：#aaa；
}
：-webkit滚动条拇指{
边界半径：1px；
背景色：#444；
}
字体系列：-苹果系统、BlinkMacSystemFont、“Segoe UI”、Roboto、Helvetica、Arial、无衬线、“苹果颜色表情”、“Segoe UI表情”、“Segoe UI符号”；
}
#沙特迪夫{
宽度：100%；
高度：350px；
}
#头衔{
宽度：752px；
位置：固定；
左：50%；
左边距：-376px；
最高：50%；
利润上限：-300px；
文本对齐：居中；
字体系列：“蒙特塞拉特”，“简介”，无衬线；
字体大小：40px；
文本转换：大写；
字号：700；
字母间距：2px；
颜色：#ddd；/*此处更改标题颜色*/
}
#链接{
宽度：752px；
位置：固定；
左：50%；
左边距：-376px；
最高：50%；
利润上限：260px；
文本对齐：居中；
}
#链接a{
字体系列：投石机ms，无衬线；
文本转换：大写；
填充：5px 8px；
显示：内联；
字体大小：10px；
字母间距：1.3px；
利润率：0px 10px；
文字装饰：无；
颜色：#eee；/*此处更改链接文本颜色*/
字体大小：粗体；
背景：#2722A；/*此处更改链接背景颜色*/
边框：2倍纯色#aaa；/*此处更改边框内的链接颜色*/
边界半径：4px4px4px4px；
}
地图
#沙特迪夫{
宽度：800px；
高度：450px；
溢出：隐藏；
}
.地图标记{
/*调整标记尺寸
所以它是以坐标为中心的*/
左边距：-8px；
利润上限：-8px；
框大小：边框框；
}
.map-marker.map-clickable{
光标：指针；
}
.脉搏{
宽度：10px；
高度：10px；
边框：5px实心#f7f14c；
-webkit边界半径：30px；
-moz边界半径：30px；
边界半径：30px；
背景色：#716f42；
z指数：10；
位置：绝对位置；
框大小：边框框；
}
.地图标记{
边框：10px实心#fff601；
背景：透明；
-webkit边界半径：60px；
-moz边界半径：60px；
边界半径：60px；
高度：50px；
宽度：50px；
-webkit动画：3秒脉冲放松；
-moz动画：3秒脉冲放松；
动画：脉搏3秒放松；
-webkit动画迭代计数：无限；
-moz动画迭代次数：无限；
动画迭代次数：无限；
位置：绝对位置；
顶部：-20px；
左：-20px；
z指数：1；
不透明度：0；
框大小：边框框；
}
@-moz关键帧脉冲{
0% {
-moz变换：比例（0）；
不透明度：0.0；
}
25% {
-moz变换：比例（0）；
不透明度：0.1；
}
50% {
-moz变换：比例（0.1）；
不透明度：0.3；
}
75% {
-moz变换：比例（0.5）；
不透明度：0.5；
}
100% {
-moz变换：比例（1）；
不透明度：0.0；
}
}
@-webkit关键帧“脉冲”{
0% {
-webkit转换：scal