1

When first the google map is loaded we load data using php codes in the backend and draw a line connecting between each lat long. There after we check if the lat long point have some mapDataMarkerCurrent.eventAlert then we draw another type of marker accordingly. Accordingly for each lat long we do this latlngbounds1.extend(secondPoint); and finally we perform this map.fitBounds(latlngbounds1); to ensure we get a full view with all the points in it. All works fine below are our codes.

function processtViewMapData(json) {
    mapDataJson = eval('(' + json + ')');
    var totalMapData = mapDataJson.MapData.length;

    var hash = [];
    var firstLoc = 0,
        foundFirstLoc = "N",
        foundLastLoc = "N",
        lastLoc = 0;
    var firstLat = "",
        firstLong = "";


    for (var i = 1; i < totalMapData; i++) {
        //alert("I : "+i);
        var startPoint = "";
        var endPoint = "";

        var mapDataPrevious = mapDataJson.MapData[i - 1];
        var mapDataCurrent = mapDataJson.MapData[i];

        if (mapDataPrevious.lat == 0 || mapDataPrevious.long == 0 || mapDataCurrent.lat == 0 || mapDataCurrent.long == 0) {

        } else {
            var polylineCoordinates = [
                new google.maps.LatLng(mapDataPrevious.lat, mapDataPrevious.long),
                new google.maps.LatLng(mapDataCurrent.lat, mapDataCurrent.long)
            ];
            var polyline = new google.maps.Polyline({
                path: polylineCoordinates,
                strokeColor: "#8B0000",
                strokeOpacity: 0.5,
                strokeWeight: 4
            });

            polyline.setMap(map);

            var firstPoint = new google.maps.LatLng(mapDataPrevious.lat, mapDataPrevious.long);
            var firstMarker = createMarkerPoint(firstPoint, mapDataPrevious.hd);
            latlngbounds1.extend(firstPoint);

            var secondPoint = new google.maps.LatLng(mapDataCurrent.lat, mapDataCurrent.long);
            var secondMarker = createMarkerPoint(secondPoint, mapDataCurrent.hd);
            latlngbounds1.extend(secondPoint);


            if (foundFirstLoc == "N")
                firstLoc = i;
            /

                            if(foundFirstLoc=="N")
                            {
                                  foundFirstLoc="Y"; 
                                  firstLoc = firstLoc-1;

                                  var point = new google.maps.LatLng(mapDataPrevious.lat,mapDataPrevious.long);
                                  latlngbounds1.extend(point); 
                                  firstLat = mapDataPrevious.lat;
                                  firstLong = mapDataPrevious.long;
                                var marker = createMarker(point,"","F","$80");


                            }
                            if(foundFirstLoc=="Y")
                            {
                                // alert("I : " + i + "  " + "Loc -1" + firstLoc);
            if (i != firstLoc) {
                lastLoc = i
                foundLastLoc = "Y";
            }
        }

    }
}

var lastData;
if (foundLastLoc == "Y") {
    lastData = mapDataJson.MapData[lastLoc];

    var lastPoint = new google.maps.LatLng(lastData.lat, lastData.long);
    latlngbounds1.extend(lastPoint);
    var marker = createMarker(lastPoint, "", "L", "$80");
}
map.fitBounds(latlngbounds1);

var alertLocCounter = 0;

for (var i = 0; i < totalMapData; i++) {

    var mapDataMarkerCurrent = mapDataJson.MapData[i];
    if (mapDataMarkerCurrent.eventAlert != "") {
        marker = createMarker(point, "", "U", "$80");
    }

}
}

After the full loading happened as above function user have the option to perform replay where we run through the points drawn previously using a truck icon. Below are the codes. In the doReplay function we have this codes again to simulate the zoom into the area where truck icon is now moving. At certain point when it zooms it the previous markers are all lost but the connecting line remain. Then when I manually zoom in or out the icons appear again. How to avoid this issue and have smooth replay. Another issue is that I notice the map is like keep refreshing. So how to animate it to show a smooth replay?

