Google maps met variabele(gps locatie) marker dmv ajax

Door Gertjan Wachtmeester op 05-11-2008 22:16

2.045 views

dmv onderstaand script heb ik het voor elkaar gekregen dat onze gps op de kaart wordt weergegeven. En ook de route die we hebben afgelegd.
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


<?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>

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?