Hello,
new to javascript, copy and pasted some text, but sidebar dosen’t seem to work…can some help?
Thank you!
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="utf-8">
<Title>Web Tool</Title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<div data-role="page">
<div data-role="header">
<br>
</div>
<br>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<br>
<script>
var map;
var markersArray = [];
var infoWindow;
var places = [
['1', 40.421613,90.128422,'Name', 'yyyyyyyy', 'zzzz.png'],
];
//alternate btw 7 different colored markers for this..
var icons = [
'zzzz.png',
'ffff.png',
];
// center map in middle of Nebraska
var mapCenter = new google.maps.LatLng(40.919036, 90.924594);
//create the map
function createMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: mapCenter,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
streetViewControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
});
//create a global infowindow to show content
//set a maxwidth of 300 pixel
infoWindow = new google.maps.InfoWindow({
map: map
});
}
function initMarkers() {
for (var i=0; i<places.length; i++) {
var place=places[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place[1], place[2],place[3]),
map: map,
//set icon, category as icons index
//outcomment this line if you just want to show the defuult icon
icon : icons[place[5]],
//add data from places to the marker
title : place[0],
category: place[3],
content: place[4],
icon: place[5]
});
//add the marker to the markersArray, used to hide/show markers
markersArray.push(marker);
//create a click event that shows the infowindow when a marker is clicked
//the infowindow get latlng and content from the marker
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setPosition(this.position);
infoWindow.setContent(this.content);
infoWindow.open(map);
});
}
}
//show / hide markers based on category
//if category is 0, show all markers
function showMarkersByCategory(category) {
for (var i=0; i<markersArray.length; i++) {
if ((category==0) || (markersArray[i].category==category)) {
markersArray[i].setVisible(true);
}
}
}
function initialize() {
createMap();
initMarkers();
//init the select box where you show/hide the markers per category
var checkbox=document.getElementById('checkbox');
checkbox.onclick = function() {
for (var i=0; i<markersArray.length; i++) {
markersArray[i].setVisible(false);
}
var checkedBoxes = $('#checkbox > input:checkbox:checked');
for (var i = 0; i < checkedBoxes.length; i++){
var category = checkedBoxes[i].value;
showMarkersByCategory(category);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebar() {
var html = "";
for (var i=0; i<markers.length; i++) {
if (markers[i].getVisible()) {
html += '<a href="javascript:myclick(' + i + ')">' + markers[i].html + '<\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = html;
}
</script>-</head>
<div id="map" style="width:80%;height:800px;float:left;clear:none;"></div>
<div id="side_bar" style="width:200px;height:800px;float:right;clear:none;border-style: inset;"></div>
<div style="position: absolute; left: 5px; top: 20px; padding: 10px 10px 10px 10px;">
<br>
<form id="checkbox">
<input type="checkbox" name="" value="0">All  
<input type="checkbox" name="Name" value="name">Name'
<input type="checkbox" name="Name1" value="name1">Name1
</form>
</div>
</body>
</html>
