Scribd
Upload
165 views5 pages

Google Map Codes

The document connects to a MySQL database and retrieves latitude and longitude coordinates stored in a table. It displays these coordinates on a Google Map using the Google Maps JavaScript API. Stylesheets are included to style the navigation bar, buttons and map container. PHP code is also included to create the database and location table if they do not already exist.

Uploaded by

khamis abdalla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
165 views5 pages

Google Map Codes

The document connects to a MySQL database and retrieves latitude and longitude coordinates stored in a table. It displays these coordinates on a Google Map using the Google Maps JavaScript API. Stylesheets are included to style the navigation bar, buttons and map container. PHP code is also included to create the database and location table if they do not already exist.

Uploaded by

khamis abdalla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<?

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;
}

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy