Passing SQL query into JS array

Question

kbomo 0 Newbie Poster

13 Years Ago

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 = ), 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.

<?php
$server_name="localhost";
$db_user="sql_user";
$db_pass="password";
$db="mydb";

$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
          index++;
          if (locations.length > index) {
             setTimeout(geocoderFunction, 100);
          }
       });
    }

    // Launch the geocoding process
    geocoderFunction();
  </script>

google-api javascript php

Edited 13 Years Ago by kbomo because: n/a

3 Contributors
4 Replies
7K Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Airshow

sunwebsite 11 Light Poster

13 Years Ago

write this

<?php
$server_name="localhost";
$db_user="sql_user";
$db_pass="password";
$db="mydb";

mysql_connect($server_name, $db_user, $db_pass);
mysql_select_db($db);

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

?>

instead of

<?php
$server_name="localhost";
$db_user="sql_user";
$db_pass="password";
$db="mydb";

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

?>

and also you cannot access a variable directly from php.

use Ajax or Use HTML Element attributes to access

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

kbomo 0 Newbie Poster · Answer 1 · 2010-12-25T01:27:02+00:00

Thanks...I fixed the while loop (I think) and am trying to grab $city from the PHP, but no go.

Any ideas what I have wrong here? Thanks!

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  <title>Google Maps</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head> 
<body>

<?php
$server_name="localhost";
$db_user="sql_user";
$db_pass="password";
$db="mydb";

mysql_connect($server_name, $db_user, $db_pass);
mysql_select_db($db);

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

?>

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

  <script type="text/javascript"> 

    var locations = document.getElementById("<?=$city?>");

    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
          index++;
          if (locations.length > index) {
             setTimeout(geocoderFunction, 100);
          }
       });
    }

    // Launch the geocoding process
    geocoderFunction();
  </script> 
</body>
</html>

kbomo 0 Newbie Poster · Answer 2 · 2010-12-25T14:04:12+00:00

Got it! I was able to do a $city_text = ""; and then a <?=$city_text?>; to get it to pass the array correctly. Thanks.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2010-12-26T04:32:30+00:00

You don't even need to use the intermediate php variable $city_text if you don't want to.

This should build the javascript statement in one line:

var locations = ['<?php echo implode("','", $city); ?>'];

Airshow