How to draw a line incrementally (part by part) between two points on the map?

1,951 views
Skip to first unread message

Shiva

unread,
Oct 1, 2011, 12:39:55 AM10/1/11
to google-map...@googlegroups.com
Hello Everybody,

   I am fairly new to Google Maps API. I wanted to know how can I draw a line between two points (with known [lat,long]s) on the map in an incremental manner that gives the effect of the line being drawn instead of displaying it directly as in the following example http://code.google.com/apis/maps/documentation/javascript/examples/polyline-simple.html?

Regards,
Shiva

Walter Bueno

unread,
Oct 1, 2011, 9:40:20 AM10/1/11
to Google Maps JavaScript API v3
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);

You can do this ... reference taken from the show

function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);

var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);
}

regards,
Walter
> displaying it directly as in the following examplehttp://code.google.com/apis/maps/documentation/javascript/examples/po...
> ?
>
> Regards,
> Shiva

Chris Broadfoot

unread,
Oct 2, 2011, 2:58:23 AM10/2/11
to google-map...@googlegroups.com
Hi Shiva,

You'll want to animate using setTimeout setInterval:

... you can calculate a point between two LatLngs using the google.maps.geometry.spherical.interpolate function:
http://code.google.com/apis/maps/documentation/javascript/reference.html#spherical

Then you can draw a PolyLine using the start LatLng, and the interploated LatLng. Make sure you set geodesic: true in the options:

Hope this gets you on your way!

Chris

--


--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/QJDnI8ld8dwJ.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Shiva

unread,
Oct 3, 2011, 12:32:16 AM10/3/11
to google-map...@googlegroups.com
Hello Chris,

    Thanks for replying.

