Markers change if within a polygon

tarakhanna · June 27, 2011, 8:12am

i have a project to be completed asap…and i have been working day and night on it…

i have to create a map which reads the markers frm an xml file and displays them on the map…after which the user creates a polygon…all the markers within the polygon turn green and the rest stay red…

below is the code…which i have managed to edit…for the time being … one marker is being read but nt from the xml file…its thru a variable point and them getting stored in the marker…can i know how and where to insert the xml file…???
<html>
<head>
<title>Google Maps Point in Polygon Test</title>
<script src=“http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAOzwQ7Lh4CqiMto5Mx5BruhRu8Zoefu_OQdkD9qaip96YWZcBUhS4yqdwG25yZdJJy87O76_wWCQTJQ” type=“text/javascript”></script>
<script src=“maps.google.polygon.containsLatLng.js” type=“text/javascript”></script>
<script type=“text/javascript”>
// Globals
var isEditing = false;
var polygon = null;
var map = null;
var isCompatible = GBrowserIsCompatible();
var markers = ;
var iconIncluded = ‘http://maps.google.com/mapfiles/dd-start.png’;
var iconExcluded = ‘http://maps.google.com/mapfiles/dd-end.png’;

// Called when the edit button is clicked
function editClick() {
	isEditing = !isEditing;
		
	if(isEditing && polygon != null) {
		document.getElementById('edit_button').innerHTML = 'Stop Editing';
		document.getElementById('help').innerHTML = 'Click to add points to your selection.';
		document.getElementById('reset_button').disabled = 'disabled';
		polygon.enableDrawing();
	} else {
		document.getElementById('edit_button').innerHTML = 'Edit Selection';
		document.getElementById('reset_button').disabled = '';
		document.getElementById('help').innerHTML = 'Click "Edit Selection" to select users.';
		polygon.disableEditing();
	}
}

// Update all marker images (green if in polygon, red if not)
function updatePoints() {
	for(var i in markers) {
		var marker = markers[i];
		var point = marker.getLatLng();
		var inPoly = polygon.containsLatLng(point);
		
		if(inPoly) {
			marker.setImage(iconIncluded);
		} else {
			marker.setImage(iconExcluded);
		}
	}
}

// Delete the current polygon selection
function resetPolygon() {
	if(polygon != null) {
		map.removeOverlay(polygon);
	}
	
	// Create a new polygon selector
	polygon = new GPolygon([], "#000000", 1, 1, "#336699", 0.3);
	map.addOverlay(polygon);
	
	// Add callback for when the polygon is updated
	GEvent.addListener(polygon, "lineupdated", function() {
		// Timeout is a hack, some browsers won't callback without a delay
		setTimeout(updatePoints, 50);
	});
	
	// Add callback for when the polygon is finished
	GEvent.addListener(polygon, "endline", function() {
		// Timeout is a hack, some browsers won't callback without a delay
		setTimeout(editClick, 50);
	});
	
	updatePoints();
}

// Initialization
function load() {
	if (isCompatible) {
		// Create Map
		map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(25.123, 55.12365), 10);

		// Add controls
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());

		// Create Selection Polygon
		var latlng = map.getCenter();
		var width = 20;
		var height = 12;
		var lat = latlng.lat();
		var lng = latlng.lng();
		var x1 = lng - width / 2;
		var y1 = lat - height / 2;
		var x2 = lng + width / 2;
		var y2 = lat + height / 2;
		
		resetPolygon();

		// Add 10 markers to the map at random locations
		var bounds = map.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();
		var lngSpan = northEast.lng() - southWest.lng();
		var latSpan = northEast.lat() - southWest.lat();

		
			var point = new GLatLng(25.123, 55.12365)
			var marker = new GMarker(point, {bouncy: true,autoPan: false});
			map.addOverlay(marker);
			
			markers.push(marker);
	
		
		updatePoints();
	}
}
&lt;/script&gt;

</head>
<body onLoad=“load()” onUnload=“GUnload()”>
<div>
<span><button id=“edit_button” onClick=“editClick()” type=“button”>Edit Selection</button></span>
<span><button id=“reset_button” onClick=“resetPolygon()” type=“button”>Reset Selection</button></span>
<span id=“help” style=“color: #666;”>Click "Begin Editing" to select users.</span>
</div>

&lt;hr /&gt;
&lt;div id="map" style="width: 640; height: 480; border:1px solid #333;"&gt;&lt;/div&gt;

</body>
</html>

BELOW is the xml file.