MySQL data in javascript using PHP's foreach loop (Googlel Maps API)

Question

I'm trying to use the Google Maps V3 API to create markers on a google map. I have the coordinates of the markers in mySQL database, and is currently in a PHP array in my .php file. Now how do I use a foreach() loop (or another suitable method) to loop through the elements in my PHP array and create a new google map marker with each iteration of the loop?

PS: My PHP is decent, but not my javscript knowledge. The tutorial I'm following now on creating the markers is at http://www.svennerberg.com/2009/07/google-maps-api-3-markers/

Code

I'm using Codeigniter framework, so the controller+model file already retrieved the necessary data(name, lng, lat...) into an array $map. I can loop the array using the usual method:

foreach($map as $row) {
    $lng = $row[lng]  // this is not necessary, its just to show what is in the array
    $lat = $row[lat]
    // now how do I use this loop to create new marker code in javascript?
}

The JS code for creating a google map marker which has to be created once per foreach loop iteration is like:

var map = new google.maps.Map(document.getElementById('map'), {  
zoom: 7,  
  center: new google.maps.LatLng($lng, $lat),    // how do i pass the PHP variables into the JS code?  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
});

So my question is how do i pass the PHP variables in the PHP array to create the JS code above, once per each foreach() loop iteration?

show some code that you have so far so we can help you

Ibu
– Ibu

2011-05-11 04:58:56 +00:00
Commented May 11, 2011 at 4:58 — Ibu
– Ibu, Commented May 11, 2011 at 4:58
Added some code into original post...

Nyxynyxx
– Nyxynyxx

2011-05-11 05:11:14 +00:00
Commented May 11, 2011 at 5:11 — Nyxynyxx
– Nyxynyxx, Commented May 11, 2011 at 5:11

Nicole · Accepted Answer · 2011-05-11 05:27:21Z

First of all, you are on the right track, but you just need to understand the separate concepts of server-side and client-side languages and how they can interact. PHP doesn't "pass" variables to JavaScript, but what it does do is generate whatever HTML document you want.

That HTML document then can contain JavaScript, which will execute as the page is rendered by the browser. So, think of your PHP as making the JavaScript code:

Example of PHP outputting JavaScript code in HTML page:

<script type="text/javascript">
     var testval = "<?php echo "Hello, " . (5 + 3) . "!" ?>";  // "Hello, 8!
</script>

Now, I looked up the tutorial, and actually the code in your question is not the right code — instead it is the code to create the map, and the lat/long parameters in your example are for the center, not a marker.

So, in your PHP page, you want to do the following:

Somewhere, you need to create the map: var map = new google.maps.Map... (as shown in the tutorial)
Next, get the $map array with array items containing the 'lng' and 'lat' keys. (Note: you should always wrap array key names with quotes)
Inside an opened script tag use <?php to create a PHP code block, and create your foreach loop. For each item, create the JavaScript code needed to create the marker.

Example of foreach loop:

<script type="text/javascript">
<?php
foreach($map as $row) {
    $lng = $row['lng'];
    $lat = $row['lat'];
    ?>
    // Creating a marker and positioning it on the map  
    new google.maps.Marker({  
        position: new google.maps.LatLng(<?php echo $lat ?>, <?php echo $lng; ?>),  
        map: map  
    }); 
    <?php
}
?>
</script>

nrabinowitz · Accepted Answer · 2011-05-11 05:10:55Z

0

Usually the approach here is to encode the PHP data as JSON and then echo it into a Javascript variable:

<script type="text/javascript">
var myData = <?php echo json_encode($map); ?>;
</script>

which will output a Javascript literal you can use in your client-side scripting.

answered May 11, 2011 at 5:10

nrabinowitz

55.7k10 gold badges152 silver badges169 bronze badges

Comments

atonyc · Accepted Answer · 2011-05-11 05:18:06Z

0

You'll want to loop this:

var marker;

<?php foreach($map as $row){ ?>
  marker = new google.maps.Marker({  
  position: new google.maps.LatLng(<?php echo $row['lat'].','.$row['long']; ?>),  
  map: map  
});
<?php } ?>

Just after the other code you included (which is to setup the map initially).

answered May 11, 2011 at 5:18

atonyc

2,3072 gold badges19 silver badges26 bronze badges

Comments

Sitansu · Accepted Answer · 2011-05-11 05:47:54Z

0

example to loop in JavaScript is as follows-

<script type="text/javascript">
"<?php echo $arr=array('1'=>'1','2'=>'2','3'=>'3','4'=>'4','5'=>'5'); 
foreach($arr as $k => $v){ ?>"
var x='<?php echo $v; ?>';
alert(x);
"<?php } ?>"
</script> 

Replace $arr with your array and apply google map code in the script.

edited May 11, 2011 at 5:47

answered May 11, 2011 at 5:28

Sitansu

8913 gold badges15 silver badges24 bronze badges

Comments

Ibu · Accepted Answer · 2011-05-11 05:23:15Z

-1

As @nrabinowitz said you can add the code in a ajax request

If your javascript is in the same page being loaded, you can add it in the same page.

<?php $c = 0;// counter ?>
<?php foreach ($map as $row):?>
var marker<?php echo $c?> = new google.maps.Marker({
     position: new google.maps.LatLng(<?php echo $row['lat'].','.$row['long']; ?>),     map: map   });
<?php $c++; ?>
<?php endforeach;?>

THis way you wont overwrite the variable

answered May 11, 2011 at 5:23

Ibu

44k14 gold badges82 silver badges109 bronze badges

Collectives™ on Stack Overflow

MySQL data in javascript using PHP's foreach loop (Googlel Maps API)

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related