使用CSS+；Javascript/公司目录链接

我正试图建立一个自定义的谷歌地图，它将有一个商业目录

请参阅本文末尾的示例链接

您当前可以单击绿色图标并打开自定义弹出窗口，但我需要在侧边栏中的地图上创建公司链接，单击后将在地图上打开相应的弹出窗口

请让我知道我需要什么，这将允许它打开每个公司的弹出窗口时，点击地图旁边的边栏链接

下面是一个例子，减去我要问的侧边栏上的链接：

下面是我的示例中使用的Javascript，如果这有助于确定如何调用弹出窗口：

<!-- your api key is used here -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.stylizedmap.min.js"></script>
<script type="text/javascript">
jQuery().ready(function () {
var a = [
"http://2.s3.envato.com/files/29891006/mountains%206.jpg",
"http://0.s3.envato.com/files/29962392/mountains%2014.jpg",
"http://2.s3.envato.com/files/29035356/oetztal_8800.jpg",
"http://1.s3.envato.com/files/22469879/IMG_3536.jpg",
"http://0.s3.envato.com/files/22441185/IMG_6149_2.jpg"
];
var b = [
"http://1.s3.envato.com/files/28915052/Garden.JPG"
];

var sparkles = [
"images/sparkles1.jpg"
];

var accent = [
"images/accent.jpg"
];  

 var dougherty = [
"images/dougherty.jpg"
];

var centurion = [
"images/centurion.jpg"
]; 

var gardner = [
"images/gardner.jpg"
];

$("#map").StylizedMap({
zoomLevel: 17,
styles: $().StylizedMap.styles.gray,
center: {   
lat: 35.884773,
long: -78.745691
},
locations: [{   
lat: 35.884752,
long: -78.74959,
title: 'Accent Imaging, Inc.<br/><a href="http://www.accentimaging.com" target="_blank">www.accentimaging.com&nbsp;&rarr;</a>',
sub_title: "8121 Brownleigh Drive, Raleigh, NC 27617",
slides: accent,
active: true
}, {
lat: 35.885556,
long: -78.749399,
title: 'Sparkles Restoration<br/><a href="http://www.sparkkles.com" target="_blank">www.sparkkles.com&nbsp;&rarr;</a>',
sub_title: "738 Lincoln Road Miami Beach, FL 33139",    
slides: sparkles
}, {
lat: 35.882468,
long: -78.748927,
title: 'Centurion Construction<br/><a href="http://www.centurionconstruction.com" target="_blank">www.centurionconstruction.com&nbsp;&rarr;</a>',
sub_title: "3301 Glen Royal Rd, Raleigh, NC 27617",
slides: centurion
}, {
lat: 35.886834,
long: -78.749587,
title: 'Gardner-Marsh Gas Equipment<br/><a href="http://www.gardnermarsh.com" target="_blank">www.gardnermarsh.com&nbsp;&rarr;</a>',
sub_title: "679 North Michigan Ave. Chicago, IL 60611",
slides: gardner
}, {
lat: 35.885821,
long: -78.749571,
title: 'Dougherty Equipment Company<br/><a href="http://www.doughertyequipment.com" target="_blank">www.doughertyequipment.com&nbsp;&rarr;</a>',
sub_title: "679 North Michigan Ave. Chicago, IL 60611",
slides: dougherty
}, {
lat: 47.6632853,
long: -122.300746,
title: 'Apple Seattle Store',
sub_title: "2656 NE University Village Street Seattle, WA 98105",
slides: b
}, {
lat: 36.1276138,
long: -115.16803270000003,
title: 'Apple Las Vegas store',
sub_title: "3200 Las Vegas Blvd. Las Vegas, NV 89109"
}, {
lat: 30.258303,
long: -97.807986,
title: 'Apple Austin store',
sub_title: "2901 S. Capital of Texas Highway Austin, TX 78746",
slides: b
}]
})
});
</script>

