切换自定义图例 Google 地图 Javascript
Toggle Custom Legend Google Map Javascript
我正在尝试切换 on/off 自定义图例 (#skybox2)，但我无法弄清楚如何开始执行此操作。我希望它打开，然后可以选择将其作为按钮关闭。任何帮助是极大的赞赏。我附上我的完整代码。谢谢。
<html>
<head>
<title>Web Map of WVDRS Offices</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body{overflow:hidden;margin:1; padding:0;}
#map_canvas {
height:100%;
width:100%;
}
h3{
margin-top: 0;
}
h4{
margin-top: 0;
font-weight: bold;
}
#skybox1 {
width:100%;
background-color: #222;
border-style: solid;
border-color: #222;
border-radius: 0px;
color: #eee;
padding: 0%;
}
.toplinks {
float:right;
font-style:normal;
margin-right:0.5em;
}
#skybox2 {
width: auto;
height: auto;
background-color: #222;
border-style: solid;
border-color:#222;
border-radius: 20px;
color: #eee;
padding: 0 0.4em;
position: absolute;
z-index: 100;
bottom: 15px;
right: 10px;
}
#skybox2 {
position: relative
background-color:222;
}
.color {
border: 1px solid;
border-color:#222;
height: 20px;
width: 20px;
margin-right: 0.2em;
float: left;
}
.blue {
background: #cfe2f3;
}
.yellow {
background: #ffff00;
}
.brown {
background: #bf9000;
}
.purple {
background: #674ea7;
}
.pink {
background: #ea9999;
}
.green {
background: #6aa84f;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js? sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(38.763853,-80.310059);
var mapOptions = {
zoom: 8,
center: myLatlng,
disableDefaultUI: false,
mapTypeControl:false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
panControl:true,
panControlOptions:{
position:google.maps.ControlPosition.DEFAULT
},
zoomControl: true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.DEFAULT
},
scaleControl:false,
streetViewControl:true,
rotateControl:false,
overviewMapControl:false,
mapTypeId: google.maps.MapTypeId.ROAD,
styles: [
{
featureType: 'all',
elementType:"",
stylers: [
{hue:""},
{saturation:-100},
{lightness:""},
{gamma:""}
]
},{
featureType: 'poi.park',
elementType:"labels",
stylers:[
{visibility:"off"}
]
}
]
}
county = new google.maps.FusionTablesLayer({
map: map,
heatmap: {enabled: false},
query: {
select: "col2",
from: "1LFQlSRds4LnGpf16wF2d-srEBdICE3A0F6aFFIYi",
where: ""
},
options: {
styleId: 2,
templateId: 3
}
});
district = new google.maps.FusionTablesLayer({
map: map,
heatmap: {enabled: false},
query: {
select: "col2",
from: "1lugoG8PloQQWVec_3jnK9B_dlbkOA5Tz1lL2iI_d",
where: ""
},
options: {
styleId: 2,
templateId: 3,
},
styles: [{
polygonOptions: {
fillOpacity: 0.4,
strokeColor:"",
strokeWeight:""
}
}]
});
state = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col0",
from: "18_J2uuiZRLon48Lc6bclZ0ckHanbKZB9qg319KV3",
where: "col2 \x3d 30"
},
options: {
styleId: 2,
templateId: 2
},
});
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions) ;
district.setMap(map);
state.setMap(map);
lats = new Array (38.321099,38.4579809,38.801414,38.843651,38.819064,39.28549,39.4848327,39.627854,39.018054,38.939379,40.065522,39.26451,40.401822,39.564031,37.790201,37.359695,37.828694,38.304694,38.401603,37.847892,37.584749,39.496909,39.401623,39.3356127,37.415833,38.014136,39.070254,38.423697,38.4282422,38.393772);
longs = new Array (-81.581721,-81.931094,-81.351222,-82.138137,-81.722606,-80.270051,-80.1418304,-79.930129,-80.421569,-79.856733,-80.722743,-81.559587,-80.587742,-80.996412,-81.190381,-81.096182,-80.420059,-80.830412,-82.492229,-81.993212,-81.381419,-77.954339,-79.015217,-78.7457004,-81.589306,-81.125976,-78.938935,-82.427279,-82.2071357,-82.3990836);
hovertitle = new Array ("Charleston WVDRS","Teays Valley WVDRS","Spencer WVDRS","Point Pleasant WVDRS","Ripley WVDRS","Clarksburg WVDRS","Fairmont WVDRS","Morgantown WVDRS","Weston WVDRS","Elkins WVDRS","Wheeling WVDRS","Parkersburg WVDRS","Weirton WVDRS","Sistersville WVDRS","Beckley WVDRS","Princeton WVDRS","Lewisburg WVDRS","Summersville WVDRS","Huntington WVDRS","Logan WVDRS","Mullens WVDRS","Martinsburg WVDRS","Keyser WVDRS","Romney WVDRS","Welch WVDRS","Oak Hill WVDRS","Moorefield WVDRS","Marshall University WVDRS","Cabell Midland H.S. WVDRS","Huntington H.S. WVDRS");
htmlAll = new Array ("<h4>Charleston WVDRS</h4><img src=offices/Charleston.png width=200 height=150><p>4701 MacCorkle Avenue SE<br>Charleston, WV 25304<br>304-356-2371(Phone)<br>304-926-1710(Fax)</p><a href=directions/Charleston.html>Get Directions</a>",
"<h4>Teays Valley WVDRS</h4><img src=offices/TeaysValley.png width=200 height=150><p>115 Liberty Square<br>Hurricane, WV 25526<br>304-760-7082(Phone)<br>304-759-0267(Fax)</p><a href=directions/TeaysValley.html>Get Directions</a>",
"<h4>Spencer WVDRS</h4><img src=offices/Spencer.png width=200 height=150><p>321 Market Street<br>Spencer, WV 25276<br>304-927-0954(Phone)<br>304-927-0955(Fax)</p><a href=directions/Spencer.html>Get Directions</a>",
"<h4>Point Pleasant WVDRS</h4><img src=offices/PointPleasant.png width=200 height=150><p>209 5th Street<br>Point Pleasant, WV 25550<br>304-675-0867(Phone)<br>304-675-0882(Fax)</p><a href=directions/PointPleasant.html>Get Directions</a>",
"<h4>Ripley WVDRS</h4><img src=offices/Ripley.png width=200 height=150><p>206 Stone Drive<br>Ripley, WV 25271<br>304-373-0313(Phone)<br>304-373-0116(Fax)</p><a href=directions/Ripley.html>Get Directions</a>",
"<h4>Clarksburg WVDRS</h4><img src=offices/Clarksburg.png width=200 height=150><p>107 Cambridge Place<br>Bridgeport, WV 26330<br>304-842-2951(Phone)<br>304-842-4826(Fax)</p><a href=directions/Clarksburg.html>Get Directions</a>",
"<h4>Fairmont WVDRS</h4><img src=offices/Fairmont.png width=200 height=150><p>Veterans Square<br>320 Adams Street, Suite 106<br>Fairmont, WV 26554<br>304-367-2714(Phone)<br>304-367-2716(Fax)</p><a href=directions/Fairmont.html>Get Directions</a>",
"<h4>Morgantown WVDRS</h4><img src=offices/Morgantown1.png width=200 height =150><p>1415 Earl Core Road<br>Morgantown, WV 26505<br>304-285-3155(Phone)<br>304-285-3158(Fax)</p><a href=directions/Morgantown.html>Get Directions</a>",
"<h4>Weston WVDRS</h4><img src=offices/Weston.png width=200 height =150><p>306 Market Place Mall<br>Weston, WV 26451<br>304-269-0547(Phone)<br>304-269-0427(Fax)</p><a href=directions/Weston.html>Get Directions</a>",
"<h4>Elkins WVDRS</h4><img src=offices/Elkins.png width=200 height =150><p>1025 North Randolph Avenue<br>Elkins, WV 26241<br>304-637-0205(Phone)<br>304-637-0209(Fax)</p><a href=directions/Elkins.html>Get Directions</a>",
"<h4>Wheeling WVDRS</h4><img src=offices/Wheeling1.png width=200 height=150><p>Central Union Building<br>40 14th Street, Suite 103<br>Wheeling, WV 26003<br>304-238-1093(Phone)<br>304-238-1096(Fax)</p><a href=directions/Wheeling.html>Get Directions</a>",
"<h4>Parkersburg WVDRS</h4><img src=offices/Parkersburg.png width=200 height=150><p>State Office Building<br>400 5th Street<br>Parkersburg, WV 26101<br>304-420-4580(Phone)<br>304-420-4583(Fax)</p><a href=directions/Parkersburg.html>Get Directions</a>",
"<h4>Weirton WVDRS</h4><img src=offices/Weirton1.png width=200 height=150><p>100 Municipal Plaza, Suite 200<br>Weirton, WV 26062<br>304-723-5311(Phone)<br>304-723-5318(Fax)</p><a href=directions/Weirton.html>Get Directions</a>",
"<h4>Sistersville WVDRS</h4><img src=offices/Sistersville.png width=200 height=150><br>714 Wells Street<br>Sistersville, WV 26175<br>304-652-2354(Phone)<br>304-652-2359(Fax)<br><br><a href=directions/Sistersville.html>Get Directions</a>",
"<h4>Beckley WVDRS</h4><img src=offices/Beckley.png width=200 height=150><p>800 New River Town Center<br>Beckley, WV 25801<br>304-256-6900(Phone)<br>304-256-6903(Fax)</p><a href=directions/Beckley.html>Get Directions</a>",
"<h4>Princeton WVDRS</h4><img src=offices/Princeton.png width=200 height=150><p>195 Davis Street<br>Princeton, WV 24739<br>304-425-1256(Phone)<br>304-487-2631(Fax)</p><a href=directions/Princeton.html>Get Directions</a>",
"<h4>Lewisburg WVDRS</h4><img src=offices/Lewisburg1.png width=200 height=150><p>777 N Jefferson Street, Suite 105<br>Lewisburg, WV 24901<br>304-647-7515(Phone)<br>304-647-7518(Fax)</p><a href=directions/Lewisburg.html>Get Directions</a>",
"<h4>Summersville WVDRS</h4><img src=offices/Summersville.png width=200 height=150><p>830 Northside Drive, Suite 113<br>Summersville, WV 26651<br>304-872-0813(Phone)<br>304-872-0518(Fax)</p><a href=directions/Summersville.html>Get Directions</a>",
"<h4>Huntington WVDRS</h4><img src=offices/Huntington.png width=200 height=150><p>2699 Park Avenue, Suite 200<br>Huntington, WV 25704<br>304-528-5585(Phone)<br>304-528-5591(Fax)</p><a href=directions/Huntington.html>Get Directions</a>",
"<h4>Logan WVDRS</h4><img src=offices/Logan.jpg width=200 height=150><p>130 Stratton Street<br>Logan, WV 25601<br>304-792-7060(Phone)<br>304-792-7062(Fax)</p><a href=directions/Logan.html>Get Directions</a>",
"<h4>Mullens WVDRS</h4><img src=offices/Mullens.png width=200 height=150><p>316 Howard Avenue<br>Mullens,WV 25882<br>304-294-5653(Phone)<br>304-294-5655(Fax)</p><a href=directions/Mullens.html>Get Directions</a>",
"<h4>Martinsburg WVDRS</h4><img src=offices/Martinsburg.png width=200 height=150><p>489 Mid Atlantic Parkway, Suite 2<br>Martinsburg, WV 25404<br>304-267-0005(Phone)<br>304-267-0007(Fax)</p><a href=directions/Martinsburg.html>Get Directions</a>",
"<h4>Keyser WVDRS</h4><img src=offices/Keyser.png width=200 height=150><p>67 North Tornado Way<br>Keyser, WV 26726<br>304-788-2313(Phone)<br>304-788-6389(Fax)</p><a href=directions/Keyser.html>Get Directions</a>",
"<h4>Romney WVDRS</h4><img src=offices/Romney.jpg width=200 height=150><p>24948 Northwestern Pike<br>Romney, WV 26757<br>304-822-3957<br>304-822-7417</p><a href=directions/Romney.html>Get Directions</a>",
"<h4>Welch WVDRS</h4><img src=offices/Welch.png width=200 height=150><p>110 Park Avenue<br>Welch, WV 24801<br>304-436-3175(Phone)<br>304-436-3176(Fax)</p><a href=directions/Welch.html>Get Directions</a>",
"<h4>Oak Hill WVDRS</h4><img src=offices/OakHill1.png width=200 height=150><p>549 Mall Road<br>Oak Hill, WV 25901<br>304-465-3025(Phone)<br>304-465-3069(Fax)</p><a href=directions/OakHill.html>Get Directions</a>",
"<h4>Moorefield WVDRS</h4><img src=offices/Moorefield.jpg width=200 height=150><p>151 Robert C. Byrd<br>Industrial Park Road, Suite 3<br>Moorefield, WV 26836<br>304-538-2701(Phone)<br>304-538-2718(Fax)</p><a href=directions/Moorefield.html>Get Directions</a>",
"<h4>Marshall University WVDRS</h4><img src=offices/MarshallU.png width=200 height=150><p>Prichard Hall, Room 113<br>Huntington, WV 25755<br>304-696-2394(Phone)</p><a href=directions/MarshallUniversity.html>Get Directions</a>",
"<h4>Cabell Midland H.S. WVDRS</h4><img src=offices/CabellMidland.png width=200 height=150><p>2300 US Route 60 East<br>Ona, WV 25545<br>304-743-7496(Phone)</p><a href=directions/CabellMidland.html>Get Directions</a>",
"<h4>Huntington H.S. WVDRS</h4><img src=offices/HuntingtonHigh.png width=200 height=150><p>1 Highlander Way<br>Huntington, WV 25701<br>304-528-6511(Phone)</p><a href=directions/HuntingtonHS.html>Get Directions</a>");
markers = new Array ();
for (var i = 0; i < 40; i++) {
myLatlng = new google.maps.LatLng(lats[i],longs[i]);
var contentString = htmlAll[i];
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
html: htmlAll[i],
title: hovertitle[i]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
}}
</script>
<body onLoad="initialize();">
<div id="skybox1">
<img src=offices/DRSlogo.png align=left width=60 height=60><strong><font size="6">West Virginia Division of Rehabilitation Services</font></strong>
<br>
<font size="5"> Field Offices</font><br>
<font size="3"><i>Click a marker on the map for office information.<br>
<span class="toplinks">
<a href="http://wvdrs.org/" style="color:white">WVDRS Home</a>
<a href="http://wvdrs.org/data/DRS_Location_Map_2014.pdf" style="color:white">Text-Only</a>
</span>Click elsewhere on the map to get county and WVDRS District information.</i></font>
</div>
<div id="skybox2">
<!--<h3>WVDRS Districts<h3>-->
<p><img src="map-pin.png" width="25" height="40" alt="map pin marker">DRS office</p>
<div class="color blue"></div><p><font size="4">District 1</font></p>
<div class="color yellow"></div><p><font size="4">District 2</font></p>
<div class="color brown"></div><p><font size="4">District 3</font></p>
<div class="color purple"></div><p><font size="4">District 4</font></p>
<div class="color pink"></div><p><font size="4">District 5</font></p>
<div class="color green"></div><p><font size="4">District 6</font></p>
</div>
<div id="map_canvas"></div>
</head>
</body>
</html>
参考问题：
- toggle show/hide div with button?
- Place a button right aligned
Your original code in a fiddle
添加此功能：
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
点击按钮时调用：
<button onclick="toggle_visibility('skybox2')" style="float: right;">toggle legend</button>
我正在尝试切换 on/off 自定义图例 (#skybox2)，但我无法弄清楚如何开始执行此操作。我希望它打开，然后可以选择将其作为按钮关闭。任何帮助是极大的赞赏。我附上我的完整代码。谢谢。
<html>
<head>
<title>Web Map of WVDRS Offices</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body{overflow:hidden;margin:1; padding:0;}
#map_canvas {
height:100%;
width:100%;
}
h3{
margin-top: 0;
}
h4{
margin-top: 0;
font-weight: bold;
}
#skybox1 {
width:100%;
background-color: #222;
border-style: solid;
border-color: #222;
border-radius: 0px;
color: #eee;
padding: 0%;
}
.toplinks {
float:right;
font-style:normal;
margin-right:0.5em;
}
#skybox2 {
width: auto;
height: auto;
background-color: #222;
border-style: solid;
border-color:#222;
border-radius: 20px;
color: #eee;
padding: 0 0.4em;
position: absolute;
z-index: 100;
bottom: 15px;
right: 10px;
}
#skybox2 {
position: relative
background-color:222;
}
.color {
border: 1px solid;
border-color:#222;
height: 20px;
width: 20px;
margin-right: 0.2em;
float: left;
}
.blue {
background: #cfe2f3;
}
.yellow {
background: #ffff00;
}
.brown {
background: #bf9000;
}
.purple {
background: #674ea7;
}
.pink {
background: #ea9999;
}
.green {
background: #6aa84f;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js? sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(38.763853,-80.310059);
var mapOptions = {
zoom: 8,
center: myLatlng,
disableDefaultUI: false,
mapTypeControl:false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
panControl:true,
panControlOptions:{
position:google.maps.ControlPosition.DEFAULT
},
zoomControl: true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.DEFAULT
},
scaleControl:false,
streetViewControl:true,
rotateControl:false,
overviewMapControl:false,
mapTypeId: google.maps.MapTypeId.ROAD,
styles: [
{
featureType: 'all',
elementType:"",
stylers: [
{hue:""},
{saturation:-100},
{lightness:""},
{gamma:""}
]
},{
featureType: 'poi.park',
elementType:"labels",
stylers:[
{visibility:"off"}
]
}
]
}
county = new google.maps.FusionTablesLayer({
map: map,
heatmap: {enabled: false},
query: {
select: "col2",
from: "1LFQlSRds4LnGpf16wF2d-srEBdICE3A0F6aFFIYi",
where: ""
},
options: {
styleId: 2,
templateId: 3
}
});
district = new google.maps.FusionTablesLayer({
map: map,
heatmap: {enabled: false},
query: {
select: "col2",
from: "1lugoG8PloQQWVec_3jnK9B_dlbkOA5Tz1lL2iI_d",
where: ""
},
options: {
styleId: 2,
templateId: 3,
},
styles: [{
polygonOptions: {
fillOpacity: 0.4,
strokeColor:"",
strokeWeight:""
}
}]
});
state = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col0",
from: "18_J2uuiZRLon48Lc6bclZ0ckHanbKZB9qg319KV3",
where: "col2 \x3d 30"
},
options: {
styleId: 2,
templateId: 2
},
});
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions) ;
district.setMap(map);
state.setMap(map);
lats = new Array (38.321099,38.4579809,38.801414,38.843651,38.819064,39.28549,39.4848327,39.627854,39.018054,38.939379,40.065522,39.26451,40.401822,39.564031,37.790201,37.359695,37.828694,38.304694,38.401603,37.847892,37.584749,39.496909,39.401623,39.3356127,37.415833,38.014136,39.070254,38.423697,38.4282422,38.393772);
longs = new Array (-81.581721,-81.931094,-81.351222,-82.138137,-81.722606,-80.270051,-80.1418304,-79.930129,-80.421569,-79.856733,-80.722743,-81.559587,-80.587742,-80.996412,-81.190381,-81.096182,-80.420059,-80.830412,-82.492229,-81.993212,-81.381419,-77.954339,-79.015217,-78.7457004,-81.589306,-81.125976,-78.938935,-82.427279,-82.2071357,-82.3990836);
hovertitle = new Array ("Charleston WVDRS","Teays Valley WVDRS","Spencer WVDRS","Point Pleasant WVDRS","Ripley WVDRS","Clarksburg WVDRS","Fairmont WVDRS","Morgantown WVDRS","Weston WVDRS","Elkins WVDRS","Wheeling WVDRS","Parkersburg WVDRS","Weirton WVDRS","Sistersville WVDRS","Beckley WVDRS","Princeton WVDRS","Lewisburg WVDRS","Summersville WVDRS","Huntington WVDRS","Logan WVDRS","Mullens WVDRS","Martinsburg WVDRS","Keyser WVDRS","Romney WVDRS","Welch WVDRS","Oak Hill WVDRS","Moorefield WVDRS","Marshall University WVDRS","Cabell Midland H.S. WVDRS","Huntington H.S. WVDRS");
htmlAll = new Array ("<h4>Charleston WVDRS</h4><img src=offices/Charleston.png width=200 height=150><p>4701 MacCorkle Avenue SE<br>Charleston, WV 25304<br>304-356-2371(Phone)<br>304-926-1710(Fax)</p><a href=directions/Charleston.html>Get Directions</a>",
"<h4>Teays Valley WVDRS</h4><img src=offices/TeaysValley.png width=200 height=150><p>115 Liberty Square<br>Hurricane, WV 25526<br>304-760-7082(Phone)<br>304-759-0267(Fax)</p><a href=directions/TeaysValley.html>Get Directions</a>",
"<h4>Spencer WVDRS</h4><img src=offices/Spencer.png width=200 height=150><p>321 Market Street<br>Spencer, WV 25276<br>304-927-0954(Phone)<br>304-927-0955(Fax)</p><a href=directions/Spencer.html>Get Directions</a>",
"<h4>Point Pleasant WVDRS</h4><img src=offices/PointPleasant.png width=200 height=150><p>209 5th Street<br>Point Pleasant, WV 25550<br>304-675-0867(Phone)<br>304-675-0882(Fax)</p><a href=directions/PointPleasant.html>Get Directions</a>",
"<h4>Ripley WVDRS</h4><img src=offices/Ripley.png width=200 height=150><p>206 Stone Drive<br>Ripley, WV 25271<br>304-373-0313(Phone)<br>304-373-0116(Fax)</p><a href=directions/Ripley.html>Get Directions</a>",
"<h4>Clarksburg WVDRS</h4><img src=offices/Clarksburg.png width=200 height=150><p>107 Cambridge Place<br>Bridgeport, WV 26330<br>304-842-2951(Phone)<br>304-842-4826(Fax)</p><a href=directions/Clarksburg.html>Get Directions</a>",
"<h4>Fairmont WVDRS</h4><img src=offices/Fairmont.png width=200 height=150><p>Veterans Square<br>320 Adams Street, Suite 106<br>Fairmont, WV 26554<br>304-367-2714(Phone)<br>304-367-2716(Fax)</p><a href=directions/Fairmont.html>Get Directions</a>",
"<h4>Morgantown WVDRS</h4><img src=offices/Morgantown1.png width=200 height =150><p>1415 Earl Core Road<br>Morgantown, WV 26505<br>304-285-3155(Phone)<br>304-285-3158(Fax)</p><a href=directions/Morgantown.html>Get Directions</a>",
"<h4>Weston WVDRS</h4><img src=offices/Weston.png width=200 height =150><p>306 Market Place Mall<br>Weston, WV 26451<br>304-269-0547(Phone)<br>304-269-0427(Fax)</p><a href=directions/Weston.html>Get Directions</a>",
"<h4>Elkins WVDRS</h4><img src=offices/Elkins.png width=200 height =150><p>1025 North Randolph Avenue<br>Elkins, WV 26241<br>304-637-0205(Phone)<br>304-637-0209(Fax)</p><a href=directions/Elkins.html>Get Directions</a>",
"<h4>Wheeling WVDRS</h4><img src=offices/Wheeling1.png width=200 height=150><p>Central Union Building<br>40 14th Street, Suite 103<br>Wheeling, WV 26003<br>304-238-1093(Phone)<br>304-238-1096(Fax)</p><a href=directions/Wheeling.html>Get Directions</a>",
"<h4>Parkersburg WVDRS</h4><img src=offices/Parkersburg.png width=200 height=150><p>State Office Building<br>400 5th Street<br>Parkersburg, WV 26101<br>304-420-4580(Phone)<br>304-420-4583(Fax)</p><a href=directions/Parkersburg.html>Get Directions</a>",
"<h4>Weirton WVDRS</h4><img src=offices/Weirton1.png width=200 height=150><p>100 Municipal Plaza, Suite 200<br>Weirton, WV 26062<br>304-723-5311(Phone)<br>304-723-5318(Fax)</p><a href=directions/Weirton.html>Get Directions</a>",
"<h4>Sistersville WVDRS</h4><img src=offices/Sistersville.png width=200 height=150><br>714 Wells Street<br>Sistersville, WV 26175<br>304-652-2354(Phone)<br>304-652-2359(Fax)<br><br><a href=directions/Sistersville.html>Get Directions</a>",
"<h4>Beckley WVDRS</h4><img src=offices/Beckley.png width=200 height=150><p>800 New River Town Center<br>Beckley, WV 25801<br>304-256-6900(Phone)<br>304-256-6903(Fax)</p><a href=directions/Beckley.html>Get Directions</a>",
"<h4>Princeton WVDRS</h4><img src=offices/Princeton.png width=200 height=150><p>195 Davis Street<br>Princeton, WV 24739<br>304-425-1256(Phone)<br>304-487-2631(Fax)</p><a href=directions/Princeton.html>Get Directions</a>",
"<h4>Lewisburg WVDRS</h4><img src=offices/Lewisburg1.png width=200 height=150><p>777 N Jefferson Street, Suite 105<br>Lewisburg, WV 24901<br>304-647-7515(Phone)<br>304-647-7518(Fax)</p><a href=directions/Lewisburg.html>Get Directions</a>",
"<h4>Summersville WVDRS</h4><img src=offices/Summersville.png width=200 height=150><p>830 Northside Drive, Suite 113<br>Summersville, WV 26651<br>304-872-0813(Phone)<br>304-872-0518(Fax)</p><a href=directions/Summersville.html>Get Directions</a>",
"<h4>Huntington WVDRS</h4><img src=offices/Huntington.png width=200 height=150><p>2699 Park Avenue, Suite 200<br>Huntington, WV 25704<br>304-528-5585(Phone)<br>304-528-5591(Fax)</p><a href=directions/Huntington.html>Get Directions</a>",
"<h4>Logan WVDRS</h4><img src=offices/Logan.jpg width=200 height=150><p>130 Stratton Street<br>Logan, WV 25601<br>304-792-7060(Phone)<br>304-792-7062(Fax)</p><a href=directions/Logan.html>Get Directions</a>",
"<h4>Mullens WVDRS</h4><img src=offices/Mullens.png width=200 height=150><p>316 Howard Avenue<br>Mullens,WV 25882<br>304-294-5653(Phone)<br>304-294-5655(Fax)</p><a href=directions/Mullens.html>Get Directions</a>",
"<h4>Martinsburg WVDRS</h4><img src=offices/Martinsburg.png width=200 height=150><p>489 Mid Atlantic Parkway, Suite 2<br>Martinsburg, WV 25404<br>304-267-0005(Phone)<br>304-267-0007(Fax)</p><a href=directions/Martinsburg.html>Get Directions</a>",
"<h4>Keyser WVDRS</h4><img src=offices/Keyser.png width=200 height=150><p>67 North Tornado Way<br>Keyser, WV 26726<br>304-788-2313(Phone)<br>304-788-6389(Fax)</p><a href=directions/Keyser.html>Get Directions</a>",
"<h4>Romney WVDRS</h4><img src=offices/Romney.jpg width=200 height=150><p>24948 Northwestern Pike<br>Romney, WV 26757<br>304-822-3957<br>304-822-7417</p><a href=directions/Romney.html>Get Directions</a>",
"<h4>Welch WVDRS</h4><img src=offices/Welch.png width=200 height=150><p>110 Park Avenue<br>Welch, WV 24801<br>304-436-3175(Phone)<br>304-436-3176(Fax)</p><a href=directions/Welch.html>Get Directions</a>",
"<h4>Oak Hill WVDRS</h4><img src=offices/OakHill1.png width=200 height=150><p>549 Mall Road<br>Oak Hill, WV 25901<br>304-465-3025(Phone)<br>304-465-3069(Fax)</p><a href=directions/OakHill.html>Get Directions</a>",
"<h4>Moorefield WVDRS</h4><img src=offices/Moorefield.jpg width=200 height=150><p>151 Robert C. Byrd<br>Industrial Park Road, Suite 3<br>Moorefield, WV 26836<br>304-538-2701(Phone)<br>304-538-2718(Fax)</p><a href=directions/Moorefield.html>Get Directions</a>",
"<h4>Marshall University WVDRS</h4><img src=offices/MarshallU.png width=200 height=150><p>Prichard Hall, Room 113<br>Huntington, WV 25755<br>304-696-2394(Phone)</p><a href=directions/MarshallUniversity.html>Get Directions</a>",
"<h4>Cabell Midland H.S. WVDRS</h4><img src=offices/CabellMidland.png width=200 height=150><p>2300 US Route 60 East<br>Ona, WV 25545<br>304-743-7496(Phone)</p><a href=directions/CabellMidland.html>Get Directions</a>",
"<h4>Huntington H.S. WVDRS</h4><img src=offices/HuntingtonHigh.png width=200 height=150><p>1 Highlander Way<br>Huntington, WV 25701<br>304-528-6511(Phone)</p><a href=directions/HuntingtonHS.html>Get Directions</a>");
markers = new Array ();
for (var i = 0; i < 40; i++) {
myLatlng = new google.maps.LatLng(lats[i],longs[i]);
var contentString = htmlAll[i];
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
html: htmlAll[i],
title: hovertitle[i]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
}}
</script>
<body onLoad="initialize();">
<div id="skybox1">
<img src=offices/DRSlogo.png align=left width=60 height=60><strong><font size="6">West Virginia Division of Rehabilitation Services</font></strong>
<br>
<font size="5"> Field Offices</font><br>
<font size="3"><i>Click a marker on the map for office information.<br>
<span class="toplinks">
<a href="http://wvdrs.org/" style="color:white">WVDRS Home</a>
<a href="http://wvdrs.org/data/DRS_Location_Map_2014.pdf" style="color:white">Text-Only</a>
</span>Click elsewhere on the map to get county and WVDRS District information.</i></font>
</div>
<div id="skybox2">
<!--<h3>WVDRS Districts<h3>-->
<p><img src="map-pin.png" width="25" height="40" alt="map pin marker">DRS office</p>
<div class="color blue"></div><p><font size="4">District 1</font></p>
<div class="color yellow"></div><p><font size="4">District 2</font></p>
<div class="color brown"></div><p><font size="4">District 3</font></p>
<div class="color purple"></div><p><font size="4">District 4</font></p>
<div class="color pink"></div><p><font size="4">District 5</font></p>
<div class="color green"></div><p><font size="4">District 6</font></p>
</div>
<div id="map_canvas"></div>
</head>
</body>
</html>
参考问题：
- toggle show/hide div with button?
- Place a button right aligned
Your original code in a fiddle
添加此功能：
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
点击按钮时调用：
<button onclick="toggle_visibility('skybox2')" style="float: right;">toggle legend</button>