<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDFCC20hYUuTYKSxaE_y7B3cv55XF5rrXw&js?sensor=false&extn=.js"></script>


<div id="mapCanvas" style="min-height: 320px;"></div>
<script>
var beaches = [['dd',-6.135801,106.639000,1],['dddd',-6.131222,106.601900,2]];
var NewLocation = [['dd',-6.139801,106.638000,1],['dddd',-6.134222,106.641900,2]];


function initialize() {
    var latlng = new google.maps.LatLng(-6.1322135, 106.6431465);
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);

    var image = {
        url: "{{ url('/') }}/img/car.png",
        size: new google.maps.Size(20, 32),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(0, 32)
      };

      var shape = {
        coords: [1, 1, 1, 20, 18, 20, 18, 1],
        type: 'poly'
      };
      for (var i = 0; i < beaches.length; i++) {
        var beach = beaches[i];
        marker = new google.maps.Marker({
          position: {lat: beach[1], lng: beach[2]},
          map: map,
          //icon: image,
          shape: shape,
          title: beach[0],
          zIndex: beach[3]
        });
      }

    google.maps.event.addListener(map, 'click', function(event) {
        udateMarker();
    });
}

//Load google map
google.maps.event.addDomListener(window, 'load', initialize);

setInterval(function(){
    udateMarker();
}, 10000);


function udateMarker(){

    for (var i = 0; i < NewLocation.length; i++) {
        var numDeltas = 100;
        var delay = 10;
        /*var deltaLat;
        var deltaLng;

        deltaLat = (NewLocation[i][1] - beaches[i][1])/numDeltas;
        deltaLng = (NewLocation[i][2] - beaches[i][2])/numDeltas;
        alert(beaches[i][3]+"|"+beaches[i][1]+"|"+beaches[i][2]);
        beaches[i][1] += deltaLat;
        beaches[i][2] += deltaLng;*/

        var shape = {
        coords: [1, 1, 1, 20, 18, 20, 18, 1],
        type: 'poly'
      };
      for (var i = 0; i < beaches.length; i++) {
        var beach = beaches[i];
        marker = new google.maps.setPosition({
          position: {lat: beach[1], lng: beach[2]},
          map: map,
          //icon: image,
          shape: shape,
          title: beach[0],
          zIndex: beach[3]
        });
      }

        /*var latlng = new google.maps.LatLng(NewLocation[i][1], NewLocation[i][2]);
        marker.setTitle(beaches[i][0]);
        marker.setPosition(latlng);
        marker.setZIndex(beaches[i][3]);
        if(n!=numDeltas){
            n++;
            setTimeout(udateMarker, delay);
        }*/

    }
}


</script>