jQuery（）.ready（函数（）{
变量a=[
"http://2.s3.envato.com/files/29891006/mountains%206.jpg",
"http://0.s3.envato.com/files/29962392/mountains%2014.jpg",
"http://2.s3.envato.com/files/29035356/oetztal_8800.jpg",
"http://1.s3.envato.com/files/22469879/IMG_3536.jpg",
"http://0.s3.envato.com/files/22441185/IMG_6149_2.jpg"
];
变量b=[
"http://1.s3.envato.com/files/28915052/Garden.JPG"
];
var sparkles=[
“images/sparkes1.jpg”
];
变量重音=[
“images/accent.jpg”
];  
var dougherty=[
“images/dougherty.jpg”
];
百夫长变量=[
“images/centurion.jpg”
]; 
var gardner=[
“images/gardner.jpg”
];
$（“#地图”）.StyleizedMap({
zoomLevel:17，
样式：$（）.StylezedMap.styles.gray，
中心：{
拉脱维亚：35.884773，
长：-78.745691
},
地点：[{
拉脱维亚：35.884752，
长：-78.74959，
标题：“Accent Imaging，Inc.
”，
子标题：“北卡罗来纳州罗利市布朗利大道8121号，邮编27617”，
幻灯片：口音，
主动：正确
}, {
拉脱维亚：35.885556，
长：-78.749399，
标题：“火花修复
”，
子标题：“佛罗里达州迈阿密海滩林肯路738号，邮编33139”，
幻灯片：火花
}, {
拉脱维亚：35.882468，
长：-78.748927，
标题：“百夫长建筑
”，
子标题：“北卡罗来纳州罗利市格伦皇家路3301号，邮编27617”，
幻灯片：百夫长
}, {
拉脱维亚：35.886834，
长：-78.749587，
标题：“加德纳沼气设备
”，
子标题：“伊利诺伊州芝加哥北密歇根大道679号，邮编60611”，
幻灯片：加德纳
}, {
纬度：35.885821，
长：-78.749571，
标题：“Dougherty设备公司
”，
子标题：“伊利诺伊州芝加哥北密歇根大道679号，邮编60611”，
幻灯片：多尔蒂
}, {
拉脱维亚：47.6632853，
长：-122.300746，
标题：“苹果西雅图店”，
子标题：“华盛顿州西雅图市东北大学村街2656号，邮编98105”，
幻灯片：b
}, {
纬度：36.1276138，
长：-115.16803270000003，
标题：“苹果拉斯维加斯店”，
子标题：“内华达州拉斯维加斯大道3200号，邮编89109”
}, {
纬度：30.258303，
长：-97.807986，
标题：“苹果奥斯汀店”，
子标题：“德克萨斯州奥斯汀市德克萨斯州公路南部首府2901号，邮编78746”，
幻灯片：b
}]
})
});

当您不知道代码设置的确切方式时，很难说清楚

但是，如果您保留对标记、信息窗口（弹出窗口）和地图外链接的引用，那么您可以通过

Html

---

编辑：低代表评论。 如果您有类似的示例，请访问：

然后我会把所有的标记放在一个数组中以供进一步使用。当然，还要保存对infowindow的引用。 然后你可以像上面的代码一样重用它们

---

编辑2：参见上面的更改。 这是一种粗糙的方法，但应该很有效。现在，您只需找到一种方法来实际获取每个链接的正确编号/引用som how

---

编辑3:Aah您正在使用一些扩展/包装普通google.maps-api的库。实际上，正确使用似乎比仅仅使用原始的googlemaps api更加棘手。 老实说，我不知道这个库是如何重用这些变量的。

---

您是否仅使用专用地图设置弹出窗口的样式？如果是这样的话，我肯定会把这个库去掉，只使用原始的mapsapi。并使用定制的“标记”和定制的“信息窗口”。只需要一点css和标记。非常好的文档：

是的，我想知道地图上的弹出窗口当前是如何被调用/引用的，以及我是否可以在地图外使用这些相同的引用。在上面的示例中，单击链接本身的代码看起来如何？顺便说一句，我是一名javascript新手。如果有帮助的话，我已经将我的示例中的javascript代码添加到了我的原始帖子中。制造商是根据我输入的long:和lat:值放置在地图上的。我使用它是因为我的客户很容易更新和添加附加信息和公司徽标。因此，不幸的是，我需要继续使用它，如果我们能够找出如何获得正确的数字/参考。Nils，我在我的示例页面中注意到，当您将鼠标悬停在绿色地图图标上时，您将在链接描述字段中看到一个数字。它们是0、1、2、3、4等等。我想知道这些是否可以用来打开它们？

<a href="javascript:void(0)" onclick="onLinkClick(1)">www.link.com</a>

var infowindow = new google.maps.InfoWindow({
  content: contentString
});
var markerArray = [];
var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Uluru (Ayers Rock)'
});
markerArray.push(marker);

function findMarker(markerPosition){
 return markerArray[markerPosition];
}


function onLinkClick(markerPosition){
    var marker = findMarker(markerPosition);
    infowindow.open(map,marker)
}