Hi there,

I am a grade 11 student doing a school project, and have hit a bump in the road, I am new to JavaScript (although I have a solid background in HTML 5, CSS 3, PHP, MySQL, and Java).

My objective is to plot multiple places on a map (using the google maps api) using the data from a multi-dimensional array.

I used this code to set a marker (the code is from w3schools):

Code:
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
 
var marker = new google.maps.Marker({
    position: myCenter,
});
now normally I would just type that out to set a marker, but what if I am working with 2000 markers ??
the goal is to pull the info from a database at the end, but thats stepping to far ahead.

For now I want to put the data into a multi dimensional array in PHP I have:
this
Code:
$coords = array(
	'place1' => array('name'=> "placename1", 'lat'=> "51.025", 'long'=> -0.12085),
	'place2' => array('name'=> "placename2", 'lat'=> 52.025, 'long'=> -0.13085),
	'place3' => array('name'=> "placename3", 'lat'=> 53.025, 'long'=> -0.14085),
	'place4' => array('name'=> "placename4", 'lat'=> 54.025, 'long'=> -0.15085),
	'place5' => array('name'=> "placename5", 'lat'=> 55.025, 'long'=> -0.16085)
);
How would I do the above code, in Javascript?

and then how do I get it into the Marker code, instead of writing a 'marker' code for every place, ie:
Code:
var myCenter=new google.maps.LatLng($coords['place1']['lat'],$coords['place1']['long']);
 
var marker = new google.maps.Marker({
    position: myCenter,
});
How can I then (in JavaScript code) create a loop that does the code automatically to set each place in the array?



I have done this in PHP:
My idea in PHP was to create the array:

Code:
$coords = array(
	'place1' => array('name'=> "placename1", 'lat'=> "51.025", 'long'=> -0.12085),
	'place2' => array('name'=> "placename2", 'lat'=> 52.025, 'long'=> -0.13085),
	'place3' => array('name'=> "placename3", 'lat'=> 53.025, 'long'=> -0.14085),
	'place4' => array('name'=> "placename4", 'lat'=> 54.025, 'long'=> -0.15085),
	'place5' => array('name'=> "placename5", 'lat'=> 55.025, 'long'=> -0.16085)
);
and then used a foreach loop to iterate over the array, creating the marker code in JavaScript:

Code:
$num = 1;
		 
		
foreach($coords as $key){
					
	echo "						
		var marker" . $num ."=new google.maps.Marker({
			position: google.maps.LatLng(" . $key['lat'] . ", " . $key['long'] . "),
		});

		marker" . $num .".setMap(map);
	";
	$num++;
}
I cannot run this PHP script inside of a web page, as then it just outputs the code on to the screen (the javascript code):
Code:
var marker1=new google.maps.Marker({ position: google.maps.LatLng(51.025, -0.12085), }); marker1.setMap(map); var marker2=new google.maps.Marker({ position: google.maps.LatLng(52.025, -0.13085), }); marker2.setMap(map); var marker3=new google.maps.Marker({ position: google.maps.LatLng(53.025, -0.14085), }); marker3.setMap(map); var marker4=new google.maps.Marker({ position: google.maps.LatLng(54.025, -0.15085), }); marker4.setMap(map); var marker5=new google.maps.Marker({ position: google.maps.LatLng(55.025, -0.16085), }); marker5.setMap(map);
So I know the script works, but it will not actually make it into javascript code (I have tried echoing out <script></script> tags around it.

So I need to be able to do this in JavaScript alone.

Please would someone help me! I have searched for ages, and need it ASAP.

Quick notes on what needs to be done:
Multidimensional array with the place name and its Latitude and Longitude coordinates
Google maps api set up in a web page
Set the markers on the map using the info from the array by means of a loop

Thank you in advance,
Josh.