Google maps met variabele(gps locatie) marker dmv ajax
Maar wat ik nu graag zou willen is dat via ajax de marker over de kaart heen verplaatst wanneer de gps positie veranderd (deze word elke 15 seconden aangepast).
Daarnaast wanneer dat gelukt is zou ik de kaart niet elke keer gecentreerd willen hebben op dezelfde plaats als de marker. Dit zou ik dan bijv. om de 5 miniten willen centreren op dezelfde locatie als de marker.
Ik heb eerlijk gezegd geen idee of dit mogelijk is en hoe het mogelijk is.
Dus wanneer iemand hier een leuke uitdaging in ziet. Zou ik dat graag tegemoed zien.
Mvg. Gertjan
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<?php
require_once("include/config.php");
require_once("include/functions.php");
dbconn();
$query5 = mysql_query("SELECT * FROM gps");
$aantal = mysql_num_rows($query5);
$min = $aantal-500;
$query = mysql_query("SELECT * FROM gps ORDER BY id ASC LIMIT ".$min.", 500");
$testquery = "SELECT * FROM gps ORDER BY id ASC LIMIT ".$min.", 50";
$polyline = '';
while($row=mysql_fetch_array($query)){
$polyline .= "new GLatLng(".$row[2].", ".$row[1]."),";
}
$query1 = mysql_query("SELECT * FROM gps ORDER BY id DESC LIMIT 1");
$res = mysql_fetch_array($query1);
$pos = $res[2].", ".$res[1];
$date = $res[5];
$time = $res[6];
$year = substr($date, 0, 4);
$month = substr($date, 4, 2);
$day = substr($date, 6, 2);
$hour = substr($time, 0, 2);
if($hour == 23){
$hour = 0;
}
else{
$hour = $hour+1;
}
$minute = substr($time, 2, 2);
// Decimal seconds truncated
$second = substr($time, 4, 2);
$datetime = $day."-".$month."-".$year." ".$hour.":".$minute.":".$second;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script
src="http://maps.google.com/maps?file=api&v=2&key=A...J8Lg39OHHUJ0-ug"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(<?=$pos;?>), 13);
map.addControl(new GLargeMapControl()); // Groot zoom/beweeg control
map.addControl(new GMapTypeControl()); // Control voor wisselen van kaarttype
marker=new GMarker(new GLatLng(<?=$pos;?>)); // De marker maken
map.addOverlay(marker); // De marker plaatsen
// Hier ga ik de ballon openen
var tooltipInfo = "<b>ms The Wave</b><br />Snelheid: <?=round($res[4], 2);?> km<br />Tijdstip: <?=$datetime;?><br /><a href=http://www.the-wave.eu title=The Wave>http://www.the-wave.eu</a>";
marker.openInfoWindowHtml(tooltipInfo);
var polyline = new GPolyline([
<?=$polyline;?>
new GLatLng(<?=$pos;?>)
], "#FF0000", 3); // Kleur en breedte in pixels
map.addOverlay(polyline); // Op de kaart plaatsen
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 530px"></div>
</body>
</html>
require_once("include/config.php");
require_once("include/functions.php");
dbconn();
$query5 = mysql_query("SELECT * FROM gps");
$aantal = mysql_num_rows($query5);
$min = $aantal-500;
$query = mysql_query("SELECT * FROM gps ORDER BY id ASC LIMIT ".$min.", 500");
$testquery = "SELECT * FROM gps ORDER BY id ASC LIMIT ".$min.", 50";
$polyline = '';
while($row=mysql_fetch_array($query)){
$polyline .= "new GLatLng(".$row[2].", ".$row[1]."),";
}
$query1 = mysql_query("SELECT * FROM gps ORDER BY id DESC LIMIT 1");
$res = mysql_fetch_array($query1);
$pos = $res[2].", ".$res[1];
$date = $res[5];
$time = $res[6];
$year = substr($date, 0, 4);
$month = substr($date, 4, 2);
$day = substr($date, 6, 2);
$hour = substr($time, 0, 2);
if($hour == 23){
$hour = 0;
}
else{
$hour = $hour+1;
}
$minute = substr($time, 2, 2);
// Decimal seconds truncated
$second = substr($time, 4, 2);
$datetime = $day."-".$month."-".$year." ".$hour.":".$minute.":".$second;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script
src="http://maps.google.com/maps?file=api&v=2&key=A...J8Lg39OHHUJ0-ug"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(<?=$pos;?>), 13);
map.addControl(new GLargeMapControl()); // Groot zoom/beweeg control
map.addControl(new GMapTypeControl()); // Control voor wisselen van kaarttype
marker=new GMarker(new GLatLng(<?=$pos;?>)); // De marker maken
map.addOverlay(marker); // De marker plaatsen
// Hier ga ik de ballon openen
var tooltipInfo = "<b>ms The Wave</b><br />Snelheid: <?=round($res[4], 2);?> km<br />Tijdstip: <?=$datetime;?><br /><a href=http://www.the-wave.eu title=The Wave>http://www.the-wave.eu</a>";
marker.openInfoWindowHtml(tooltipInfo);
var polyline = new GPolyline([
<?=$polyline;?>
new GLatLng(<?=$pos;?>)
], "#FF0000", 3); // Kleur en breedte in pixels
map.addOverlay(polyline); // Op de kaart plaatsen
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 530px"></div>
</body>
</html>
Wanneer er vragen zijn of aanvullende gegevens nodig zijn. dan hoor ik dat graag.
Voorbeeld hoe de uitvoer nu is op http://www.the-wave.eu/seegps.php
Ps. Hoe maak ik hier een net bericht van?
Gewijzigd op 01/01/1970 01:00:00 door Gertjan Wachtmeester
linkje draggable markers
Ik dacht dat ik via ajax een php script moest aanroepen.
en dan in dat script de positie uit de database halen.
En die weer terug sturen naar de marker functie.
Maar ik weet niet hoe ik dit precies in de praktijk moet doen.