DbConnect.php
<?php
class DbConnect {
private $host = 'localhost';
private $dbName = 'baza';
private $user = 'root';
private $pass = '';
public function connect() {
try {
$conn = new PDO('mysql:host=' . $this->host . '; dbname=' . $this->dbName, $this->user, $this->pass);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $conn;
} catch( PDOException $e) {
echo 'Database Error: ' . $e->getMessage();
}
}
}
?>
index.php
<html>
<head>
<title>Access Google Maps API in PHP</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/googlemap.js"></script>
<style type="text/css">
.container {
height: 450px;
}
#map {
width: 100%;
height: 100%;
border: 1px solid blue;
}
#data, #allData {
display: none;
}
</style>
</head>
<body>
<div class="container">
<center><h1>Access Google Maps API in PHP</h1></center>
<?php
require 'distribution.php';
$edu = new distribution;
$coll = $edu->getDistributorsBlankLatLng();
$coll = json_encode($coll, true);
echo '<div id="data">' . $coll . '</div>';
$allData = $edu->getAllDistributors();
$allData = json_encode($allData, true);
echo '<div id="allData">' . $allData . '</div>';
?>
<div id="map"></div>
</div>
</body>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=loadMap">
</script>
</html>
API KEY jest wstawiony celowo go nie użyłem tutaj.
distribution.php
<?php
class distribution {
private $id;
private $lang_id;
private $description;
private $address;
private $address_1;
private $address_2;
private $postcode;
private $city;
private $lat;
private $lng;
private $tableName ="distributors";
function setId($id) { $this->id = $id; }
function getId() { return $this->id; }
function setAddress($address) { $this->address = $address; }
function getAddress() { return $this->address; }
function setAddress_1($address_1) { $this->address_1 = $address_1; }
function getAddress_1() { return $this->address_1; }
function setAddress_2($address_2) { $this->address_2 = $address_2; }
function getAddress_2() { return $this->address_2; }
function setLat($lat) { $this->lat = $lat; }
function getLat() { return $this->lat; }
function setLng($lng) { $this->lng = $lng; }
function getLng() { return $this->lng; }
public function __construct() {
require_once('db/DbConnect.php');
$conn = new DbConnect;
$this->conn = $conn->connect();
}
public function getDistributorsBlankLatLng() {
$sql = "SELECT * FROM $this->tableName WHERE lat IS NULL AND lng IS NULL";
$stmt = $this->conn->prepare($sql);
$stmt->execute();
return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
public function getAllDistributors() {
$sql = "SELECT * FROM $this->tableName";
$stmt = $this->conn->prepare($sql);
$stmt->execute();
return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
public function updateDistributorsWithLatLng() {
$sql = "UPDATE $this->tableName SET lat = :lat, lng = :lng WHERE id = :id";
$stmt = $this->conn->prepare($sql);
$stmt->bindParam(':lat', $this->lat);
$stmt->bindParam(':lng', $this->lng);
$stmt->bindParam(':id', $this->id);
if($stmt->execute()) {
return true;
} else {
return false;
}
}
}
?>
action.php
<?php
require 'distribution.php';
$edu = new distribution;
$edu->setId($_REQUEST['id']);
$edu->setLat($_REQUEST['lat']);
$edu->setLng($_REQUEST['lng']);
$status = $edu->updateDistributorsWithLatLng();
if($status == true) {
echo "Updated...";
} else {
echo "Failed...";
}
?>
js/googlemaps.js
var map;
var geocoder;
function loadMap() {
var punkt = {lat: 52.226901, lng: 21.045382};//52.226901, 21.045382
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: punkt
});
var marker = new google.maps.Marker({
position: punkt,
map: map
});
var cdata = JSON.parse(document.getElementById('data').innerHTML);
geocoder = new google.maps.Geocoder();
codeAddress(cdata);
var allData = JSON.parse(document.getElementById('allData').innerHTML);
showAllDistributors(allData)
}
function showAllDistributors(allData) {
var infoWind = new google.maps.InfoWindow;
Array.prototype.forEach.call(allData, function(data){
var content = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = data.name;
content.appendChild(strong);
var img = document.createElement('img');
img.src = 'img/Leopard.jpg';
img.style.width = '100px';
content.appendChild(img);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map
});
marker.addListener('mouseover', function(){
infoWind.setContent(content);
infoWind.open(map, marker);
})
})
}
function codeAddress(cdata) {
Array.prototype.forEach.call(cdata, function(data){
var address = data.name + ' ' + data.address;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
var points = {};
points.id = data.id;
points.lat = map.getCenter().lat();
points.lng = map.getCenter().lng();
updateDistributorsWithLatLng(points);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
});
}
function updateDistributorsWithLatLng(points) {
$.ajax({
url:"action.php",
method:"post",
data: points,
success: function(res) {
console.log(res)
}
})
}
Efekt powinien być taki że po dodaniu nowej pozycji do bazy mam nowy marker na mapie a pokazują się błędy. Zapewne jakaś literówka, bo odtwarzam proces z nagrania i wyszedł mi na nagraniu, a na moim nie działa. :(:( Na mojej mapie tylko jeden marker .
W konsoli taki błąd: Uncaught (in promise) SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
Mapa powinna wyglądać tak jak na przykładzie
A wygląda tak:
Mam nadzieje że wy jesteście chociaż w stanie zobaczyć przypuszczam jakąs literówkę, Z góry dziękuję i pozdrawiam.