链接到谷歌地图标记与链接下面的地图
Link to google map markers with links below map
我见过这样的问题-但在答案中,他们使用javascript生成一个链接列表,然后可以点击"跳转到"地图上的标记,例如:http://www.geocodezip.com/v3_MW_example_map2.html
我想做的是创建我自己的链接,在同一页的地图做同样的事情,但我不希望生成的列表,因为我需要把链接在不同的地方在页面上。
我的地图代码是:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Locations</title>
<meta charset="utf-8">
<script src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script type="text/javascript">
var infowindow = null;
$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(-25.274398, 133.775136);
var myOptions = {
zoom: 4,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var sites = [
['location 16', -37.814107 , 144.96328, 6, 'Description in info window','images/map_mobile.png'],
['location 5', -37.911394 , 145.189584, 5, 'Description in info window','images/map_store.png'],
['location 4', -33.963542 , 151.134273, 4, 'Description in info window','images/map_store.png'],
['location 3', -33.923960 , 150.921158, 3, 'Description in info window','images/map_store.png'],
['location 2', -34.065619 , 150.796491, 2, 'Description in info window','images/map_mobile.png'],
['location 1', -33.752178 , 150.6910478, 1, 'Description in info window','images/map_mobile.png']
];
var markers = setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
var mc = new MarkerClusterer(map, markers);
}
function setMarkers(map, sites) {
var markers = [];
for (var i = 0; i < sites.length; i++) {
var site = sites[i];
var siteLatLng = new google.maps.LatLng(site[1], site[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: site[0],
zIndex: site[3],
html: site[4],
//icon: site[5] // commented so we can see the original marker icon
});
markers.push(marker);
google.maps.event.addListener(marker, "click", function () {
//alert(this.html);
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
return markers;
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 620px; height: 600px;"></div>
</body>
</html>
下面是您的代码示例
<html lang="en">
<head>
<title>Locations</title>
<meta charset="utf-8">
<script src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script type="text/javascript">
var markers = [];
var infowindow = null;
//$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(-25.274398, 133.775136);
var myOptions = {
zoom: 4,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker, i;
var sites = [
['location 16', -37.814107 , 144.96328, 6, 'Description in info window','images/map_mobile.png'],
['location 5', -37.911394 , 145.189584, 5, 'Description in info window','images/map_store.png'],
['location 4', -33.963542 , 151.134273, 4, 'Description in info window','images/map_store.png'],
['location 3', -33.923960 , 150.921158, 3, 'Description in info window','images/map_store.png'],
['location 2', -34.065619 , 150.796491, 2, 'Description in info window','images/map_mobile.png'],
['location 1', -33.752178 , 150.6910478, 1, 'Description in info window','images/map_mobile.png']
];
var markers = setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
var mc = new MarkerClusterer(map, markers);
}
function setMarkers(map, sites) {
for (var i = 0; i < sites.length; i++) {
var site = sites[i];
var siteLatLng = new google.maps.LatLng(site[1], site[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: site[0],
zIndex: site[3],
html: site[4],
//icon: site[5] // commented so we can see the original marker icon
});
markers.push(marker);
google.maps.event.addListener(marker, "click", function () {
//alert(this.html);
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
return markers;
}
// The function to trigger the marker click, 'id' is the reference index to the 'markers' array.
function myClick(id){
google.maps.event.trigger(markers[id], 'click');
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 620px; height: 600px;"></div>
<a href="#" onclick="myClick(0);">Open Info Window</a>
<a href="#" onclick="myClick(1);">Open Info Window2</a>
<a href="#" onclick="myClick(2);">Open Info Window3</a>
<a href="#" onclick="myClick(3);">Open Info Window4</a>
<a href="#" onclick="myClick(4);">Open Info Window5</a>
<a href="#" onclick="myClick(5);">Open Info Window6</a>
</body>
</html>
相关文章:
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 打开带有多个标记的谷歌地图链接
- 谷歌地图 API - 指向地点详细信息页面的链接
- 给定带有位置“loc”的链接,搜索使用谷歌地图API从标记中提取纬度和经度
- 谷歌地图路线链接仅在iOS中显示路线预览
- 谷歌地图 点击链接时平移到中心
- 谷歌地图点击链接/选项卡更改标记位置地图
- 谷歌地图api通过点击信息窗口内的链接打开新的信息窗口
- 将xml站点地图转换为可用链接的JavaScript
- 如何使用地图链接打开fancybox
- 添加用于在 Google 地图 API v3 中打开信息窗口的链接
- jQuery - 将文本转换为谷歌地图链接
- 使用链接在谷歌地图中切换地面覆盖
- 谷歌地图自定义标记链接不起作用
- 获取谷歌地图链接
- 如何在弹出窗口中打开谷歌地图链接
- 根据图像地图链接显示不同的内容
- 谷歌地图链接从greasemonkey默认缩放
- 谷歌地图链接与长和晚,与位置文本蒙面
- 谷歌地图链接控制信息窗口,就像标记一样