var markerP = "";
var setReplayID = "";
var indexReplay = 0;
var delayReplayTime = 500;
var replayStarted = 0;

function startReplay() {
    //alert("Start Replay");
    //alert("replay started : "+replayStarted);
    if (loadData == 1 && replayStarted == 0) {
        clearInterval(setReplayID);
        setReplayID = setInterval("doReplay()", delayReplayTime);
        document.getElementById("btnStart").className = "label label-evenr";
        replayStarted = 1;
    }


}

function doReplay() {

    if (indexReplay < mapDataJson.MapData.length) {

        var pointReplay = new google.maps.LatLng(mapDataJson.MapData[indexReplay].lat, mapDataJson.MapData[indexReplay].long);
        var richMarkerContent = document.createElement('div');
        var courseValue = mapDataJson.MapData[indexReplay].course;
        //alert("course is : "+courseValue+"  "+"idex is : "+indexReplay);
        //alert("point is : "+mapDataJson.MapData[indexReplay].lat+"  "+"long is : "+mapDataJson.MapData[indexReplay].long);
        //courseValue = 90; 
        // arrow image
        var arrowImage = new Image();
        arrowImage.src = 'alertIcon/truck1.jpg';
        arrowImage.width = 30;
        arrowImage.height = 80;

        //courseValue=0;
        // rotation in degree
        var directionDeg = courseValue;

        // create a container for the arrow
        var rotationElement = document.createElement('div');
        var rotationStyles = 'display:block;' +
            '-ms-transform:      rotate(%rotationdeg);' +
            '-o-transform:       rotate(%rotationdeg);' +
            '-moz-transform:     rotate(%rotationdeg);' +
            '-webkit-transform:  rotate(%rotationdeg);';

        // replace %rotation with the value of directionDeg
        rotationStyles = rotationStyles.split('%rotation').join(directionDeg);

        rotationElement.setAttribute('style', rotationStyles);


        // append image into the rotation container element
        rotationElement.appendChild(arrowImage);

        // append rotation container into the richMarker content element
        richMarkerContent.appendChild(rotationElement);

        // create a rich marker ("position" and "map" are google maps objects)

        if (indexReplay == 0) {
            var markerC = new RichMarker({
                position: pointReplay,

                draggable: false,
                flat: true,
                anchor: RichMarkerPosition.MIDDLE,
                content: richMarkerContent.innerHTML
            });

            //markerC.setMap(map);
            markerP = markerC;
            markerP.setMap(map);

        } else {
            markerP.setMap(null);
            var markerC = new RichMarker({
                position: pointReplay,

                draggable: false,
                flat: true,
                anchor: RichMarkerPosition.MIDDLE,
                content: richMarkerContent.innerHTML
            });

            //markerC.setMap(map);
            markerP = markerC;
            markerP.setMap(map);

        }

        indexReplay++;
        if (bounds.contains(pointReplay)) {
        } else {
            bounds.extend(pointReplay);
            map.fitBounds(bounds);
        }
    }

}
  • I have seen it they use map.panTo is that the solution to my problem ? Another thing I think they calculate the direction rite where as we keep to our original points so is there any mechanism to smoothen it further? – user3821084 Jul 16 '14 at 17:35
  • Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow... play with setTimeout("animate(50)",2000); // Allow time for the initial map display – Mapperz Jul 16 '14 at 17:43
  • I am not clear on this "Spawn a new polyline every 20 vertices". In my case the polyline are all loaded when the map is loaded in the very first functions. During the startPlay function it calls the doReplay to move the truck icon on all the preloaded polyline. I know I need some tweaks on my codes where is the tweak needed any idea? – user3821084 Jul 16 '14 at 17:56
  • you need to clone your line every 20 vertices to improve the refresh speed, your line will have too many vertices and slow the animation down. – Mapperz Jul 16 '14 at 18:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.