Attention! Do you have any ideas for reorganizing and updating the Mapki? Please leave a note here. Thank you!

Click Listeners 101 - Polyline Drawing

From Google Mapki

Jump to: navigation, search

Just code for now, will maybe update more later. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<title>Google Maps API Example - async</title>
	<style type="text/css">
	v\:* {
	  behavior:url(#default#VML);
	}
	</style>
	<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAbr2Sxqdz2s597elhfo6ReBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTgHVmc9RSEFJjOb9uLHrbzggnVCw" type="text/javascript"></script>
	<script type="text/javascript"> 
	//<![CDATA[ 
	function createMarker(point,name,type,html) { 
		var marker = new GMarker(point); 
		marker.name = name;
		marker.type = type;
		marker.html = html;
		return marker; 
	}
	function renderLine(){ 
		map.removeOverlay(startmarker); 
		map.removeOverlay(endmarker); 
		map.removeOverlay(editline);
		if (mypolyline.length){
			editline = new GPolyline(mypolyline,"#0000FF", 2, 1)
			map.addOverlay(editline);
			startmarker=new GMarker(mypolyline[0]); 
			startmarker.type="start"; 
			map.addOverlay(startmarker); 
			endmarker=new GMarker(mypolyline[mypolyline.length-1]); 
			endmarker.type="end"; 
			map.addOverlay(endmarker); 
		}
	} 
	
	function onLoad(){
		if (GBrowserIsCompatible()) { 
			// Display the map, with some controls and set the initial location 
			map = new GMap(document.getElementById("div_map")); 
			map.addControl(new GLargeMapControl()); 
			map.addControl(new GMapTypeControl()); 
			map.setCenter(new GLatLng(54, -3), 4);
			
			mypolyline = [];
			startmarker = false;
			endmarker = false;
			editline = false;
			
			var tmp = createMarker(new GLatLng(57.0,-5.0), "Marker 1", "loc", "I am not part of the line");
			map.addOverlay(tmp);
			var tmp = createMarker(new GLatLng(50.0,-2.0), "Marker 2", "loc", "I am not part of the line");
			map.addOverlay(tmp);
			
			GEvent.addListener(map, "click", function(overlay, point) { 
				if (point){ 	// background clicked
					mypolyline.push(point); 
					renderLine(); 
				} else if (overlay) {   // marker clicked
					if (overlay.type=="start"){
						mypolyline.shift();
					} else if (overlay.type == "end"){ 
						mypolyline.pop(); 
					} else {	// not a start or end marker
						overlay.openInfoWindowHtml("I am "+overlay.name+"<br/>"+overlay.html);
					}
					renderLine(); 
				} 
			}); 
		} else { 
			alert("Sorry, the Google Maps API is not compatible with this browser"); 
		} 
	}
	
	//]]>
	</script>
	</head>
	<body onload="onLoad()">
		<div id="div_map" style="width: 500px; height: 300px"></div>
		<div id="message"></div>
	</body>
</html>

Retrieved from "http://mapki.com/wiki/Click_Listeners_101_-_Polyline_Drawing"
Personal tools
Advertisement