Passing php array to javascript - Stack Overflow

admin管理员组

文章数量:1410716

I have created a Google Map using JavaScript (v3 api). I have popped a couple of markers onto this, just to show it can be done. I have added some text to a text box specific to each marker, just to see if it can be done. Both marker and text box are ugly, but that's a problem for a different day. The map takes up around 75% of screen width and 100% screen height. I have a mySQL db of user posts. The data includes a post #id, a category, an ip address, a longitude value, a latitude value, a city, a user name, a heading and post content. I have 'floated' a table containing post category and heading up beside the map, using PHP to query the db, shoving the db rows into an array and using this as the source for the table. This takes up the remainder of the display width.

Fine, so far.

I want to add a marker for each post so that the marker is located at the longitude and latitude from which the post originated. I want to add content to a marker text box that is specific to that post (e.g. city, user name, post heading, post content). Further, I want to be able to link the posts in the displayed table to the map markers so that, for instance, a mouse-over event on a particular post in the table might cause the text box associated with that marker to bee visible.

But I cannot seem to find a way to pass the PHP array to the Google Map JavaScript so that I can use this to add the markers as required. Nor have I yet been able to find a way to associate a mouse over event on an object external to a Google map to a Google map marker.

I have done extensive research and have found similar requests for the former - passing a PHP array to JavaScript. The suggested solution is usually to create a string from the PHP array with some sort of separator, e.g. a ma, and pass this to JavaScript where it is reformed into an array. I do not believe this would work in my case.

My current code resides in a single file. The style stuff is located in a style section in the html head section and can be moved to a separate css file later. The Google map JavaScript are in script sections, again in the html head and can be moved to a separate js file. The body contains just a little html - divs for the map-canvas and the table with PHP to acquire the database rows in a single PHP array and to create the html for the table.

I am aware that 'PHP is server side technology while JavaScript is client side' as has been indicated many times. But surely there must be some way to pass an array of data obtained by PHP from a SQL db (not that the data origin is particularly relevant) to JavaScript code?

I apologise for being so verbose, and if my questions have been answered somewhere I have missed, or misunderstood. Or if I am being particularly stupid.

Take care.

Mike

Adding this by editing the original post.

OK. I might have found an answer to my second question: how to create a link from an external element to a Google map marker. .htm Always the way, after giving up looking for something that item is found.

Mike

I have created a Google Map using JavaScript (v3 api). I have popped a couple of markers onto this, just to show it can be done. I have added some text to a text box specific to each marker, just to see if it can be done. Both marker and text box are ugly, but that's a problem for a different day. The map takes up around 75% of screen width and 100% screen height. I have a mySQL db of user posts. The data includes a post #id, a category, an ip address, a longitude value, a latitude value, a city, a user name, a heading and post content. I have 'floated' a table containing post category and heading up beside the map, using PHP to query the db, shoving the db rows into an array and using this as the source for the table. This takes up the remainder of the display width.

Fine, so far.

I want to add a marker for each post so that the marker is located at the longitude and latitude from which the post originated. I want to add content to a marker text box that is specific to that post (e.g. city, user name, post heading, post content). Further, I want to be able to link the posts in the displayed table to the map markers so that, for instance, a mouse-over event on a particular post in the table might cause the text box associated with that marker to bee visible.

But I cannot seem to find a way to pass the PHP array to the Google Map JavaScript so that I can use this to add the markers as required. Nor have I yet been able to find a way to associate a mouse over event on an object external to a Google map to a Google map marker.

I have done extensive research and have found similar requests for the former - passing a PHP array to JavaScript. The suggested solution is usually to create a string from the PHP array with some sort of separator, e.g. a ma, and pass this to JavaScript where it is reformed into an array. I do not believe this would work in my case.

My current code resides in a single file. The style stuff is located in a style section in the html head section and can be moved to a separate css file later. The Google map JavaScript are in script sections, again in the html head and can be moved to a separate js file. The body contains just a little html - divs for the map-canvas and the table with PHP to acquire the database rows in a single PHP array and to create the html for the table.

I am aware that 'PHP is server side technology while JavaScript is client side' as has been indicated many times. But surely there must be some way to pass an array of data obtained by PHP from a SQL db (not that the data origin is particularly relevant) to JavaScript code?

I apologise for being so verbose, and if my questions have been answered somewhere I have missed, or misunderstood. Or if I am being particularly stupid.

Take care.

Mike

Adding this by editing the original post.

OK. I might have found an answer to my second question: how to create a link from an external element to a Google map marker. http://econym.uk/gmap/mouseover.htm Always the way, after giving up looking for something that item is found.

Mike

• php
• javascript
• google-maps

Share Improve this question Follow edited Aug 19, 2013 at 7:26 j0k 22.8k2828 gold badges8181 silver badges9090 bronze badges asked Apr 2, 2013 at 14:05 user2236181user2236181 2111 silver badge44 bronze badges 3

• 1 You can always do an ajax call from your JS to your PHP page, and have the PHP page return the data as JSON. Or have the PHP dump a JSON object into your script directly (gross). – Chad Commented Apr 2, 2013 at 14:08
• Json array would probably be the easiest. – Pitchinnate Commented Apr 2, 2013 at 14:08
• Surely, as you typed this question, the SO site must have suggested similar questions like this one? – Spudley Commented Apr 2, 2013 at 14:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Convert your PHP array to JSON, using json_encode.

Now you have a JavaScript object you can use.

$jsonString = json_encode($phpArray);

In javascript:-

var jsonStr  = <?=$jsonString?>;

本文标签： Passing php array to javascriptStack Overflow