Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Multiple Draggable Markers on Google Maps

Status
Not open for further replies.

audiopro

Programmer
Apr 1, 2004
3,165
GB
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.
Code:
function hodgmap() {

var business = [['B',53.726315,-2.331912,'[URL unfurl="true"]http://www.*Website*.co.uk/mapimages/born.png'[/URL]],
['S',53.726455,-2.327492,'[URL unfurl="true"]http://www.*Website*.co.uk/mapimages/school.png'[/URL]],
['L',53.726315,-2.331912,'[URL unfurl="true"]http://www.*Website*.co.uk/mapimages/live.png'[/URL]],
['L',53.726315,-2.331912,'[URL unfurl="true"]http://www.*Website*.co.uk/mapimages/live.png'[/URL]],
['L',53.726315,-2.331912,'[URL unfurl="true"]http://www.*Website*.co.uk/mapimages/live.png'[/URL]]];
	var mapOptions = {
		zoom: 16,
		streetViewControl:false,
		scrollwheel:false,
		center: new google.maps.LatLng(53.726315,-2.331912)
	};
	var map = new google.maps.Map(document.getElementById('map_canvas'),
      	mapOptions);
	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="[URL unfurl="true"]http://www.*Website*.co.uk/cgi-bin/hodclark.pl?call=setlatlongchange&ursula=kward&porpoise=wk773865&mode=edit&item="+i;[/URL]
		var fulltitle=pub[4]+" "+pub[5];
		mkr = new google.maps.Marker({
			draggable:true,
			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);
		[COLOR=#EF2929]document.getElementById(latbox).value = latitude;
		document.getElementById(lngbox).value = longitude;
[/color]		var NewLatLng = new google.maps.LatLng(latitude, longitude);
		map.panTo(NewLatLng);  
		});
  	}
}

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

Keith
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top