jMaps

This example shows you how easily jQuery + jMaps makes adding and removing polygons and polylines from your map.

Google polygons and Google polylines allows you to define and add a polygon shape to any position on the map.

Example 1: Simple Adding and Removing Polygon.

Add Polygon | Remove Polygon

                        
jQuery(document).ready(function(){
	jQuery('#map1').jmap('init', {'mapType':G_HYBRID_MAP,'mapCenter':[55.958858,-3.162302]});
	
	jQuery('.add-polygon').click(function(){
		jQuery('#map1').jmap('AddPolygon', {
			'polygonPoints': [
				[55.958858,-3.162302],
				[55.968858,-3.162302],
				[55.968858,-3.152302],
				[55.958858,-3.152302],
				[55.958858,-3.162302]
			],
			'polygonFillOpacity': 0.5
		}, function( polygon, options){
			jQuery('.remove-polygon').click(function(){
				jQuery('#map1').jmap('RemovePolygon', polygon);
			});
		});
		return false;
	});
});
                        
                    

Example 2: Simple Adding and Removing Polyline.

Add Polyline | Remove Polyline

                        
jQuery(document).ready(function(){
	jQuery('#map2').jmap('init', {'mapType':G_HYBRID_MAP,'mapCenter':[55.958858,-3.162302]});
	jQuery('.add-polyline').click(function(){
			jQuery('#map2').jmap('AddPolyline', {
				'polylinePoints': [
					[55.958858,-3.162302],
					[55.768858,-3.162302],
					[55.968858,-3.552302],
					[55.958858,-3.152302],
					[55.458858,-3.162302]
				]
			}, function( polyline, options){
				jQuery('.remove-polyline').click(function(){
					jQuery('#map2').jmap('RemovePolyline', polyline);
				});
			});
			return false;
		});
 	});
});