Draggable Marker with JavaScript

Oct 20, 2009 at 12:57 PM

Is it possible to create a draggable marker with Javascript?  Using onClientClick I have created additional functions like adding markers and hiding them using your examples.  However, after much trial and mostly error I'm unable to create a draggable marker with JavaScript.

Thanks

Coordinator
Oct 21, 2009 at 5:41 AM

Hi,

It should be possible.
You can use the Draggble config option when creating the new marker in your javascript code.
Here is a simple example, how it could be done:

function addMarker(overlay, point) {
    if (point) {
        // Notice the usage of the second parameter with value true.
        // That will force the marker to be render to the map while adding it.
        // The second line, which is commented now, is no longer needed
        GoogleMap1.addMarker({ Latitude: point.lat(), Longitude: point.lng(), Draggable: true }, true);
        //                map.Markers[map.Markers.length - 1].load(point);
    }
}

Notice the usage option Draggble in the above example.
Here is the list of all the options available:

  • Address;
  • AutoPan;
  • Bouncy;
  • Clickable;
  • Draggable;
  • DragCrossMove;
  • IconAnchor;
  • IconSize;
  • IconUrl;
  • InfoWindowAnchor;
  • Latitude;
  • Longitude;
  • OpenInfoBehaviour;
  • ShadowSize;
  • ShadowUrl;
  • Text;
  • Title;

Hope this helps.

Regards

Oct 28, 2009 at 4:51 PM

Hi,

could you please provide an example of usage of the addMarker function with a value for IconUrl?

I can't make it works, no way to display a different icon for the marker via javascript.

 

Thanks in advance.

Regards


Oct 28, 2009 at 11:34 PM

Yeah i have has the same problem as you.  i couldn't get the draggable marker to have a custom icon image.  This is if I use the above format Velio kindley provided.  After a lot of tries I had to use the format suggested by Google examples.  the advantage i found is that you can create events with the same maker object and you will still have access to the information. Say you wanted to delete a marker, you don't need to compare the coords.  Just recieve a marker object to your event and delete that.  Below is a sample of what I have done onclientclick event of the Artem map.  hope it is useful to you.

function mapClicked(overlay, point) {
	if (point) {
		var centrePoint = new GLatLng(point.lat(), point.lng());
		GoogleMap1.setCenter(centrePoint, 14);	
    	                    
		// Create marker icon
		var icon = new GIcon();
		icon.image = "images/siva.png";
		icon.shadow = "images/sivashad.png";
		icon.iconSize = new GSize(26, 43);
		icon.shadowSize = new GSize(44, 43);
		icon.iconAnchor = new GPoint(6, 20);
		icon.infoWindowAnchor = new GPoint(5, 1);
    	                    
		var marker = new GMarker(centrePoint,
			{
				icon:icon, 
				draggable: true
			}
		);
		marker.title = nMarkerButton;
		GoogleMap1.addOverlay(marker);
    	                    
		// add a drag listener to the map
		GEvent.addListener(marker, "dragend", function() {
			var point = marker.getPoint();
			GoogleMap1.panTo(point);
		});              
								  
		// add a hide event to the ma              
		GEvent.addListener(marker, "click", function() {
			GoogleMap1.removeOverlay(marker)
		});
	}
};