title: Add markers to the start and end points of a path Google Maps API v3
body: <p>I'm trying to implement some sought of custom directions service on Google maps. I have a bunch of pre-made paths that I hide and show depending on the selection from two drop-down boxes. So far it works great. However, I would like to add markers to the start and end of the paths, How do i go about doing it?</p>
  
  <p><img src="https://i.stack.imgur.com/AMxwr.png" alt="A Path, I would like to add a marker to the start and end of the path."></p>
  
  <p>Here is a working sample <a href="http://jsfiddle.net/PwFDM/" rel="nofollow noreferrer">http://jsfiddle.net/PwFDM/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
          &lt;style type="text/css"&gt;
              html {
                  height: 100%
              }
              body {
                  height: 100%;
                  margin: 0;
                  padding: 0
              }
              #map_canvas {
                  height: 100%
              }
          &lt;/style&gt;
          &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9W-wEHa5KzvcntFzGgyTwWtx4wvrs0os&amp;sensor=true"&gt;
  
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div&gt;&lt;strong&gt;Start: &lt;/strong&gt;
  
              &lt;select id="start"&gt;
                  &lt;option&gt;Building 1&lt;/option&gt;
                  &lt;option&gt;Building 2&lt;/option&gt;
                  &lt;option&gt;Building 3&lt;/option&gt;
                  &lt;option&gt;Building 4&lt;/option&gt;
                  &lt;option&gt;Building 5&lt;/option&gt;
                  &lt;option&gt;Building 6&lt;/option&gt;
                  &lt;option&gt;Building 7&lt;/option&gt;
                  &lt;option&gt;Building 8&lt;/option&gt;
              &lt;/select&gt; &lt;strong&gt;End:&lt;/strong&gt; 
              &lt;select id="end"&gt;
                  &lt;option&gt;Building 1&lt;/option&gt;
                  &lt;option&gt;Building 2&lt;/option&gt;
                  &lt;option&gt;Building 3&lt;/option&gt;
                  &lt;option&gt;Building 4&lt;/option&gt;
                  &lt;option&gt;Building 5&lt;/option&gt;
                  &lt;option&gt;Building 6&lt;/option&gt;
                  &lt;option&gt;Building 7&lt;/option&gt;
                  &lt;option&gt;Building 8&lt;/option&gt;
              &lt;/select&gt;
              &lt;input type="button" onclick="drawDirections();" value="GO" /&gt;
          &lt;/div&gt;
          &lt;div id="map" style="width: 100%; height: 100%"&gt;&lt;/div&gt;
          &lt;script type="text/javascript"&gt;
              var mapOptions = {
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  center: new google.maps.LatLng(51.507684, 0.063686),
                  zoom: 17
              };
              var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
              // Predefine all the paths
              var paths = [];
  
              paths['1_to_2'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.508445, 0.063944),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507457, 0.064019)],
                  strokeColor: '#FF0000'
              });
              paths['1_to_3'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.508445, 0.063944),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507494, 0.063399)],
                  strokeColor: '#FF0000'
              });
              paths['1_to_4'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.508445, 0.063944),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507709, 0.063301)],
                  strokeColor: '#FF0000'
              });
              paths['1_to_5'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.508445, 0.063944),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.50747, 0.062659),
                  new google.maps.LatLng(51.507501, 0.062467)],
                  strokeColor: '#FF0000'
              });
              paths['1_to_6'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.508445, 0.063944),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507275, 0.062455)],
                  strokeColor: '#FF0000'
              });
              paths['1_to_7'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.508445, 0.063944),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507275, 0.062455)],
                  strokeColor: '#FF0000'
              });
              paths['1_to_8'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.508445, 0.063944),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507248, 0.065797),
                  new google.maps.LatLng(51.507449, 0.065805),
                  new google.maps.LatLng(51.507442, 0.066004)],
                  strokeColor: '#FF0000'
              });
  
              //---------------------------------------------------------
              paths['2_to_3'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507457, 0.064019),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507494, 0.063399)],
                  strokeColor: '#FF0000'
              });
              paths['2_to_4'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507457, 0.064019),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507709, 0.063301)],
                  strokeColor: '#FF0000'
              });
              paths['2_to_5'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507457, 0.064019),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.50747, 0.062659),
                  new google.maps.LatLng(51.507501, 0.062467)],
                  strokeColor: '#FF0000'
              });
              paths['2_to_6'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507457, 0.064019),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507275, 0.062455)],
                  strokeColor: '#FF0000'
              });
              paths['2_to_7'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507457, 0.064019),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507275, 0.062455)],
                  strokeColor: '#FF0000'
              });
              paths['2_to_8'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507457, 0.064019),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507248, 0.065797),
                  new google.maps.LatLng(51.507449, 0.065805),
                  new google.maps.LatLng(51.507442, 0.066004)],
                  strokeColor: '#FF0000'
              });
  
              //---------------------------------------------------------
              paths['3_to_4'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507494, 0.063399),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507709, 0.063301)],
                  strokeColor: '#FF0000'
              });
              paths['3_to_5'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507494, 0.063399),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.50747, 0.062659),
                  new google.maps.LatLng(51.507501, 0.062467)],
                  strokeColor: '#FF0000'
              });
              paths['3_to_6'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507494, 0.063399),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507275, 0.062455)],
                  strokeColor: '#FF0000'
              });
              paths['3_to_7'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507494, 0.063399),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507275, 0.062455)],
                  strokeColor: '#FF0000'
              });
              paths['3_to_8'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507494, 0.063399),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507248, 0.065797),
                  new google.maps.LatLng(51.507449, 0.065805),
                  new google.maps.LatLng(51.507442, 0.066004)],
                  strokeColor: '#FF0000'
              });
  
              //-------------------------------------------------------------
              paths['4_to_5'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507709, 0.063301),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.50747, 0.062659),
                  new google.maps.LatLng(51.507501, 0.062467)],
                  strokeColor: '#FF0000'
              });
              paths['4_to_6'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507709, 0.063301),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507275, 0.062455)],
                  strokeColor: '#FF0000'
              });
              paths['4_to_7'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507709, 0.063301),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507275, 0.062455)],
                  strokeColor: '#FF0000'
              });
              paths['4_to_8'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507709, 0.063301),
                  new google.maps.LatLng(51.507474, 0.063877),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507248, 0.065797),
                  new google.maps.LatLng(51.507449, 0.065805),
                  new google.maps.LatLng(51.507442, 0.066004)],
                  strokeColor: '#FF0000'
              });
  
              //---------------------------------------------------------------
              paths['5_to_6'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507501, 0.062467),
                  new google.maps.LatLng(51.50747, 0.062659),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507275, 0.062455)],
                  strokeColor: '#FF0000'
              });
              paths['5_to_7'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507501, 0.062467),
                  new google.maps.LatLng(51.50747, 0.062659),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507275, 0.062455)],
                  strokeColor: '#FF0000'
              });
              paths['5_to_8'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507501, 0.062467),
                  new google.maps.LatLng(51.50747, 0.062659),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507248, 0.065797),
                  new google.maps.LatLng(51.507449, 0.065805),
                  new google.maps.LatLng(51.507442, 0.066004)],
                  strokeColor: '#FF0000'
              });
  
              //----------------------------------------------------
              paths['6_to_7'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507275, 0.062455),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507275, 0.062455)],
                  strokeColor: '#FF0000'
              });
              paths['6_to_8'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507275, 0.062455),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507248, 0.065797),
                  new google.maps.LatLng(51.507449, 0.065805),
                  new google.maps.LatLng(51.507442, 0.066004)],
                  strokeColor: '#FF0000'
              });
  
              //--------------------------------------------------------
              paths['7_to_8'] = new google.maps.Polyline({
                  path: [
                  new google.maps.LatLng(51.507275, 0.062455),
                  new google.maps.LatLng(51.507293, 0.062681),
                  new google.maps.LatLng(51.507287, 0.063839),
                  new google.maps.LatLng(51.507248, 0.065797),
                  new google.maps.LatLng(51.507449, 0.065805),
                  new google.maps.LatLng(51.507442, 0.066004)],
                  strokeColor: '#FF0000'
              });
  
              function drawDirections() {
                  var start = 1 + document.getElementById('start').selectedIndex;
                  var end = 1 + document.getElementById('end').selectedIndex;
                  var i;
  
                  if (start === end) {
                      alert('Please choose different buildings');
                  } else {
                      // Hide all polylines
                      for (i in paths) {
                          paths[i].setOptions({
                              map: null
                          });
                      }
  
                      // Show the route
                      if (typeof paths['' + start + '_to_' + end] !== 'undefined') {
                          paths['' + start + '_to_' + end].setOptions({
                              map: map
                          });
                      } else if (typeof paths['' + end + '_to_' + start] !== 'undefined') {
                          paths['' + end + '_to_' + start].setOptions({
                              map: map
                          });
                      }
  
                      var laLatLng = new google.maps.LatLng(51.507684, 0.063686);
                      map.panTo(laLatLng);
                      map.setZoom(17);
                      //panTo(latLng:LatLng)
                  }
              }
          &lt;/script&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>