Question : Looping over google maps v3 markers

Using Google Maps API v3

Basically just trying to display a map with markers from the returned lat/long of my loads query. The markers are being displayed but the on 'clicl' function is only opening the last marker since the name is not unique. How can I fix this so each marker his a unique name and click function?

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:



<!--- Invoke the Loads query --->
<cfinvoke component="CFC.loads" method="loadsQuery" returnvariable="loads"> 

<!---                              Google Map                           --->
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript"> 
  function initialize(){
  	var myLatlng = new google.maps.LatLng(39.92018, -97.3392);
  	var myOptions = {
  		scrollwheel: false,
  		zoom: 5,
  		center: myLatlng,
  		mapTypeId: google.maps.MapTypeId.ROADMAP
  	}
  	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  	
<cfoutput query="loads">	
  	var contentString = 'MY CONTENT';
  	
  	var infowindow = new google.maps.InfoWindow({
  		content: contentString
  	});

	var myLatLng = new google.maps.LatLng(#loads.origin_lat#, #loads.origin_long#);  	
  	var marker = new google.maps.Marker({
  		position: myLatLng,
  		map: map,
  		title: "Load Location"
  	});
  	
  	google.maps.event.addListener(marker, 'click', function(){
  		infowindow.open(map, marker);
  	});
</cfoutput>	
  }
</script>

Answer : Looping over google maps v3 markers

this is how you do it (see attached code).
some of the javascript code is from this google groups thread: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/f40390e4a6ba89e9/25a246d92f93e9ea#25a246d92f93e9ea

Azadi

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:



<!--- Invoke the Loads query --->
<cfinvoke component="CFC.loads" method="loadsQuery" returnvariable="loads"> 

<html>
<head>
<!---                              Google Map                           --->
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var infowindow;
var arrMarkers = new Array();

MapMarker = function(lat,lng,m_title,m_content) {
  this.lat = lat;
  this.lng = lng;
  this.m_title = m_title;
  this.m_content = m_content;
}

<cfoutput query="loads">
  arrMarkers[#loads.currentrow-1#] = new MapMarker(#loads.origin_lat#,#loads.origin_long#,"Marker #loads.currentrow# Title","Marker #loads.currentrow# Content");
</cfoutput>

initialize = function(){
  var myLatlng = new google.maps.LatLng(17.9369286375494, 102.7001953125);
  var myOptions = {
    scrollwheel: false,
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
  // Close InfoWindow when clicking anywhere on the map.
  infoWindow = new google.maps.InfoWindow();
  google.maps.event.addListener(map, 'click', function() {
    infoWindow.close();
  });

  // draw markers on map
  for (var i in arrMarkers) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(arrMarkers[i].lat, arrMarkers[i].lng),
      map: map,
      title: arrMarkers[i].m_title
    });
    // Register a click listener on each marker created
    google.maps.event.addListener(marker, 'click', (function(markerArg, index) {
      return function() {
        infoWindow.setContent(arrMarkers[index].m_content);
        infoWindow.open(map, markerArg);
      };
    })(marker, i));
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <div id="map_canvas" style="width:100%; height:100%; padding:0; margin:0 auto;"></div>
</body>
</html>