<?
php
/* Database connection settings */
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'location_db';
$mysqli = new mysqli($host,$user,$pass,$db) or die($mysqli->error);
$coordinates = array();
$latitudes = array();
$longitudes = array();
// Select all the rows in the markers table
$query = "SELECT `locationLatitude`, `locationLongitude` FROM `location_tab`
";
$result = $mysqli->query($query) or die('data selection for google map
failed: ' . $mysqli->error);
while ($row = mysqli_fetch_array($result)) {
$latitudes[] = $row['locationLatitude'];
$longitudes[] = $row['locationLongitude'];
$coordinates[] = 'new google.maps.LatLng(' .
$row['locationLatitude'] .','. $row['locationLongitude'] .'),';
}
//remove the comaa ',' from last coordinate
$lastcount = count($coordinates)-1;
$coordinates[$lastcount] = trim($coordinates[$lastcount], ",");
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Map | View</title>
</head>
<body>
<nav>
<ul>
<li class="active"><a href="#"><img
src="img/map.png"></a></li>
<li><a href="#"><img src="img/logout.png"></a></li>
</ul>
</nav>
<div class="outer-scontainer">
<div class="row">
<form class="form-horizontal" action="" method="post"
name="frmCSVImport" id="frmCSVImport" enctype="multipart/form-data">
<div class="form-area">
<button type="submit" id="submit" name="import"
class="btn-submit">RELOAD DATA</button><br />
</div>
</form>
</div>
<div id="map" style="width: 100%; height: 80vh;"></div>
<script>
function initMap() {
var mapOptions = {
zoom: 18,
center: {<?php echo'lat:'. $latitudes[0] .', lng:'.
$longitudes[0] ;?>}, //{lat: --- , lng: ....}
mapTypeId: google.maps.MapTypeId.SATELITE
};
var map = new
google.maps.Map(document.getElementById('map'),mapOptions);
var RouteCoordinates = [
<?php
$i = 0;
while ($i < count($coordinates)) {
echo $coordinates[$i];
$i++;
}
?>
];
var RoutePath = new google.maps.Polyline({
path: RouteCoordinates,
geodesic: true,
strokeColor: '#1100FF',
strokeOpacity: 1.0,
strokeWeight: 10
});
mark = 'img/mark.png';
flag = 'img/flag.png';
startPoint = {<?php echo'lat:'. $latitudes[0] .', lng:'.
$longitudes[0] ;?>};
endPoint = {<?php echo'lat:'.$latitudes[$lastcount] .', lng:'.
$longitudes[$lastcount] ;?>};
var marker = new google.maps.Marker({
position: startPoint,
map: map,
icon: mark,
title:"Start point!",
animation: google.maps.Animation.BOUNCE
});
var marker = new google.maps.Marker({
position: endPoint,
map: map,
icon: flag,
title:"End point!",
animation: google.maps.Animation.DROP
});
RoutePath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!--remenber to put your google map key-->
<script async defer src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyC-dFHYjTqEVLndbN2gdvXsx09jfJHmNc8&callback=initMap"></script>
</body>
</html>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "";
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Create database --------------------------------------------------------
$sql = "CREATE DATABASE location_db";
if (mysqli_query($conn, $sql)) {
echo "Database created successfully<br>";
} else {
echo "Error creating database: " . mysqli_error($conn) . "<br>";
}
$dbname = 'location_db';
mysqli_select_db ( $conn , $dbname);
if (!$conn) {
die("select db connection failed: " . mysqli_connect_error());
}
//create location table
-------------------------------------------------------
$sql = "CREATE TABLE `location_tab` (
`locationLatitude` VARCHAR(50) NOT NULL,
`locationLongitude` VARCHAR(50) NOT NULL,
`ID` INT NOT NULL AUTO_INCREMENT,
PRIMARY KEY (`ID`))";
if(mysqli_query($conn, $sql)){
echo "Table location created successfully<br>";
} else {
echo "Error creating location table: " . mysqli_error($conn). "<br>";
}
mysqli_close($conn);
?>
body{
font-family: Arial;
margin: 5px 100px 10px 100px;
padding: 0;
color: white;
text-align: center;
background: #555; /*#555652;*/
}
nav{
margin: 0;
padding:0;
margin-bottom: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
}
li {
margin: 0;
padding:0;
float: left;
}
li a{
display: block;
color: white;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 40px;
padding-left: 40px;
border-right: 1px solid #555652;
text-decoration: none;
}
li a img{
width: 30px;
height: 30px;
}
li a:hover {
background-color: #555652;
}
.active{
background-color: #DD4F43;
}
.form-area{
float: right;
display: table-column;
margin-bottom: 10px;
color: white;
}
.btn-submit {
outline: 0;
background: #F4BA0F;
width: 120px;
border: 0;
padding: 8px;
color: white;
font-size: 12px;
cursor: pointer;
}
.btn-submit:hover, .form button:active{
background: #555652;
}
#userTable{
background: #222;
}
.outer-scontainer {
color: #E8E9EB;
background: #333;
border: #555652 1px solid;
padding: 10px;
}
.outer-scontainer table {
/*border-collapse: collapse;*/
width: 100%;
}
.outer-scontainer th {
border: 1px solid #555652;
padding: 5px;
text-align: center;
}
.outer-scontainer td {
border: 1px solid #555652;
padding: 5px;
text-align: center;
}
