CODEWITHSUNDEEP
phpjavascriptmysqlgoogle-maps
Nyxynyxx
Nyxynyxx

Reputation: 1183

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

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?

Upvotes: 1

Views: 3921

Answers (5)

Sitansu
Sitansu

Reputation: 891

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.

Upvotes: 0

Nicole
Nicole

Reputation: 33197

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:

  1. Somewhere, you need to create the map: var map = new google.maps.Map... (as shown in the tutorial)
  2. Next, get the $map array with array items containing the 'lng' and 'lat' keys. (Note: you should always wrap array key names with quotes)
  3. 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>

Upvotes: 2

Ibu
Ibu

Reputation: 43810

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

Upvotes: -1

atonyc
atonyc

Reputation: 2307

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).

Upvotes: 0

nrabinowitz
nrabinowitz

Reputation: 55688

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.

Upvotes: 0

Related Questions