Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
61
rated 0 times [  67] [ 6]  / answers: 1 / hits: 17208  / 14 Years ago, sat, july 24, 2010, 12:00:00

I'm trying to filter my google maps markers from a checkbox, based on this V3 example. My checkbox html is:



<form action=#>
Attractions: <input type=checkbox id=attractionbox onclick=boxclick(this,'attraction') /> &nbsp;&nbsp;
Food and Drink: <input type=checkbox id=foodbox onclick=boxclick(this,'food') /> &nbsp;&nbsp;
Hotels: <input type=checkbox id=hotelbox onclick=boxclick(this,'hotel') /> &nbsp;&nbsp;
Towns/Cities: <input type=checkbox id=citybox onclick=boxclick(this,'city') /><br />
</form>


My javascript is below. I can't seem to get the filters to work - at present all the markers appear on the map regardless of the state of the checkboxes. I'm guessing I've just got some of my variables in the wrong place, but I haven't been able to crack the problem so far! Any help would be much appreciated.



var map;
var infowindow;
var image = [];
var gmarkers = [];

image['attraction'] = 'http://google-maps-icons.googlecode.com/files/beach.png';
image['food'] = 'http://google-maps-icons.googlecode.com/files/restaurant.png';
image['hotel'] = 'http://google-maps-icons.googlecode.com/files/hotel.png';
image['city'] = 'http://google-maps-icons.googlecode.com/files/smallcity.png';

function mapInit(){
var centerCoord = new google.maps.LatLng(18.23, -66.39);
var mapOptions = {
zoom: 1,
center: centerCoord,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById(map), mapOptions);

google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});

jQuery.getJSON(/places, function(json) {
if (json.length > 0) {
for (i=0; i<json.length; i++) {
var place = json[i];
var category = json[i].tag;
addLocation(place,category);
}
}
});

function addLocation(place,category) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place.lat, place.lng),
map: map,
title: place.name,
icon: image[place.tag]
});

marker.mycategory = category;
gmarkers.push(marker);

google.maps.event.addListener(marker, 'click', function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({
content: <h3>+ place.name +</h3><p> + place.tag +</p><a href='/places/+place.id+'>Show more!</a>
});
infowindow.open(map, marker);
});
}

function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}
document.getElementById(category+box).checked = true;
}

function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
document.getElementById(category+box).checked = false;
infowindow.close();
}

function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
}
}

jQuery(document).ready(function(){
mapInit();
});

More From » jquery

 Answers
3

Your problem is that the boxclick() function is enclosed within the scope of the mapInit() function, and therefore boxclick() is not accessible from outside mapInit(). You should remove the onclick events from your HTML input fields, and then define the event handlers within the mapInit() function as follows:



function mapInit() {

// ...

$('#attractionbox').click(function () {
boxclick(this, 'attraction');
});
}

[#96124] Wednesday, July 21, 2010, 14 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
elliem

Total Points: 415
Total Questions: 117
Total Answers: 94

Location: American Samoa
Member since Fri, Aug 26, 2022
2 Years ago
;