Draw an arrow on Google map

April 25, 2010

I wrote a simple javascript function that draws an arrow on a Google Map (based on http://wtp2.appspot.com/BdccArrowedPolyline.js):

function drawArrow(pt1, pt2, color)
{
	var lineWidth = 10;
	var lineOpacity = 0.7;
	var arrowSize = 50;

	function addHead(point, theta, zoom, color)
	{
		var p = prj.fromLatLngToPixel(point,  zoom)
		var x = p.x, y = p.y;
		var t = theta + (Math.PI/4) ;
		if(t > Math.PI)
			t -= 2*Math.PI;
		var t2 = theta - (Math.PI/4) ;
		if(t2 <= (-Math.PI))
			t2 += 2*Math.PI;
		var pts = new Array();
		var headLength = arrowSize;
		var x1 = x-Math.cos(t)*headLength;
		var y1 = y+Math.sin(t)*headLength;
		var x2 = x-Math.cos(t2)*headLength;
		var y2 = y+Math.sin(t2)*headLength;
		pts.push(prj.fromPixelToLatLng(new GPoint(x1,y1), zoom));
		pts.push(prj.fromPixelToLatLng(new GPoint(x,y), zoom));
		pts.push(prj.fromPixelToLatLng(new GPoint(x2,y2), zoom));
		var head = new GPolygon(pts, color, 0, 1, color, 1);
		map.addOverlay(head);
	}

	var polyline = new GPolyline([pt1, pt2], color, lineWidth, lineOpacity);
	var zoom = map.getZoom();
	var p1 = prj.fromLatLngToPixel(pt1,  zoom);
	var p2 = prj.fromLatLngToPixel(pt2,  zoom);
	var dx = p2.x-p1.x;
	var dy = p2.y-p1.y;
	var theta = Math.atan2(-dy,dx);

	addHead(pt2, theta, zoom, color);
	map.addOverlay(polyline);
}

Where pt1, pt2 are GLatLng instances, map is GMap2 and color is a string representation of color. Unfortunately, this function does not support map’s zooming – arrows heads grow bigger when zooming in.

The result looks like:

arrow

  • arrow

tags: ,
posted in Web by dmitko

2 Comments to "Draw an arrow on Google map"

  1. Luis wrote:

    Could you please publish the complete code of your demo?

  2. Maria wrote:

    You must be talking to a high class ppoele about things being handed to them. I’m still looking/waiting for things to hand to me. I’m still working for everything I got. I still have to work to continue my education. I’m sure you do too. There are three classes of ppoele in America. You have the high class (things get handed to them), the middle class (like myself have to work for everything) and you have the low class (government handed them welfare). The rich ppoele from a high class family don’t care about education and just want to spend all the money they have that their family (few generation ago) work so hard for. The middle class ppoele like myself find every way to get an education, so I can get a better job. So I can get out of the living on paycheck by paycheck life style. You have the lower class ppoele that just gave up to easy on education and try to find a quick way to make money (like dealing drugs or prostitution). Other countries like my home country, educations are very hard to come by. Every ppoele that have an opportunity to get an education, they grab a hold of it and finish it. If it means their family have to sell all the farm lands to put them through college, they will do it. Many countries like my country, education is above all. I agreed with you the part that you can’t take the education with you when you die, but you can leave behind a very great legacy. Many third world counties are like that. America has everything and the ppoele don’t appreciate it at all until all of those get taken away from them. Do you see that will happen one day to this country? I think so.

 
Powered by Wordpress and MySQL. Theme by Shlomi Noach, openark.org