I tried your suggestion but it does not work as expected. I have used the Haversine formula for computing  the nearest POI. The line is not drawn animatedly. In IE 8.0 the window.setTimeout() does not work. Following is the code . . .

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          var map=null;
         
          function initialize() {
            var myLatLng = new google.maps.LatLng(12.954207794100693,77.54798412322998);
            var myOptions = {
              zoom: 15,
              center: myLatLng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
           
            for(var j=0;j<poiCoords.length;j++){
                var myLatLon = new google.maps.LatLng(parseFloat((poiCoords[j].split(","))[0]),parseFloat((poiCoords[j].split(","))[1]));
                var marker = new google.maps.Marker({
                    position: myLatLon,
                    map: map,
                    title:"["+parseFloat((poiCoords[j].split(","))[0])+","+parseFloat((poiCoords[j].split(","))[1])+"]"
                });
            }
          }
         
          function drawMyRoute(routeSegmentCoords){
            var newRouteSegment = new google.maps.Polyline({
              path: routeSegmentCoords,

              strokeColor: "#FF0000",
              strokeOpacity: 1.0,
              strokeWeight: 2,
              geodesic:true
            });
            newRouteSegment.setMap(map);
          }
         
          var poiCoords=new Array("12.951907511385514,77.53867149353027",
                                    "12.951447452293646,77.5398302078247",
                                    "12.953915032025723,77.54021644592285",
                                    "12.952576686729824,77.54034519195557",
                                    "12.952953097071068,77.5420618057251",
                                    "12.951907511385514,77.5426197052002",
                                    "12.955378838959463,77.54446506500244",
                                    "12.959101052121458,77.54287719726562",
                                    "12.95621529620183,77.54781246185303",
                                    "12.955378838959463,77.54948616027832",
                                    "12.954165970968194,77.54940032958984",
                                    "12.953789562459688,77.54742622375488",
                                    "12.955504307724915,77.55549430847168",
                                    "12.953580446375867,77.55218982696533",
                                    "12.952953097071068,77.5499153137207",
                                    "12.957177218557467,77.5486707687378",
                                    "12.960439362355531,77.5490140914917");
         
          function drawFullRoute()
          {   
            var routeCoords=new Array("12.950809641692786, 77.53814578056335-12.950935112759675, 77.53843545913696",
                                    "12.950935112759675, 77.53843545913696-12.951112863329588,77.53885388374329",
                                    "12.951112863329588,77.53885388374329-12.9512906137727,77.53918647766113",
                                    "12.9512906137727,77.53918647766113-12.951625202498025,77.53965854644775",
                                    "12.951625202498025,77.53965854644775-12.951802952575601,77.5399374961853",
                                    "12.951802952575601,77.5399374961853-12.952064349518102,77.54034519195557",
                                    "12.952064349518102,77.54034519195557-12.952294378600643,77.54074215888977",                                   
                                    "12.952294378600643,77.54074215888977-12.952524407470772,77.54103183746338",
                                    "12.952524407470772,77.54103183746338-12.952712612751995,77.54128932952881",
                                    "12.952712612751995,77.54128932952881-12.952932185400359,77.54153609275818",                                   
                                    "12.952932185400359,77.54153609275818-12.953224948630455,77.54173994064331",
                                    "12.953224948630455,77.54173994064331-12.953486344080867,77.54202961921692",
                                    "12.953486344080867,77.54202961921692-12.953695460243692,77.5425660610199",
                                    "12.953695460243692,77.5425660610199-12.953852297250618,77.54311323165894",
                                    "12.953852297250618,77.54311323165894-12.954082324682133,77.5435209274292",
                                    "12.954082324682133,77.5435209274292-12.954260073006434,77.54383206367493",
                                    "12.954260073006434,77.54383206367493-12.95458420197716,77.54419684410095",                                   
                                    "12.95458420197716,77.54419684410095-12.954897874773037,77.54454016685486",
                                    "12.954897874773037,77.54454016685486-12.955222002913764,77.54488348960876",
                                    "12.955222002913764,77.54488348960876-12.955462484810122,77.54518389701843",
                                    "12.955462484810122,77.54518389701843-12.955723877912343,77.54558086395264",
                                    "12.955723877912343,77.54558086395264-12.95590162506517,77.54594564437866",
                                    "12.95590162506517,77.54594564437866-12.956163017706492,77.54641771316528",
                                    "12.956163017706492,77.54641771316528-12.95636167593042,77.54684686660767",
                                    "12.95636167593042,77.54684686660767-12.956508055572971,77.54749059677124",
                                    "12.956508055572971,77.54749059677124-12.95664397944972,77.54809141159058",
                                    "12.95664397944972,77.54809141159058-12.956685802166097,77.5484025478363",                                   
                                    "12.956685802166097,77.5484025478363-12.956330308852966,77.54859566688538",                                   
                                    "12.956330308852966,77.54859566688538-12.955943447906215,77.54882097244263",
                                    "12.955943447906215,77.54882097244263-12.955587953533424,77.5490140914917",
                                    "12.955587953533424,77.5490140914917-12.955190635692778,77.54923939704895",
                                    "12.955190635692778,77.54923939704895-12.954887419019537,77.54944324493408",
                                    "12.954887419019537,77.54944324493408-12.95458420197716,77.54963636398315",
                                    "12.95458420197716,77.54963636398315-12.954197338318224,77.54993677139282",
                                    "12.954197338318224,77.54993677139282-12.953810474058429,77.55025863647461",
                                    "12.953810474058429,77.55025863647461-12.95308902288784,77.5508165359497",
                                    "12.95308902288784,77.5508165359497-12.952608054279985,77.55119204521179",
                                    "12.952608054279985,77.55119204521179-12.95208526126166,77.55152463912964",
                                    "12.95208526126166,77.55152463912964-12.951593834824115,77.5519859790802",
                                    "12.951593834824115,77.5519859790802-12.950987392352225,77.55245804786682",
                                    "12.950987392352225,77.55245804786682-12.95056915530466,77.55281209945679");

            for(var i=0;i<routeCoords.length;i++){
                var strSegCoords=new Array();
                var strSegCoords=routeCoords[i].split("-");
                var routeSegment=[new google.maps.LatLng(parseFloat((strSegCoords[0].split(","))[0]),parseFloat((strSegCoords[0].split(","))[1])),
                                  new google.maps.LatLng(parseFloat((strSegCoords[1].split(","))[0]),parseFloat((strSegCoords[1].split(","))[1]))];
                //drawMyRoute(routeSegment);
                window.setTimeout(drawMyRoute,5000,routeSegment);
                for(var j=0;j<poiCoords.length;j++){
                    var dblDistance=haversine(parseFloat((strSegCoords[1].split(","))[0]),parseFloat((strSegCoords[1].split(","))[1]), parseFloat((poiCoords[j].split(","))[0]),parseFloat((poiCoords[j].split(","))[1]));
                    //alert(dblDistance);
                    if(dblDistance<=90.00){//Highlight all POIs within 90m from the road                       
                        popupNearestPOI(parseFloat((poiCoords[j].split(","))[0]),parseFloat((poiCoords[j].split(","))[1]));
                    }
                }
            }
          }
         
            // Converts a  number in decimal degrees to radians
            function toRad(num) { return num * Math.PI / 180; }
           
            // Rounds a number to 2 decimal places
            function to2dec(num) { return Math.round(num*100)/100; }
           
            function haversine(lat1, lng1, lat2, lng2) {
                // calculate the Great-circle distance
                var radius  = 6367.45; // is the earth's mean radius in km
                var dLat = toRad(lat2-lat1);
                var dLon = toRad(lng2-lng1);
                lat1 = toRad(lat1)
                lat2 = toRad(lat2);
                var arc = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon/2) * Math.sin(dLon/2);
                var c = 2 * Math.atan2(Math.sqrt(arc), Math.sqrt(1-arc));
                var distance = radius * c;
               
                return to2dec(distance*1000);
            }
           
            function popupNearestPOI(lat,longi){
                var image = 'images/beachflag.png';
                //var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
                var myLatLng = new google.maps.LatLng(lat,longi);
                var beachMarker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: image
                });
            }
        </script>
    </head>
    <body onload="initialize();">
      <div id="map_canvas" style="width:700px;height:500px;"></div>
      <br/>
      <input type="button" id="btnStart" name="btnStart" value="Start" onclick="drawFullRoute();"/>
    </body>
