title: Google Maps Api - drawing routes from an array of points
body: <p>I would like to connect 8 points on google map so that they shared line (road). I would like to click on the point cloud showed up with a description that point. The goal is to show the route the car point to point. </p>
  
  <p>I have script to make map with points but I don't know how connect markers.</p>
  
  <pre><code>var MapPoints = '[{"address":{"address":"plac Grzybowski, Warszawa, Polska","lat":"52.2360592","lng":"21.002903599999968"},"title":"Warszawa"},{"address":{"address":"Jana Paw\u0142a II, Warszawa, Polska","lat":"52.2179967","lng":"21.222655600000053"},"title":"Wroc\u0142aw"},{"address":{"address":"Wawelska, Warszawa, Polska","lat":"52.2166692","lng":"20.993677599999955"},"title":"O\u015bwi\u0119cim"}]';
  
  var MY_MAPTYPE_ID = 'custom_style';
  function initialize() {
  
  if (jQuery('#map').length &gt; 0) {
  
      var locations = jQuery.parseJSON(MapPoints);
  
      window.map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          scrollwheel: false
      });
  
      var infowindow = new google.maps.InfoWindow();
      var bounds = new google.maps.LatLngBounds();
  
      for (i = 0; i &lt; locations.length; i++) {
          marker = new google.maps.Marker({
              position: new google.maps.LatLng(locations[i].address.lat, locations[i].address.lng),
              map: map
          });
  
          bounds.extend(marker.position);
  
          google.maps.event.addListener(marker, 'click', (function (marker, i) {
              return function () {
                  infowindow.setContent(locations[i]['title']);
                  infowindow.open(map, marker);
              }
          })(marker, i));
      }
  
      map.fitBounds(bounds);
  
      var flightPlanCoordinates = [
          new google.maps.LatLng(37.772323, -122.214897),
          new google.maps.LatLng(21.291982, -157.821856),
          new google.maps.LatLng(-18.142599, 178.431),
          new google.maps.LatLng(-27.46758, 153.027892)
      ];
      var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          strokeColor: "#FF0000",
          strokeOpacity: 1.0,
          strokeWeight: 2
      });
  
      var flightPath = responseArray.map(function (item) {
          return new google.maps.LatLng(item.latitude, item.longitude);
      });
  
      var listener = google.maps.event.addListener(map, "idle", function () {
          map.setZoom(12);
          google.maps.event.removeListener(listener);
      });
   }
   }
   google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>