cyberhobo/google-marker-drag.html

## google-marker-drag.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mapstraction Examples - google v2</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAY70wuSo0zF3ZtJVp5bDm1BS1Y2ErAqCHV5rDhHSzgjy23KqwdRRaoSBuZk72oDzzAYxVBjtsLqSmTw"></script>
<script src="../source/mxn.js?(google)" type="text/javascript"></script>
<script src="mxn.google.extras.js" type="text/javascript"></script>
<style type="text/css">
#mapdiv {
  height: 400px;
}
</style>
<script type="text/javascript">
//<![CDATA[
  function initialize() {
	  var segment_points;

      // create mxn object
      var m = new mxn.Mapstraction('mapdiv','google');
		m.addExtras();

      m.addControls({zoom:'small'});

      var latlon = new mxn.LatLonPoint(51.53468413093941, -0.09026169776916504)

      // put map on page
      m.setCenterAndZoom(latlon, 16);

      // add a marker
      var marker = new mxn.Marker(latlon);
		marker.setDraggable(true);
      m.addMarker(marker,true);
		segment_points = [ latlon ];
		marker.dragend.addHandler( function( name, source, args ) {
			segment_points.push( args.location );
			m.addPolyline( new mxn.Polyline( segment_points ) );
			segment_points.shift();
		})
  }
//]]>
</script>
</head>
<body onload="initialize();">
<center>
<table border='1' width='50%'>
<tr><td><div id="mapdiv"></div></td>
</tr>
</table>
</center>
</body>
</html>

## mxn.google.extras.js
/**
 * Add some Google v2 goodies to baseline mapstraction.
 */
mxn.addProxyMethods( mxn.Mapstraction, [
	/**
	 * Add a method that can be called to add our extra stuff to an implementation.
	 */
	'addExtras'
]);

mxn.register( 'google', {
	Mapstraction: {
		addExtras: function() {
			var me = this;
			me.markerAdded.addHandler( function( name, source, args ) {
				// enable dragend event for google
				args.marker.dragend = new mxn.Event( 'dragend', args.marker );
				google.maps.Event.addListener( args.marker.proprietary_marker, 'dragend', function( latlng ) {
					args.marker.dragend.fire( { location: new mxn.LatLonPoint( latlng.lat(), latlng.lng() ) } );
				});
			});
		}
	}
});
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Mapstraction Examples - google v2</title>
	<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAY70wuSo0zF3ZtJVp5bDm1BS1Y2ErAqCHV5rDhHSzgjy23KqwdRRaoSBuZk72oDzzAYxVBjtsLqSmTw"></script>
	<script src="../source/mxn.js?(google)" type="text/javascript"></script>
	<script src="mxn.google.extras.js" type="text/javascript"></script>
	<style type="text/css">
	#mapdiv {
	height: 400px;
	}
	</style>
	<script type="text/javascript">
	//<![CDATA[
	function initialize() {
	var segment_points;

	// create mxn object
	var m = new mxn.Mapstraction('mapdiv','google');
	m.addExtras();

	m.addControls({zoom:'small'});

	var latlon = new mxn.LatLonPoint(51.53468413093941, -0.09026169776916504)

	// put map on page
	m.setCenterAndZoom(latlon, 16);

	// add a marker
	var marker = new mxn.Marker(latlon);
	marker.setDraggable(true);
	m.addMarker(marker,true);
	segment_points = [ latlon ];
	marker.dragend.addHandler( function( name, source, args ) {
	segment_points.push( args.location );
	m.addPolyline( new mxn.Polyline( segment_points ) );
	segment_points.shift();
	})
	}
	//]]>
	</script>
	</head>
	<body onload="initialize();">
	<center>
	<table border='1' width='50%'>
	<tr><td><div id="mapdiv"></div></td>
	</tr>
	</table>
	</center>
	</body>
	</html>
	/**
	* Add some Google v2 goodies to baseline mapstraction.
	*/
	mxn.addProxyMethods( mxn.Mapstraction, [
	/**
	* Add a method that can be called to add our extra stuff to an implementation.
	*/
	'addExtras'
	]);

	mxn.register( 'google', {
	Mapstraction: {
	addExtras: function() {
	var me = this;
	me.markerAdded.addHandler( function( name, source, args ) {
	// enable dragend event for google
	args.marker.dragend = new mxn.Event( 'dragend', args.marker );
	google.maps.Event.addListener( args.marker.proprietary_marker, 'dragend', function( latlng ) {
	args.marker.dragend.fire( { location: new mxn.LatLonPoint( latlng.lat(), latlng.lng() ) } );
	});
	});
	}
	}
	});