asynctask google maps pada android

ini adalah snippet pada coding pemanggilan asynctask android maps

public class Request_Update extends AsyncTask<Location, Void, Location>{
 @Override
 protected void onPreExecute()
 {
  //Toast.makeText(getApplicationContext(), "onPreExecute()!", Toast.LENGTH_SHORT).show();
 }
 @Override
 protected Location doInBackground(Location... location) {
  // TODO Auto-generated method stub
  
  String url = "http://maps.googleapis.com/maps/api/directions/xml?" 
    + "origin=" + location[0].getLatitude() + "," + location[0].getLongitude()  
    + "&destination=" + frnd_lat + "," + frnd_longi 
    + "&sensor=false&units=metric&mode="+direction; //direction="walking" or "driving"


  try {
   HttpClient httpClient = new DefaultHttpClient();
   HttpContext localContext = new BasicHttpContext();
   HttpPost httpPost = new HttpPost(url);
   HttpResponse response = httpClient.execute(httpPost, localContext);
   InputStream in = response.getEntity().getContent();
   DocumentBuilder builder = DocumentBuilderFactory.newInstance().newDocumentBuilder();
   doc = builder.parse(in);
  } catch (Exception e) {    
    }
  
  return location[0];
 }
 
 @Override
 protected void onPostExecute(Location location)
 {
  if(doc!=null)
  {
   directionPoint=getDirection(doc);
   int ii = 0;
   size_of_latlong=directionPoint.size();
   for( ; ii <size_of_latlong ; ii++) {    
    if(ii==0)
    {
     PolylineOptions rectLine = new PolylineOptions().width(8).color(Color.RED);
     rectLine.add(my_latlong,directionPoint.get(ii));
     Polyline polyline=map.addPolyline(rectLine);
     polylines.add(polyline);
    }
    else
    {
     PolylineOptions rectLine = new PolylineOptions().width(8).color(Color.RED);
     rectLine.add(directionPoint.get(ii-1),directionPoint.get(ii));
     Polyline polyline=map.addPolyline(rectLine);
     polylines.add(polyline);
    }
   } 
   PolylineOptions rectLine = new PolylineOptions().width(8).color(Color.RED);
   rectLine.add(frnd_latlong,directionPoint.get(ii-1));
   Polyline polyline=map.addPolyline(rectLine);
   polylines.add(polyline);
   //map.addPolyline(rectLine);
  }
 } 
}
 
public ArrayList<LatLng> getDirection(Document doc) {
 NodeList nl1, nl2, nl3;
 ArrayList<LatLng> listGeopoints = new ArrayList<LatLng>();
 nl1 = doc.getElementsByTagName("step");
 if (nl1.getLength() > 0) {
  for (int i = 0; i < nl1.getLength(); i++) {
   Node node1 = nl1.item(i);
   nl2 = node1.getChildNodes();

   Node locationNode = nl2.item(getNodeIndex(nl2, "start_location"));
   nl3 = locationNode.getChildNodes();
   Node latNode = nl3.item(getNodeIndex(nl3, "lat"));
   double lat = Double.parseDouble(latNode.getTextContent());
   Node lngNode = nl3.item(getNodeIndex(nl3, "lng"));
   double lng = Double.parseDouble(lngNode.getTextContent());
   listGeopoints.add(new LatLng(lat, lng));

   locationNode = nl2.item(getNodeIndex(nl2, "polyline"));
   nl3 = locationNode.getChildNodes();
   latNode = nl3.item(getNodeIndex(nl3, "points"));
   ArrayList<LatLng> arr = decodePoly(latNode.getTextContent());
   for(int j = 0 ; j < arr.size() ; j++) {
    listGeopoints.add(new LatLng(arr.get(j).latitude, arr.get(j).longitude));
   }

   locationNode = nl2.item(getNodeIndex(nl2, "end_location"));
   nl3 = locationNode.getChildNodes();
   latNode = nl3.item(getNodeIndex(nl3, "lat"));
   lat = Double.parseDouble(latNode.getTextContent());
   lngNode = nl3.item(getNodeIndex(nl3, "lng"));
   lng = Double.parseDouble(lngNode.getTextContent());
   listGeopoints.add(new LatLng(lat, lng));
  }
 }
 return listGeopoints;
}
 
private int getNodeIndex(NodeList nl, String nodename) {
 for(int i = 0 ; i < nl.getLength() ; i++) {
  if(nl.item(i).getNodeName().equals(nodename))
   return i;
 }
 return -1;
}
 
private ArrayList<LatLng> decodePoly(String encoded) {
 ArrayList<LatLng> poly = new ArrayList<LatLng>();
 int index = 0, len = encoded.length();
 int lat = 0, lng = 0;
 while (index < len) {
  int b, shift = 0, result = 0;
  do {
   b = encoded.charAt(index++) - 63;
   result |= (b & 0x1f) << shift;
   shift += 5;
  } while (b >= 0x20);
  int dlat = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
  lat += dlat;
  shift = 0;
  result = 0;
  do {
   b = encoded.charAt(index++) - 63;
   result |= (b & 0x1f) << shift;
   shift += 5;
  } while (b >= 0x20);
  int dlng = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
  lng += dlng;

  LatLng position = new LatLng((double)lat / 1E5, (double)lng / 1E5);
  poly.add(position);
 }
 return poly;
}

menampilkan maps dan direction pada HTML

saya akan memberikan sedikit snippet yang saya pakai untuk membuat google maps di html
seperti gambar di bawah ini

<!DOCTYPE html>
    <html> 
    <head> 
       <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
       <title>Google Maps API v3 Directions Example</title> 
       <script type="text/javascript" 
               src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </head> 
    <body style="font-family: Arial; font-size: 12px;"> 
       <div style="width: 600px;">
         <div id="map" style="width: 280px; height: 400px; float: left;"></div> 
         <div id="panel" style="width: 300px; float: right;"></div> 
       </div>
       
       <script type="text/javascript"> 
    
         var directionsService = new google.maps.DirectionsService();
         var directionsDisplay = new google.maps.DirectionsRenderer();
    
         var map = new google.maps.Map(document.getElementById('map'), {
           zoom:7,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         });
        
         directionsDisplay.setMap(map);
         directionsDisplay.setPanel(document.getElementById('panel'));
    
         var request = {
           origin: 'Chicago', 
           destination: 'New York',
           travelMode: google.maps.DirectionsTravelMode.DRIVING
         };
    
         directionsService.route(request, function(response, status) {
           if (status == google.maps.DirectionsStatus.OK) {
             directionsDisplay.setDirections(response);
           }
         });
       </script> 
    </body> 
    </html>