title: Draw ARC Polyline in Google Map
body: <p><strong>How Can I Draw Arc Polyline in Google Map ?</strong></p>
  <p>I already used <a href="https://stackoverflow.com/a/43665433">this</a> code to create <strong>curved</strong> Polyline.</p>
  <p>Here is the <strong>method</strong> to draw curved Polyline:</p>
  <pre><code>private void showCurvedPolyline (LatLng p1, LatLng p2, double k) {
      //Calculate distance and heading between two points
      double d = SphericalUtil.computeDistanceBetween(p1,p2);
      double h = SphericalUtil.computeHeading(p1, p2);
  
      //Midpoint position
      LatLng p = SphericalUtil.computeOffset(p1, d*0.5, h);
  
      //Apply some mathematics to calculate position of the circle center
      double x = (1-k*k)*d*0.5/(2*k);
      double r = (1+k*k)*d*0.5/(2*k);
  
      LatLng c = SphericalUtil.computeOffset(p, x, h + 90.0);
  
      //Polyline options
      PolylineOptions options = new PolylineOptions();
      List&lt;PatternItem&gt; pattern = Arrays.&lt;PatternItem&gt;asList(new Dash(30), new Gap(20));
  
      //Calculate heading between circle center and two points
      double h1 = SphericalUtil.computeHeading(c, p1);
      double h2 = SphericalUtil.computeHeading(c, p2);
  
      //Calculate positions of points on circle border and add them to polyline options
      int numpoints = 100;
      double step = (h2 -h1) / numpoints;
  
      for (int i=0; i &lt; numpoints; i++) {
          LatLng pi = SphericalUtil.computeOffset(c, r, h1 + i * step);
          options.add(pi);
      }
  
      //Draw polyline
      mMap.addPolyline(options.width(10).color(Color.MAGENTA).geodesic(false).pattern(pattern));
  }
  </code></pre>
  <p>OUTPUT</p>
  <h1>1. If I am using this.showCurvedPolyline(latLng1, latLng2, 0.1); then getting:</h1>
  <p><a href="https://i.stack.imgur.com/C5WCc.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/C5WCc.jpg" alt="enter image description here" /></a></p>
  <p>As you can see in above image, we are very close to get our target, but don't know why it's not connecting with another end point</p>
  <h1>2. If I am using this.showCurvedPolyline(latLng1, latLng2, 1); then getting:</h1>
  <p><a href="https://i.stack.imgur.com/gv49e.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/gv49e.jpg" alt="enter image description here" /></a></p>
  <h1>3. If I am using LatLng c = SphericalUtil.computeOffset(p, x, h - 90.0); then getting:</h1>
  <p><a href="https://i.stack.imgur.com/QffXm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QffXm.png" alt="enter image description here" /></a></p>
  <p><strong>Note:</strong> I don't want this much <em>big circle shape</em>, really <strong>I don't want</strong> that much <em>height</em>.</p>
  <p>Here is what <strong>I want an ARC Shape</strong> as shown in below image</p>
  <p><a href="https://i.stack.imgur.com/Ayk0Q.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Ayk0Q.jpg" alt="enter image description here" /></a></p>
  <p>Here is the <strong>CODE</strong> I am using to <em>add curved Polyline</em> between two <code>geo-locatios</code> :</p>
  <pre><code>private void addCurvedPolyLine() {
  
          LatLng latLng1 = new LatLng(40.7128, 74.0059); // New York
          LatLng latLng2 = new LatLng(51.5074, 0.1278); // London
  
          Marker marker1 = mMap.addMarker(new MarkerOptions().position(latLng1).title(&quot;Start&quot;));
          Marker marker2 = mMap.addMarker(new MarkerOptions().position(latLng2).title(&quot;End&quot;));
  
          LatLngBounds.Builder builder = new LatLngBounds.Builder();
  
          builder.include(marker1.getPosition());
          builder.include(marker2.getPosition());
  
          LatLngBounds bounds = builder.build();
          int padding = 0; // offset from edges of the map in pixels
          CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, padding);
          mMap.moveCamera(cu);
          mMap.animateCamera(cu);
  
          this.showCurvedPolyline(latLng1, latLng2, 0.1);
  
      }
  </code></pre>