Passing php json to javascript object for google map API

Question

I made a database of coordinates and other hurricane information.

<?php
    include '/database_connector.php'; //include database connection information
 $new = array();
 $result=mysqli_query($con, "select * from Spots15 where `Name` = 'Ana' or 'One'");
 while($row=mysqli_fetch_array($result)){
  $lat      = $row['LAT'];
  $long     = $row['LONG'];
  $latlong = $lat.", ". $long;
  array_push($new, $latlong);
}    
  echo json_encode($new);
?>

This is the correct output. This is the output that the api wants

["31.5, -77.6","31.5, -77.7","31.5, -77.5","31.6, -77.8","31.5, -77.5","31.5, -77.3","31.6, -77.3","31.7, -77.4","31.9, -77.3","32.1, -77.4","32.2, -77.5","32.4, -77.6","32.6, -77.8","32.7, -77.9","32.7, -78.1","32.9, -78.3","32.9, -78.3","33.1, -78.2","33.2, -78.3","33.6, -78.5","33.8, -78.7","34.0, -78.9","34.1, -78.9","34.1, -78.9","34.4, -78.6"]

I would like to pass these to the google map api can plot the coordinated on the map.

var four=new google.maps.LatLng(28.2,-96.0);

Yes that is how i know it is the correct way the coordinates need to go. I have the api up on my site. i have hardcoded Tropical Storm Bill into the front page. hurricanetracking.us — swimmerbhs
– swimmerbhs, Commented Jun 16, 2015 at 14:34
can you please clarify..what your question is and what is the problem you are facing? — NIRANJAN S.
– NIRANJAN S., Commented Jun 16, 2015 at 14:37
The array $new should be outputted to javascript with the following format "var four=new google.maps.LatLng(28.2,-96.0);" I would like to make each variable a number but that might not be posslble — swimmerbhs
– swimmerbhs, Commented Jun 16, 2015 at 14:41

ElLelero · Accepted Answer · 2015-06-16 16:01:42Z

1

You can do the data retrieve before the html tag (or also in another PHP page, using the include function), then you can pass the PHP array to JavaScript using this row:

var arr = <?php echo json_encode($new) ?>;

At this point, inside a for loop, you can get latitude and logitude in this way:

var lat = Number(arr[i].split(",")[0].trim());
var lng = Number(arr[i].split(",")[1].trim());

After this, you can use your variables for plotting all of your points.

var four = new google.maps.LatLng(lat, lng);

I hope I understood correctly your problem.

Here there is a little preview of the code.

var arr = <?php echo json_encode($new) ?>;
for(var i=0; i<arr.length;i++)
{
    var lat = Number(arr[i].split(",")[0].trim());
    var lat = Number(arr[i].split(",")[0].trim());
    var four = new google.maps.LatLng(lat,lng);
    var marker=new google.maps.Marker({
                position:four,
                map:map
            });
}

edited Jun 16, 2015 at 16:01

answered Jun 16, 2015 at 15:01

ElLelero

801 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

swimmerbhs Over a year ago

Few questions. Do i have to have the json line in both the php code and the javascript code or can I just have it in the javascript section? Second, i can have the same variable for multiple points on a map?

ElLelero Over a year ago

You don't need the json_encode line twice in the code. Use it only in the JavaScript function. About the other question, I didn't understood well. Could you explain what did you mean?

swimmerbhs Over a year ago

in your code it looks like everytime it loops it puts a different coordinate in the variable four.

ElLelero Over a year ago

Yes, it is. In this way you will plot the entire array. What's the problem?

swimmerbhs Over a year ago

I have been using w3schools tutorials

|

Collectives™ on Stack Overflow

Passing php json to javascript object for google map API

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related