title: Markers on multiple coordinates on Google Map in JavaScript
body: <p>I have two sets of points coordinates that I need to connect on google map, like this, just much larger:</p>
  
  <pre><code>  var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
  
    var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
  </code></pre>
  
  <p>The first coordinate from "start" needs to be connected to the first coord from "end", and so on, until the end. Got that, but now I need to make "start" and "end" points more recognizable, put some kind of dots in a different color on them. What I have:</p>
  
  <pre><code>var geocoder;
  var map;
  
  function initialize() {
  
    var center = new google.maps.LatLng(51.97559, 4.12565);
    map = new google.maps.Map(document.getElementById('map'), {
       center: center,
       zoom: 12,
       mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  
    var bounds = new google.maps.LatLngBounds();
  
    var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
    var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
  
    var paths = [];
  
    for (var i=0; i &lt; end.length; i++){
      var startCoords = start[i].split(",");
      var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
      var endCoords = end[i].split(",");
      var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
      paths.push([startPt, endPt]);
  
      bounds.extend(startPt);
      bounds.extend(endPt);
    }
    map.fitBounds(bounds);
  
    var polyline = new google.maps.Polygon({
      paths: paths,
      strokeColor: 'red',
      strokeWeight: 2,
      strokeOpacity: 1
    });
  
    polyline.setMap(map); 
  
  }
  
  
  google.maps.event.addDomListener(window, "load", initialize);
  </code></pre>
  
  <p>Any kind of help is welcomed. </p>