I have data in mysql database and I want to be able to read that data in php array and use it for google geolocation.
So for this example I want to use only SELECT * statement, as I will not be bothering you with some parameters...
What I want to achieve is to get marked line from point A to point B ( depending where GPS location was saved )
This is the link what I want to have on my map: POLYLINE in this example there are only 4 data in the array I want to have it more.
So now we can get back to the code. This is my PHP script for connecting to mysql. I have been using mysqli as I will have stored procedures later one in the database, so don't get confused.
class dbMySql
{
static function Exec($query) {
// open database
$conn = mysqli_connect(
$GLOBALS['cfg_db_Server'],
$GLOBALS['cfg_db_User'],
$GLOBALS['cfg_db_Pass']
);
if($conn === false)
{
throw new Exception(mysqli_connect_error());
}
mysqli_select_db($conn,$GLOBALS['cfg_db_Name']);
$result = mysqli_query($conn,$query);
if(is_bool($result) && !$result)
{
$error = mysqli_error($conn);
mysqli_close($conn);
throw new Exception($error);
}
mysqli_close($conn);
return $result;
}
}
How to connect this php script to code that is example on google API page, and insert my array values when button is clicked instead of the fixed ones:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=KEY&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:80%"></div>
<div><button type="button">Click Me!</button></div>
</body>
</html>
EDIT:
this is what I get when I do your code:
EDIT2:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=key&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0, 180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [ <?php echo implode(',', $coordinates) ?> ];
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</script>
<?PHP
class dbMySql {
static function Exec($query) {
// open database
$conn = mysqli_connect('localhost','root','*****');
if($conn === false) {
throw new Exception(mysqli_connect_error());
}
mysqli_select_db($conn,'data_gps');
$result = mysqli_query($conn,$query);
if(is_bool($result) && !$result) {
$error = mysqli_error($conn);
mysqli_close($conn);
throw new Exception($error);
}
mysqli_close($conn);
return $result;
}
}
$coordinates = array();
$result = dbMySql::Exec('SELECT lat,lng FROM data');
while ($row = mysqli_fetch_assoc($result))
$coordinates[] = 'new google.maps.LatLng(' . $row['lat'] . ', ' . $row['lng'] . ')' ;
?>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:80%"></div>
<div><button type="button">Click Me!</button></div>
</body>
</html>
