Google maps markers , polyline and window info from array
===

I want to show a polyline with markers and window-info from array point (from a ajax page)  
***This is index Page codes:***  

    var gmarkers = []; 
	var map = null;
	function initialize() {
	  var myOptions = {
		zoom: 15,
		center: new google.maps.LatLng(27.332702, 53.177137),
		// mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
		mapTypeId: google.maps.MapTypeId.ROADMAP
	  }

	  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	  google.maps.event.addListener(map, 'click', function() {
			infowindow.close();
			});

	}

	var infowindow = new google.maps.InfoWindow(
	  { 
		size: new google.maps.Size(150,50)
	  });

	function myclick(i) {
	  google.maps.event.trigger(gmarkers[i], "click");
	}

	function createMarker(latlng, name, html) {
		var contentString = html;
		var marker = new google.maps.Marker({
			position: latlng,
			map: map,
			zIndex: Math.round(latlng.lat()*-100000)<<5
			});

		google.maps.event.addListener(marker, 'click', function() {
			infowindow.setContent(contentString); 
			infowindow.open(map,marker);
			});
		// save the info we need to use later for the side_bar
		gmarkers.push(marker);
	}
***My Ajax Page:***  

    var polylines = [];
		
	var beaches = [
		['Bondi Beach',10,15, 4],
		['Coogee Beach',11,16, 5],
		['Cronulla Beach',13,15, 3],
		['Manly Beach',13,17, 2],
		['Maroubra Beach',12,10, 1]
	];
	
	for (var i = 0; i < beaches.length; i++) {
		var beach = beaches[i];
		var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
		var polylines = new google.maps.LatLng(beach[1], beach[2]);

		var marker = createMarker(myLatLng,"This place",beach[0])
	}

	var routes = new google.maps.Polyline({
		path: polylines,
		strokeColor: "#FF0000",
		strokeOpacity: 0.6,
		strokeWeight: 4
	});
	
	routes.setMap(map);

After I call the `Ajax Page` , markers add with window-info , but route polyline don't show , where is the problem ?