Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


Multiple Draggable Markers on Google Maps

Multiple Draggable Markers on Google Maps

Multiple Draggable Markers on Google Maps

I have a Google Map on a genealogy website which shows markers representing locations connected to a person.
This is working but I have created another map where the locations can be edited.
The array 'business' contains the location information and the relevant markers display correctly on the map.
Each array can be dragged and the 'Dragend' event is being triggered.
The main HTML page has textboxes displaying the LATs and LONGs of all the markers and the getElementById event should update the appropriate textbox when a marker is dragged to a new location.
The problem is, only the text boxes lat5 and lng5 are updating.
I believe the problem is due to the scope of the variables and wonder if someone could point me in the right direction.


function hodgmap() {

var business = [['B',53.726315,-2.331912,'http://www.*Website*.co.uk/mapimages/born.png'],
	var mapOptions = {
		zoom: 16,
		center: new google.maps.LatLng(53.726315,-2.331912)
	var map = new google.maps.Map(document.getElementById('map_canvas'),
	for (var i = 1; i <= business.length; i++) {
		var pub = business[i-1];
		var myLatLng = new google.maps.LatLng(pub[1], pub[2]);
		var mkr = 'mk'+i;
		var latbox = 'lat'+i; 
		var lngbox = 'lng'+i;
		var link="http://www.*Website*.co.uk/cgi-bin/hodclark.pl?call=setlatlongchange&ursula=kward&porpoise=wk773865&mode=edit&item="+i;
		var fulltitle=pub[4]+" "+pub[5];
		mkr = new google.maps.Marker({
			position: myLatLng,
			map: map,
			icon: pub[3],
	        		title: fulltitle,
	        		zIndex: i,
			url: link

		google.maps.event.addListener(mkr, 'click', function() {
    		window.location.href = this.url;
		google.maps.event.addListener(mkr, 'dragend', function (event) {
		var latitude = this.getPosition().lat();
		var longitude = this.getPosition().lng()
		latitude = latitude.toFixed(6);
		longitude = longitude.toFixed(6);
		document.getElementById(latbox).value = latitude;
		document.getElementById(lngbox).value = longitude;
		var NewLatLng = new google.maps.LatLng(latitude, longitude);

google.maps.event.addDomListener(window, 'load', hodgmap); 


Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close