decongh 0 Newbie Poster

Hi, am trying to update google map markers without refreshing the map page. I used an ajax to refresh the php part of the code, hoping it will couse the markers to move,but no,lol.
From what i found out online i need some kind of respond command for it to work. i will be glad if any one can help me out, thanks...

Here is my map script

<html>
    <head>
    <script type='text/javascript' src='jquery-1.6.2.min.js'></script>
    <script type='text/javascript' src='jquery-ui-1.8.14.custom.min.js'></script>
    <style>

        BODY {font-family : Verdana,Arial,Helvetica,sans-serif; color: #000000; font-size : 13px ; }

        #map_canvas { width:100%; height: 100%; z-index: 0; }
    </style>

      <script type="text/javascript">

//         (function newjobs() {
//     var inputjob = $.ajax({
//                         url: "sample.php"
//                    });
//     inputjob.done(function(data) {  
//         alert('loading current locations !'); 
//         setTimeout(newjobs, 10000); // recursion
//     });

//     inputjob.fail(function() { 
//         alert('current not location loaded'); 
//     });
// })();

    setInterval(function(){
        $.get('ajax_gp.php', function(data){
            $('#div').html(data);
            //alert('loading current locations !'); 
        });
    },10000);
  </script>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" /></script>
    <script type='text/javascript'>

    jQuery(document).ready( function($){

        //Get data, and replace it on the form
        var geocoder;
        var map;
        var markersArray = [];
        var infos = [];

        geocoder = new google.maps.Geocoder();
        var myOptions = {
              zoom: 9,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var bounds = new google.maps.LatLngBounds();
        var encodedString;
        var stringArray = [];
        encodedString = document.getElementById("encodedString").value;
        stringArray = encodedString.split("****");

        var x;
        for (x = 0; x < stringArray.length; x = x + 1)
        {
            var addressDetails = [];
            var marker;
            addressDetails = stringArray[x].split("&&&");

            var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
            //alert(image + " " + addressDetails[1] );
            marker = new google.maps.Marker({ 
                map: map, 
                position: lat,
                content: addressDetails[0]
            });
            markersArray.push(marker);
            google.maps.event.addListener( marker, 'click', function () {
                closeInfos();
                var info = new google.maps.InfoWindow({content: this.content});
                // where I have added .html to the marker object.
                //infowindow.setContent( marker.html);
                info.open(map,this);
                infos[0]=info;
            });
            bounds.extend(lat);
        }

        map.fitBounds(bounds);


        function closeInfos(){
       if(infos.length > 0){
          infos[0].set("marker",null);
          infos[0].close();
          infos.length = 0;
       }
}

    });
    </script>


    </head>
    <body>
    <div id='input'>

        <?php
    //Now we do a simple query to the database
              function dec($dec)

                {
                    $dir=substr($dec, -1);

                    $deg=substr($dec, 0, 2);
                    $mins=substr($dec, 2);

                    $min = $mins / 60;

                    $map=$deg+$min;

                    if ($dir == "S" || $dir == "W") {
                        $map = "-".$map;
                    } // Don't do anything for N or E

                    return round($map, 7);
                }


  include_once("ajax_gp.php");
?>
<div id="div">
        <input type="hidden" id="encodedString" name="encodedString" value="<?php echo $encodedString; ?>" />
    </div> </div>
    <div id="map_canvas"></div>

    </body>
</html>

and am using this ajax to refresh

    setInterval(function(){
        $.get('ajax_gp.php', function(data){
            $('#div').html(data);
            //alert('loading current locations !'); 
        });
    },10000);

this server side code

    <?php

    $server = "localhost";
    $username = "root";
    $database = "";
    $password = "";
    $conn = mysql_connect($server,$username,$password);
    mysql_select_db($database) or die("Unable to select database");

        //Connect to the MySQL database that is holding your data, replace the x's with your data
        mysql_connect("localhost", "root", "") or
         die("Could not connect: " . mysql_error());
        mysql_select_db("msl");

        //Initialize your first couple variables
        $encodedString = ""; //This is the string that will hold all your location data
        $x = 0; //This is a trigger to keep the string tidy

        //Now we do a simple query to the database
        $result = mysql_query("SELECT * FROM live_data");

        //Multiple rows are returned
        while ($row = mysql_fetch_array($result, MYSQL_NUM))
        {
            //This is to keep an empty first or last line from forming, when the string is split
            if ( $x == 0 )
            {
                 $separator = "";
            }
            else
            {
                 //Each row in the database is separated in the string by four *'s
                 $separator = "****";
            }
            //Saving to the String, each variable is separated by three &'s
            $encodedString = $encodedString.$separator.
            "<p class='content'><b>Lat:</b> ".dec($row[2]).
            "<br><b>Long:</b> ".dec($row[3]).
            "<br><b>Name: </b>".$row[1].
            "<br><b>Address: </b>"."ddd".
            "<br><b>Division: </b>"."ddd".
            "</p>&&&".dec($row[2])."&&&".dec($row[3]);
            $x = $x + 1;
        }        
        ?>

thanks for helping...