Google Maps API Javascript pull data into variable from MySQL table - mysql

Question

Im working on a script that will pull a variable from my MySQL db table, heres the example coding google gives me.
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
];
and now here is what im trying to achieve,
i have a table with the fields, ID , Beach , Long, Lat
how would i replace the beach variable to pull from my MySQL table instead of having to go in and manually add the beach to the variable. That way when users add a Beach Name with longitude and latitude to the DB through my form it automatically adds a marker on my google maps.
I am achieving the ComplexIcon Overlays with Google Maps API v3
https://developers.google.com/maps/documentation/javascript/overlays#ComplexIcons
Im guessing im going to be using some AJAX ? I have never used AJAX before so if this is the case i guess i better pull up my AJAX tuts :)

Answer 1

Javascript in a user's browser can't get at your database directly (which is good!) but it can ask your server for data, and AJAX may well be the way to go if you want dynamic updates. Google has an article: https://developers.google.com/maps/articles/phpsqlajax_v3
However it seems more likely that you will simply need to get the marker data when you send the page to the browser, and you can do that by constructing the page in PHP or another server-side language, using similar techniques to get data out of the database and use the values directly in the page code.
You may need to do both, to create the initial page the user gets and update it via AJAX so just the data changes and you don't have to refresh the whole page.
[Note: you don't have to use XML to transfer data asynchronously, you could use JSON to format it or any other format you can code for. But XML is easy and there are plenty of examples.]

Answer 2

Yes, you have to do it with ajax.
For example, I'll use jQuery
$.ajax({
url: formSubmitUrl,
data: 'id=1&lat=23.444...',
type: 'GET',
success: function (data)
{
// data = response from the script
// if every thing is ok, I return the string 'OK'
if(data == 'OK')
{
var pMarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
icon: yourMarkerimage
});
}
}
});
And that's all from the client side.
Submit the form via AJAX and then add the marker to the map