locked
Intigrating google map in asp.net with animation RRS feed

  • Question

  • User223788054 posted

     Hi,

     This is Vijay.I have a requirement to show the google map in our GPS application with animation(vehicles with moving). I found below java script code in google. How to pass longitude and latitude values to the below javascript.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=<%=GoogleMapObject.APIVersion %>&amp;key=<%=GoogleMapObject.APIKey %>"  type="text/javascript"></script>
        <script src="epoly.js" type="text/javascript"></script>
      </head>
      <body onunload="GUnload()">
       
        <div id="controls">
         <form onsubmit="start();return false" action="#">
          Enter start and end addresses.<br />
          <input type="text" size="80" maxlength="200" id="startpoint" value="17.3850412323" /><br />
          <input type="text" size="80" maxlength="200" id="endpoint" value="78.4866743244" /><br />
          <input type="submit" value="Start"  />
         </form>
        </div>

        <div id="map" style="width: 700px; height: 500px"></div>
        <div id="step">&nbsp;</div>
        <div id="distance">Miles: 0.00</div>

        <script type="text/javascript">
        //<![CDATA[
        if (GBrowserIsCompatible()) {
     
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GMapTypeControl());
          //map.setCenter(new GLatLng(0, 0), 2);
          //var latlng = new google.maps.LatLng(40.730885, -73.997383);

          map.setCenter(new GLatLng(document.getElementById("startpoint").value, document.getElementById("endpoint").value), 13);
          var dirn = new GDirections();
          var step = 5; // metres
          var tick = 100; // milliseconds
          var poly;
          var eol;
          var car = new GIcon();
          car.image = "RedCar.png"
              car.iconSize=new GSize(32,18);
              car.iconAnchor=new GPoint(16,9);
          var marker;
          var k=0;
          var stepnum=0;
          var speed = "";  

          function animate(d) {
            if (d>eol) {
              document.getElementById("step").innerHTML = "<b>Trip completed<\/b>";
              document.getElementById("distance").innerHTML =  "Miles: "+(d/1609.344).toFixed(2);
              return;
            }
            var p = poly.GetPointAtDistance(d);
            if (k++>=180/step) {
              map.panTo(p);
              k=0;
            }
            marker.setPoint(p);
            document.getElementById("distance").innerHTML =  "Miles: "+(d/1609.344).toFixed(2)+speed;
            if (stepnum+1 < dirn.getRoute(0).getNumSteps()) {
              if (dirn.getRoute(0).getStep(stepnum).getPolylineIndex() < poly.GetIndexAtDistance(d)) {
                stepnum++;
                var steptext = dirn.getRoute(0).getStep(stepnum).getDescriptionHtml();
                document.getElementById("step").innerHTML = "<b>Next:<\/b> "+steptext;
                var stepdist = dirn.getRoute(0).getStep(stepnum-1).getDistance().meters;
                var steptime = dirn.getRoute(0).getStep(stepnum-1).getDuration().seconds;
                var stepspeed = ((stepdist/steptime) * 2.24).toFixed(0);
                step = stepspeed/2.5;
                speed = "<br>Current speed: " + stepspeed +" mph";
              }
            } else {
              if (dirn.getRoute(0).getStep(stepnum).getPolylineIndex() < poly.GetIndexAtDistance(d)) {
                document.getElementById("step").innerHTML = "<b>Next: Arrive at your destination<\/b>";
              }
            }
            setTimeout("animate("+(d+step)+")", tick);
          }

          GEvent.addListener(dirn,"load", function() {
            document.getElementById("controls").style.display="none";
            poly=dirn.getPolyline();
            eol=poly.Distance();
            map.setCenter(poly.getVertex(0),17);
            map.addOverlay(new GMarker(poly.getVertex(0),G_START_ICON));
            map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),G_END_ICON));
            marker = new GMarker(poly.getVertex(0),{icon:car});
            map.addOverlay(marker);
            var steptext = dirn.getRoute(0).getStep(stepnum).getDescriptionHtml();
            document.getElementById("step").innerHTML = steptext;
            setTimeout("animate(0)",2000);  // Allow time for the initial map display
          });

          GEvent.addListener(dirn,"error", function() {
            alert("Location(s) not recognised. Code: "+dirn.getStatus().code);
          });

          function start() {
              var startpoint =  document.getElementById("startpoint").value;
              var endpoint = document.getElementById("endpoint").value;
            dirn.loadFromWaypoints([startpoint,endpoint],{getPolyline:true,getSteps:true});
          }
        }

        // This Javascript is based on code provided by the
        // Community Church Javascript Team
        // http://www.bisphamchurch.org.uk/  
        // http://econym.org.uk/gmap/

        //]]>
        </script>
      </body>

    </html>

     

    please help me.

    regards,

    vijay 

    Friday, February 19, 2010 8:40 AM

Answers

  • User2130758966 posted

    I didnt realise you had come back and added the code!

    Ok these two lines grab the lat and lon from the two <input> boxes on the page:

              var startpoint =  document.getElementById("startpoint").value;
              var endpoint = document.getElementById("endpoint").value;


    if you change those lines you can assign a lat lon directly instead of taking it from the input box like

              var startpoint =  "17.3850412323";
              var endpoint = "78.4866743244";
    
    


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, February 27, 2010 11:32 AM

All replies

  • User2130758966 posted

    Hey,

    you forgot to post the javascript [:)]

    Friday, February 19, 2010 9:37 AM
  • User2130758966 posted

    I didnt realise you had come back and added the code!

    Ok these two lines grab the lat and lon from the two <input> boxes on the page:

              var startpoint =  document.getElementById("startpoint").value;
              var endpoint = document.getElementById("endpoint").value;


    if you change those lines you can assign a lat lon directly instead of taking it from the input box like

              var startpoint =  "17.3850412323";
              var endpoint = "78.4866743244";
    
    


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, February 27, 2010 11:32 AM