Home/ Questions/Q 8018845
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T21:13:34+00:00

I’m trying to create a Google Map that will display multiple geodesic lines originating

  • 0

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

Current Map

Here’s my edited script for the map

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script type="text/javascript">

  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);

</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A Polyline can only draw between two points. You need to create more than one Polyline variable. 

    <html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
  <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
  <script type="text/javascript">

    var geodesicPoly1;
    var geodesicPoly2;
    var marker1;
    var marker2;
    var marker3;
    var heading = "cat";
    var map;

    function initialize()
    {
      var myOptions = {
        zoom: 4,
        center: new google.maps.LatLng(39.0997, -94.5786),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      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);
      geodesicPoly2 = new google.maps.Polyline(geodesicOptions);

      update();
      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 path2 = [marker1.getPosition(), marker3.getPosition()];

      geodesicPoly2.setPath(path2);
      var heading2 = google.maps.geometry.spherical.computeHeading(path2[0],
          path2[1]);
      document.getElementById('heading').value = heading;
      document.getElementById('origin').value = path2[0].toString();
      document.getElementById('destination').value = path2[1].toString();
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>
<body >
    <div id="map_canvas" style='height:500px; width:800px;'></div>
    <div id='heading'></div>
    <div id='origin'></div>
    <div id='destination'></div>
</body>
</html>

    enter image description here

    • 0