Google Map Marker Issue
by oterox
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="wrapper">
<div id="map-canvas"></div>
<div id="controls">
<div class="holdmarker">
<div id="hailmarkers">
<div id="hail100" class="marker" style="float: left;">
<img src="http://www.stormersite.com/mmarkers/hail100.png" width="50" height="50" />
</div>
<div id="hail125" class="marker" style="float: left;">
<img src="http://www.stormersite.com/markers/hail125.png" width="50" height="50" />
</div>
<div id="hail150" class="marker" style="float: left;">
<img src="http://www.stormersite.com/markers/hail150.png" width="50" height="50" />
</div>
<div id="hail175" class="marker" style="float: left;">
<img src="http://www.stormersite.com/markers/hail175.png" width="50" height="50" />
</div>
</div>
<div id="hail" class="marker" style="float: left;">
<img src="http://www.stormersite.com/markers/hailsq.png" width="50" height="50" />
</div>
<div id="wind" style="float: left;" class="marker">
<img src="http://www.stormersite.com/markers/windsq.png" width="50" height="50" />
</div>
<div id="tornado" style="float: left;" class="marker">
<img src="http://www.stormersite.com/markers/tornadosq.png" width="50" height="50" />
</div>
<div id="nexrad" style="float: left;" class="marker">
<img src="http://www.stormersite.com/markers/nexrad.png" width="50" height="50" />
</div>
</div>
<div id="reportframe">
<div id="sr0" style="display:: none;">1.50 inches @ 37.5, -77.33</div>
<div id="sr1" style="display:: none;">1.75 inches @ 37.45, -77.49</div>
...
CSS
#map-canvas {
position: absolute;
top: 0;
left: 0;
bottom: 50px;
right: 0;
}
#reportframe {
position: absolute;
top: -50px;
background-color: #666;
}
#logo {
text-align: center;
position: absolute;
bottom: 0;
right: 0;
padding: 5px;
}
#controls {
background-color: #000;
height: 60px;
width: 100%;
position: absolute;
left: 0;
bottom: 0px;
text-align: center;
}
#wrapper {
height: 100%;
width: 100%;
margin: 0px;
background-image: url(../images/stormersite_CP_header.jpg);
background-size: cover;
}
.marker {
margin: 5px;
text-align: center;
display: block;
}
#hailmarkers {
text-align: center;
display: none;
position: absolute;
bottom: 65px;
border: 1px solid #000;
z-index: 9999;
width: 180px;
background-image: url(../images/35percblack.png);
background-repeat: repeat;
}
.markeroff {
margin: 5px;
text-align: center;
display: block;
opacity: 0.5;
}
.holdmarker {
text-align: center;
margin-right: auto;
margin-left: auto;
width: 280px;
}
JavaScript
var locations = [
["1.50 inches", 37.5, -77.33, 0, "hail150"],
["1.75 inches", 37.45, -77.49, 1, "hail175"],
["1.00 inches", 37.38, -77.51, 2, "hail100"],
["1.00 inches", 37.35, -77.71, 3, "hail100"],
["1.00 inches", 38.63, -75.61, 4, "hail100"],
["1.00 inches", 38.28, -76.42, 5, "hail100"],
["1.00 inches", 34.99, -77.66, 6, "hail100"],
["1.00 inches", 34.95, -77.61, 7, "hail100"],
["1.00 inches", 34.92, -77.77, 8, "hail100"],
["1.25 inches", 34.89, -77.77, 9, "hail125"],
["1.50 inches", 36.24, -80.36, 10, "hail150"],
["1.25 inches", 34.22, -80.98, 11, "hail125"],
["1.00 inches", 35.78, -81.28, 12, "hail100"],
["1.00 inches", 35.81, -81.18, 13, "hail100"],
["1.00 inches", 34.52, -78.81, 14, "hail100"],
["1.25 inches", 33.94, -80.39, 15, "hail125"],
["1.75 inches", 34.11, -80.86, 16, "hail175"],
["1.75 inches", 34.67, -80.72, 17, "hail175"],
["1.75 inches", 33.54, -81.82, 18, "hail175"],
["1.00 inches", 33.52, -81.96, 19, "hail100"],
["1.00 inches", 33.46, -82, 20, "hail100"],
["1.25 inches", 33.47, -82, 21, "hail125"],
["1.00 inches", 33.45, -82.2, 22, "hail100"],
["1.00 inches", 33.41, -82.32, 23, "hail100"],
["1.75 inches", 33.33, -82.77, 24, "hail175"],
["1.00 inches", 32.49, -86.73, 25, "hail100"],
["1.00 inches", 32.19, -87.31, 26, "hail100"],
["1.00 inches", 32.18, -86.58, 27, "hail100"],
["1.00 inches", 36.64, -82.58, 28, "hail100"],
["1.00 inches", 36.41, -83.01, 29, "hail100"],
["1.75 inches", 32.98, -84.96, 30, "hail175"],
["1.75 inches", 31.2, -89.04, 31, "hail175"],
["1.00 inches", 31.13, -89.24, 32, "hail100"],
["Wind Report", 37.33, -76.29, 33, "wind"],
["Wind Report", 35.79, -78.73, 34, "wind"],
["Wind Report", 33.46, -79.56, 35, "wind"],
["Wind Report", 37.82, -75.59, 36, "wind"],
["Wind Report", 36.52, -78.04, 37, "wind"],
["Wind Report", 35.76, -79.23, 38, "wind"],
["Wind Report", 31.98,...