Google maps jQuery plugin basic example

Using jquery with Google maps

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

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="PATH_TO_PLUGIN/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 1-n, meaning it can find a single value within a array

$('#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', 'delimiter': ',' }, 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'));

There are many ways of writing this snippet, please refer to the sample code section in the wiki.