</html>

Regards,
Shiva

Rossko

unread,
Oct 3, 2011, 4:26:37 AM10/3/11
to Google Maps JavaScript API v3
>                 window.setTimeout(drawMyRoute,5000,routeSegment);

setTimeout has only two arguments.
Your drawMyRoute() function expects to be passed an array of points.

Shiva

unread,
Oct 3, 2011, 7:11:11 AM10/3/11
to google-map...@googlegroups.com
Hi Rossko,

Kindly have a look at https://developer.mozilla.org/en/window.setTimeout the first version of the syntax takes 3rd argument which are the parameters for the to be called function.

Regards,
Shiva

Pil

unread,
Oct 3, 2011, 7:17:52 AM10/3/11
to Google Maps JavaScript API v3


On Oct 3, 1:11 pm, Shiva <shivask...@gmail.com> wrote:
> the
> first version of the syntax takes 3rd argument which are the parameters for
> the to be called function.

Yes, that's right. But you shoould be aware that certain browsers
won't support this parameters. Of course I'm thinking of IE.

Shiva

unread,
Oct 3, 2011, 7:20:48 AM10/3/11
to google-map...@googlegroups.com
Yes Correct.
So is there a way to draw a line between 2 known lat-longs animatedly using Google Maps API v3?

Pil

unread,
Oct 3, 2011, 7:35:16 AM10/3/11
to Google Maps JavaScript API v3
There are two cross-browser compatible alternatives I know of:

setTimeout(function() { do_something() }, time);

setTimeout("do_something(" + para + ");", 1000);

Rossko

unread,
Oct 3, 2011, 10:54:11 AM10/3/11
to Google Maps JavaScript API v3
> Kindly have a look athttps://developer.mozilla.org/en/window.setTimeoutthe
> first version of the syntax takes 3rd argument which are the parameters for
> the to be called function.

You're right. I'm so used to cross-browser javascript that I've never
seen it.
Discussion on cross-browser method
http://www.makemineatriple.com/2007/10/passing-parameters-to-a-function-called-with-settimeout
which comes with a bonus in that it will capture your non-global scope
parameter for later, when the function runs.

You need to re-think your logic, I think you have a loop that cycles
through your line segments setting up setTimeouts for 5 seconds in the
future. setTimout does not pause the flow of execution, so the loop
carries on with the next segment.
After the loop has finished processing all segments, and 5 seconds
have passed, all the setTimeouts trigger at almost the same time. You
won't get an animation effect.

You need to trigger the next setTimeout after the previous one has
actioned, or use setInterval

Pil

unread,
Oct 3, 2011, 11:54:39 AM10/3/11
to Google Maps JavaScript API v3
Maybe this helps

http://www.wolfpil.de/v3/animated-poly_v3.html

Shiva

unread,
Oct 4, 2011, 2:54:05 AM10/4/11
to google-map...@googlegroups.com
Hello Pil, Rossko and Everybody Else,

 Thanks for replying. The above link did fine tune my above posted code. The setTimeout(...) function is to be called by supplying a point every 't' seconds not in the for loop as pointed out by Rossko.

Thanks & Regards,
Shiva

Shiva

unread,
Oct 10, 2011, 6:38:31 AM10/10/11
to google-map...@googlegroups.com
Hello Everybody,

I am posting back on this topic as I had one more query on Maps APIs capability regarding this functionality i.e., I wanted to know if there is direct way (any methods) in the Maps V3 API to draw a line animatedly/incrementally between two given lat-longs?

Regards,
Shiva

Pil

unread,
Oct 10, 2011, 7:59:54 AM10/10/11
to Google Maps JavaScript API v3
Seems you can only draw a line from point to point. So the question is
how to find the points in the line. There are a few possibilities to
do that.

I can think of the geometry library that may be of some help here.
I can also think of calculating the distancies in pixels as I've done
here

http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/c0c85a497dbbd42/0fdd725c2d35aeb0

There may be other alternatives.
Reply all
Reply to author
Forward
0 new messages