I want to map a field, city, from a MySQL database into Google Maps. I found a nice script to do it, but haven't been able to get it to work.

If I hard code an array into locations (var locations = ['Seattle', 'New York']), it works fine. Passing this SQL array into JS is giving me problems.

I've tried a number of different things, but I'm stuck. Right now I'm trying getElementById, but no dice. Any help is appreciated! Thanks.


$sql = "SELECT city FROM posts";
$result = mysql_query($query) or die ('Query Error: ' . mysql_error()); 
while ($results = mysql_fetch_array($result))
	$gender = $results[gender];


  <div id="map_canvas" style="width: 600px; height: 400px"></div> 

  <script type="text/javascript"> 

    var locations = document.getElementById("$gender");

    var mapOpt = { 
       mapTypeId: google.maps.MapTypeId.TERRAIN,
       center: new google.maps.LatLng(38.00, -100.00),
       zoom: 3

    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOpt);

    var geocoder = new google.maps.Geocoder();
    var index = 0;

    var geocoderFunction = function () { 
       geocoder.geocode({ 'address': locations[index] }, function (results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
             new google.maps.Marker({
                map: map, 
                position: results[0].geometry.location

          // Call the geocoder with a 100ms delay
          if (locations.length > index) {
             setTimeout(geocoderFunction, 100);

    // Launch the geocoding process