title: Google Maps Multiple Geodesic Paths from one Marker
body: <p>I'm trying to create a Google Map that will display multiple geodesic lines originating from one marker to 2 or more separate markers on the map. I'm able to place my multiple markers on the map but I'm having problems figuring out how to have 2 or more paths go from one marker on the map. Currently this is how it's displaying</p>
  
  <p><img src="https://i.stack.imgur.com/pztrZ.png" alt="Current Map"></p>
  
  <p>Here's my edited script for the map</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
    var geodesicPoly1;
    var geodesicPoly2;
    var marker1;
    var marker2;
    var marker3;
  
    function initialize() {
      var myOptions = {
        zoom: 4,
        center: new google.maps.LatLng(39.0997, -94.5786),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
      marker1 = new google.maps.Marker({
        map: map,
        draggable: false,
        position: new google.maps.LatLng(33.7490, -84.3880)
      });
  
      marker2 = new google.maps.Marker({
        map: map,
        draggable: false,
        position: new google.maps.LatLng(33.4484, -112.0740)
      });
  
      marker3 = new google.maps.Marker({
        map: map,
        draggable: false,
        position: new google.maps.LatLng(37.9577, -121.2908)
      });
  
      var geodesicOptions = {
        strokeColor: '#77bf44',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        geodesic: true,
        map: map
      };
  
      geodesicPoly1 = new google.maps.Polyline(geodesicOptions);
      update();
  
      geodesicPoly2 = new google.maps.Polyline(geodesicOptions);
      update2();
    }
  
  
    function update() {
      var path = [marker1.getPosition(), marker2.getPosition()];
      geodesicPoly1.setPath(path);
  
      var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
      document.getElementById('heading').value = heading;
      document.getElementById('origin').value = path[0].toString();
      document.getElementById('destination').value = path[1].toString();
    }
  
    function update2() {
      var path = [marker1.getPosition(), marker3.getPosition()];
      geodesicPoly2.setPath(path);
  
      var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
      document.getElementId('heading').value = heading;
      document.getElementId('origin').value = path[0].toString();
      document.getElementId('destination').value = path[1].toString();
    }
  
  
    google.maps.event.addDomListener(window, 'load', initialize);
  
  &lt;/script&gt;
  </code></pre>