Google maps jQuery filter by property

Using jquery with Google maps

Download jQuery 1.4.X or higher or use Googles or Microsofts CDN.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery.ui/jquery.ui.map.js"></script>
$('#map_canvas').gmap({'center': '59.3426606750, 18.0736160278' }).bind('init', function () {
	$('#map_canvas').gmap('addMarker', { 'foo': 'bar', 'position': '59.3426606750, 18.0736160278' });
	$('#map_canvas').gmap('addMarker', { 'foo': 'baz', 'position': '58.3426606750, 18.0736160278' });
	$('#map_canvas').gmap('find', 'markers', { 'property': 'foo', 'value': 'bar' }, function(marker, found) {
		marker.setVisible(found);
	});
});

The find method is n-n, meaning it can find a multiple value within a array. If you need both values (bar and boz) to be included add the property 'operator':'AND'

$('#map_canvas').gmap({'center': '59.3426606750, 18.0736160278' }).bind('init', function () {
	$('#map_canvas').gmap('addMarker', { 'foo': 'bar,baz,boz', 'position': '59.3426606750, 18.0736160278' });
	$('#map_canvas').gmap('find', 'markers', { 'property': 'foo', 'value': ['bar','boz'] }, function(marker, found) {
		marker.setVisible(found);
	});
});

If you need to know whether or not a markers position is visible in viewport, use can use the inViewport method.

$('#map_canvas').gmap('addMarker', { 'id': 'some_id', 'position': '58.3426606750, 18.0736160278' });
$('#map_canvas').gmap('inViewport', $('#map_canvas').gmap('get', 'marker > some_id'));