Google Maps API - Marker, MySQL - php

Question

I have read about Google's Geocoding Service which allows named locations (such as Manchester) to be mapped to coordinates from Google's DB so that markers can be placed on the Google Map: https://developers.google.com/maps/documentation/javascript/geocoding#Geocoding
In my circumstance I have a MySQL DB with a table jobs defined. In this table I store (unsurprisingly) job information, e.g. salary, job title, reference, etc. In this table is a column for the job location too. Most of the time it contains the city (or city plus postcode). The odd few times it is either NULL or has a string such as "No location specified".
To view these records I have a webserver running on my test machine and I display the records of the table in my browser with some HTML and general php script (a DB driven intranet page).
I have now split this page up into two sections. Using the Google Maps v3 API I have the bottom half containing the Google Map. What I am trying to achieve is:
automatic placing of markers based on the location strings in the
location column.
click-able markers where on-click they produce the
info window (which will contain job Title, etc).
What I want to know is what is the best way to do this?
I have read some similar posts here on SO where users have had a similar situation. From these readings I can ascertain that some OP's have made the effort to store the long/lat of the location of their record at the time it was inserted into the table and THEN read the long/lat with Javascript to produce the markers.
To do this I would need to modify some code and the table. This is one option, but I'd rather explore the other which is perhaps using Google's Geocoding service? Has anybody any experience with this? Any advice, recommendation you can give?
Also, lets say I used the latter option. I use PHP script to load the records from the DB. How would I pass the locations to Javascript so that the Google Map API can interrogate for long/lat with the Geocoding service? Is this a less optimal way of achieving it?
Thanks.

Answer 1

Just use Gmap3 Library, and you provide it an address...like so....
http://gmap3.net/en/catalog/18-data-types/address-63
You setup a div...
<div id="test" width=500 height=500></div>
Then your Jquery inserts the map into the div....
$("#test").gmap3({
marker:{
address: "Haltern am See, Weseler Str. 151"
},
map:{
options:{
zoom: 14
}
}
});
The address can be echoed from your PHP (this is considered bad practice though)
$("#test").gmap3({
marker:{
address: '<?php echo $addressfromDB;?>'
},
map:{
options:{
zoom: 14
}
}
});
But its better to do an ajax call, and then include this code in the success callback
$.getJSON('getlocation.php', function(data){
$("#test").gmap3({
marker:{
address: data.address // or whatever structure your json is in.
},
map:{
options:{
zoom: 14
}
}
});
});
That should get you started :)

Answer 2

It sounds like you have everything in place except for the Javascript and the way to get your data from the PHP script.
So lets start with getting the data from the PHP script in to the Javascript. The way to do this is using AJAX (for learning it, not an official source: http://www.w3schools.com/ajax/ajax_intro.asp). Once the web page has been loaded, Javascript can load more information by using an XMLHttpRequest object (or jQuery.ajax() if you prefer to use a Javascript framework). Basically this is Javascript loading a new page in the background and then doing stuff with the contents on it's own. You'll need to set up the PHP script (or make another one - I'm not familiar with this part) to provide the information that you want at a separate URI than the page you're visiting. Then you use this URI in the Javascript XMLHttpRequest. Typically you would get the PHP script to provide data in a form that's easy for computers to understand such as JSON (recomended) or XML (as apposed to HTML which is easy for human's to understand - once rendered). This procedure is called an API. In your JavaScript, you'll use JSON.parse() to turn the response text into actual variables that you can do stuff with.
Once you've got the addresses in Javascript, use the geocoding API you mentioned to turn them into GPS coordinates, and then the Google Maps Javascript API to place markers on the map: https://developers.google.com/maps/documentation/javascript/overlays#Markers. You can add an info window as well (search for InfoWindo in the above page - apparently I can only include 2 links).
As you've mentioned, it's probably a better idea to geocode all of the addresses and keep the lat/lon stored in the database. The biggest reason for this that if you geocode in Javascript as described above, then every time the user loads the page, geocoding will be re-done. This has two issues: 1. For Google, this is an expensive operation that costs them resources. 2. For you, this means it takes longer for the map to populate (because you have to wait on Google's response to your AJAX call - the geocoding one, not the one you'll be implementing as described above) and you might run into Google's usage limits which are in place because of 1. If you decide to geocode ahead of time and store the results in your database, you should be using "The Google Geocoding API", not the Javascript Geocoding Service. I can't add another link to it, but just Google "The Google Geocoding API".
I hope that helps, and if someone else wants to update my answer with more links, feel free.