Hi,
I have a dropdown and checkboxes.
These are been used to control the markers on googlemaps.
The dropdown has a list of counties/states which when one is selected it zooms the map to that state and shows the markers for it.
The checkboxes are been used to hide/show the different markers by category, e.g theatre, golf, info.
The problem is I can’t figure out how to get them to work together.
When the page loads, all should be ticked and and the dropdown set to ‘Select a county’. This should then be displaying all markers.
If the user then unticks a category, then only the categories ticked should show on the map.
If the user selects a state then only the markers for that state should show depending on the categories selected.
Can anyone please help with this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/mootools-core-1.4.5-full-compat.js" type="text/javascript"></script>
<title>Google Maps</title>
<style type="text/css">
html, body { height: 100%; }
#map_canvas {
height: 380px;
margin: 0;
width: 420px;
}
</style>
<?php
$results= array ( "0" => array ( "id" => "1",
"name" => "Tourist Information 41",
"address" => "St. Annes Rd 1 West, Lytham St. Annes, Lancashire, FY8 1SA",
"county" => "Dublin",
"country" => Ireland,
"lat" => 53.330238,
"lng" => -6.264579,
"category" => theatre
),
"1" => array ( "id" => "2",
"name" => "Tourist Information 42",
"address" => "St. Annes Rd 2 West, Lytham St. Annes, Lancashire, FY8 1SA",
"county" => "Dublin",
"country" => Ireland,
"lat" => 53.330238,
"lng" => -6.564579,
"category" => golf
),
"2" => array ( "id" => "3",
"name" => "Tourist Information 43",
"address" => "St. Annes Rd 3 West, Lytham St. Annes, Lancashire, FY8 1SA",
"county" => "Clare",
"country" => Ireland,
"lat" => 52.730238,
"lng" => -9.264579,
"category" => info
)
);
?>
<script type="text/javascript">
var gmarkers = [];
var gicons = [];
var map = null;
var icon = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
var shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
// A function to create the marker and set up the event window
function createMarker(latlng,name,html,county,category) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: icon,
shadow: shadow,
map: map,
title: name,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
// === Store the county and name info as a marker properties ===
marker.mycounty = county;
marker.mycategory = category;
marker.myname = name;
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
// == shows all markers of a particular county, and ensures the checkbox is checked ==
function show(county, category) {
for (var i=0; i<gmarkers.length; i++) {
if ((gmarkers[i].mycounty == county) || (gmarkers[i].mycategory == category)) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(category+"box").checked = true;
}
// == hides all markers of a particular county, and ensures the checkbox is cleared ==
function hide(county, category) {
for (var i=0; i<gmarkers.length; i++) {
if ((gmarkers[i].mycounty == county) || (gmarkers[i].mycategory == category)) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(category+"box").checked = false;
// == close the info window, in case its open on a marker that we just hid
infowindow.close();
}
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show('', category);
} else {
hide('', category);
}
}
function reset() {
document.getElementById("countyLocation").value = "Ireland";
infowindow.close();
zoom();
}
function search() {
var selected = document.getElementById("countyLocation").value;
if (selected == "Ireland") {
$$('#countyLocation option').each(function(item) {
if(item.selected==false){
show(item.innerHTML, '');
}
});
} else {
$$('#countyLocation option').each(function(item) {
if(item.selected==false){
hide(item.innerHTML, '');
}
});
}
}
function zoom() {
var selected = document.getElementById("countyLocation").value;
if (selected == "Ireland") {
var Ireland = new google.maps.LatLng(53.527248, -8.327637);
map.setCenter(Ireland);
map.setZoom(6);
}
if (selected == "Cavan") {
var Cavan = new google.maps.LatLng(54.072283, -7.388306);
map.setCenter(Cavan);
map.setZoom(8);
}
if (selected == "Clare") {
var Clare = new google.maps.LatLng(52.988337, -9.102173);
map.setCenter(Clare);
map.setZoom(8);
}
if (selected == "Dublin") {
var Dublin = new google.maps.LatLng(53.399707, -6.262207);
map.setCenter(Dublin);
map.setZoom(9);
}
show(selected);
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i],"click");
}
function initialize() {
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(53.527248, -8.327637),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data
<?php $i=0; foreach($results as $result): ?>
<?php if(trim($result['lat'])!='' && trim($result['lng'])!=''): ?>
// obtain the attribues of each marker
var lat = "<?php echo $result['lat']; ?>";
var lng = "<?php echo $result['lng']; ?>";
var point = new google.maps.LatLng(lat,lng);
var address = "<?php echo $result['address']; ?>";
var name = "<?php echo $result['name']; ?>";
var html = "<b>"+name+"<\\/b><p>"+address;
var category = "<?php echo $result['category']; ?>";
var county = "<?php echo $result['county']; ?>";
// create the marker
var marker = createMarker(point,name,html,county,category);
<?php endif; ?>
<?php $i++; ?>
<?php endforeach;?>
// == show or hide the categories initially ==
show('', "theatre");
show('', "golf");
show('', "info");
}
window.onload = initialize;
</script>
</head>
<body class="page_bg">
<p> </p>
<div id="map_canvas" class="floatRight"> </div>
<div id="searchDrop">
<h3>Search</h3>
<select id="countyLocation" onchange="zoom();search();">
<option value="Ireland">Select a County</option>
<option value="Cavan">Cavan</option>
<option value="Clare">Clare</option>
<option value="Dublin">Dublin</option>
</select><br /><br />
<form action="#">
Theatres: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" /><br />
Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" /><br />
Tourist Information: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br /><br />
</form>
<input onclick="reset();" type="submit" value="Reset" />
</div>
<p> </p>
</body>
</html>