JavaScript & jQuery: The Missing Manual ... - Robert Guajardo

Adding Google Maps
to Your Site
latitude : 45,
longitude : -122,
zoom : 15
}); // end goMap
$.each(markers,function(i,marker) {
$.goMap.createMarker(marker);
}); // end each
In addition, you might want to remove markers (for example, a button that says
Hide Markers). GoMap includes a clearMarkers() function. You use it like the create-
Marker() function; that is, you attach it to the jQuery object instead of a selection,
like this:
$.goMap.clearMarkers();
So say you have a button on the page with the ID of removeMarkers. You can attach
a click handler to it that will remove the markers from the page:
$('#removeMarkers').click(function() {
$.goMap.clearMarkers();
}); // end click
If you wish to remove just a particular marker, you need to first add an ID to a
marker, then call GoMap’s removeMarker function. For example, the code below
creates a new map (lines 1–13), and then adds a click event to a page element with
the ID of remove.
1 $('#map').goMap({
2 markers : [
3 {
4 latitude : 45.53940,
5 longitude : -122.59025,
6 title : 'Marker 1',
7 id : 'marker1'
8 }
9 ],
10 zoom : 15,
11 maptype : 'ROADMAP',
12 scaleControl : true
13 }); // end goMap
14 $('#remove').click(function() {
15 $.goMap.removeMarker('marker1');
16 });
The important part in creating the marker is line 7—id : ‘marker1’—which assigns
an name to that marker. Once a marker has an ID, you can identify it and remove it
using the removeMarker function (line 15). GoMap also provides a showHideMarker()
function, which toggles a marker from visible to invisible and vice versa. For example,
you could rewrite lines 14–16 so each time the page element is clicked, the
particular marker is either hidden or shown, like this:
$('#remove').click(function() {
$.goMap.showHideMarker('marker1');
});
396 javascript & jquery: the missing manual
www.it-ebooks.info