www.webdeveloper.com
Results 1 to 4 of 4

Thread: Google Maps Marker Data From Multi Dimensional Array

  1. #1
    Join Date
    Jun 2013
    Posts
    6

    Google Maps Marker Data From Multi Dimensional Array

    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.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,085
    1. create the array in php
    2. echo it out as a global variable to your html page
    3. loop through the array using javascript, creating the markers and setting them on the map

    you don't need the array to contain the google maps stuff. php doesn't know anything about google maps, as when the php is operating the maps API script isn't even loaded yet. All you need your array to look like is this:

    Code:
    var markers =[{lat:30.2,lng:45.3,name:"whatever"},{lat:35.2,lng:46.3,name:"something else"}];
    then your javascript loop looks like this:

    Code:
    for (var i = 0; i < markers.length; i++) {
    var marker = new google.maps.Marker({
          position: new google.maps.LatLng(markers[i].lat,markers[i].lng),
          map: map,
          title:markers[i].name
      });
    }

  3. #3
    Join Date
    Jun 2013
    Posts
    6
    The easiest way to get this working is by using PHP to access the database, and echo it out in XML. Then use the javascript to run through the XML and plots it on the graph.

    I followed step by step, and used the "genxml3.php" method to get it working properly.

    The link below is for the tutorial I used, and I suggest people to use it. It is a long read, but worth it.

    Thank you to everyone who took time reading this thread.

    https://developers.google.com/maps/a.../phpsqlajax_v3

  4. #4
    Join Date
    Nov 2010
    Posts
    1,085
    I cannot for the life of me see why you would want to drag xml into this, but if it works for you...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles