Question

I am using Google Maps API v3. My script works fine and shows a car icon as long as
the marker is undefined. But when I update long lat in the database and the ajax function returns a new long lat via json, marker.setPosition(newLatLng) makes the marker disappear…

Please, help me out, what is the problem? Here is my code:

 $(document).ready(function () {
    var map;
    var marker;
    function initialize() {
        var myLatlng = new google.maps.LatLng(<?php echo $c_lat; ?>, <?php echo $c_long; ?>);
        var myOptions = {
            zoom: 19,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById('driver_loc'), myOptions);
    }
function getLongLat(){
     $.ajax({
           type: "POST",
           url: "config/getLongLat.php?id=<?php echo $driverId; ?>",
           dataType: "json",
           success: function(data)
                {   
            var lat=data.lat; //returns new lat via db
            var lon=data.lon;
                // alert(lat);   
           var newLatLng = new google.maps.LatLng(lat, lon);

            if (marker != undefined)
                marker.setPosition(newLatLng);
            else
                marker = new google.maps.Marker({
                    position: newLatLng,
                    map: map,   
                    icon: 'images/car.png',
                    animation: google.maps.Animation.DROP, 
                    draggable: true
                });
            }
        });
        console.log(marker);
    }
    // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);
  //  google.maps.event.addDomListener(window, 'load', callPosition);
    window.setInterval(function(){
  getLongLat();
}, 6326);
});

Answer 1

A good practice is to use parseFloat method for json data. A new position can be outside of current view port. To handle it, just use map.setCenter([new_position]) method. You can also change zoom level with map.setZoom([zoom_level]).
In your case:

  $(document).ready(function () {
    var map;
    var marker;
    function initialize() {
      var myLatlng = new google.maps.LatLng(<?php echo $c_lat; ?>, <?php echo $c_long; ?>);
      var myOptions = {
        zoom: 19,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById('driver_loc'), myOptions);
    }
    function getLongLat(){
      $.ajax({ type: "POST", url: "config/getLongLat.php?id=<?php echo $driverId; ?>", dataType: "json",
               success: function(data){   
                 var lat=parseFloat(data.lat); //returns new lat via db
                 var lon=parseFloat(data.lon);
                 var newLatLng = new google.maps.LatLng(lat, lon);

                 if (marker != undefined){
                   marker.setPosition(newLatLng);
                 } else {
                   marker = new google.maps.Marker({
                     position: newLatLng,
                     map: map,   
                     icon: 'images/car.png',
                     animation: google.maps.Animation.DROP, 
                     draggable: true
                   });
                 }
                 //Center map on a new position
                 map.setCenter(newLatLng);
                 //Change zoom level
                 //map.setZoom(19);
               }
      });
    }
    // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);
    //  google.maps.event.addDomListener(window, 'load', callPosition);
    window.setInterval(function(){
      getLongLat();
    }, 6326);
  });