How to Add custom markers to a google directions map at the start only of multiple journeys <p>Firstly let me say I am not a Java or even web developer. I have pieced together this code via the web and am almost at the finish point - but cannot get over the line.</p> <p>I am mapping journeys for a trucking firm, and want to use a custom marker at the start of each journey, with no marker at the end of the journey. The attached code does all I need for mapping the journey but I can't get the markers to render on the page. What am I missing?</p> <pre><code>var directionsService = new google.maps.DirectionsService(); var num, map, data; var requestArray = [], renderArray = []; // A JSON Array containing some people/routes and the destinations/stops var jsonArray = { "Journey1": ["-38.076600, 176.722100", "-38.279641, 175.897505"], "Journey2": ["-38.279641, 175.897505", "-38.058217, 175.783939"], "Journey3": ["-38.058217, 175.783939", "-37.964919, 175.478964"], "Journey4": ["-37.964919, 175.478964", "-38.323678, 175.152163"], "Journey5": ["-38.323678, 175.152163", "-38.274879, 175.894551"], "Journey6": ["-38.274879, 175.894551", "-38.095284, 176.076530"], "Journey7": ["-38.095284, 176.076530", "-38.075316, 176.716276"], "Journey8": ["-38.075316, 176.716276", "-38.076600, 176.722100"] } // 16 Standard Colours for navigation polylines var colourArray = ['Maroon', 'Green', 'Olive', 'DarkBlue', 'Violet', 'Teal', 'Gray', 'Silver']; var Labelarray = [ 'Kawerau Depot, Ex: CHH Kawerau - Cogen Plant Kinleith - Hogfuel - CHH KINLEITH', 'Cogen Plant Kinleith - TD Haulage Pinedale - Empty', 'TD Haulage Pinedale - Gascoigne Farms Cambridge - Post Peeling - Untreated - GASCOIGNE FARMS LTD', 'Gascoigne Farms Cambridge - Tregoweth Te Kuiti - Empty', 'Tregoweth Te Kuiti - CHH Kinleith - Chip - FLL NETLOGIX LTD', 'CHH Kinleith - Mamaku Sawmill Mamaku - Empty', 'Mamaku Sawmill Mamaku - CHH Kawerau - Chip - FLL NETLOGIX LTD', 'CHH Kawerau - Kawerau Depot - Empty']; // Let's make an array of requests which will become individual polylines on the map. function generateRequests() { requestArray = []; for (var route in jsonArray) { // This now deals with one of the people / routes // Somewhere to store the wayoints var waypts = []; // 'start' and 'finish' will be the routes origin and destination var start, finish // lastpoint is used to ensure that duplicate waypoints are stripped var lastpoint data = jsonArray[route] limit = data.length for (var waypoint = 0; waypoint &lt; limit; waypoint++) { if (data[waypoint] === lastpoint) { // Duplicate of of the last waypoint - don't bother // continue; } // Prepare the lastpoint for the next loop lastpoint = data[waypoint] // Add this to waypoint to the array for making the request waypts.push({ location: data[waypoint], stopover: true }); } // Grab the first waypoint for the 'start' location start = (waypts.shift()).location; // Grab the last waypoint for use as a 'finish' location finish = waypts.pop(); if (finish === undefined) { // Unless there was no finish location for some reason? finish = start; } else { finish = finish.location; } // Let's create the Google Maps request object var request = { origin: start, destination: finish, waypoints: waypts, travelMode: google.maps.TravelMode.DRIVING }; // and save it in our requestArray requestArray.push({ "route": route, "request": request }); } processRequests(); } function processRequests() { // Counter to track request submission and process one at a time; var i = 0; // Determines if we will use an image for the icon 1 = true, 0 = false var UseImage = 1; var j = 0; var x = 0; // Used to submit the request 'i' function submitRequest() { directionsService.route(requestArray[i].request, directionResults); } // Used as callback for the above request for current 'i' function directionResults(result, status) { if (status == google.maps.DirectionsStatus.OK) { j++; //j = i + 1 // Create a unique DirectionsRenderer 'i' renderArray[i] = new google.maps.DirectionsRenderer({ suppressMarkers: true }); renderArray[i].setMap(map); renderArray[i].setOptions({ preserveViewport: true, suppressInfoWindows: true, polylineOptions: { strokeWeight: 3, strokeOpacity: 0.8, strokeColor: colourArray[i] } }); //************************************** // this is the code I am trying to add in so that I get a marker only at the start position of the line. // Shapes define the clickable region of the icon. var shape = { coords: [1, 1, 1, 20, 18, 20, 18, 1], type: 'poly' }; // Add markers to the map var image = { url: "Marker Green " + j + ".png", // This marker is 27 pixels wide by 40 pixels tall. size: new google.maps.Size(27, 40), // The origin for this image is 0,0. origin: new google.maps.Point(0, 0), // The anchor for this image is the base of the icon at 14, 39. anchor: new google.maps.Point(14, 39) }; var marker = new google.maps.Marker({ position: new google.maps.LatLng(requestArray[i].request.origin), map: map, icon: image, shape: shape, title: Labelarray[i] + ' - ' + requestArray[i].request.origin, zIndex: i }); //************************************** //end of code I am trying to get to work } // Use this new renderer with the result renderArray[i].setDirections(result); // and start the next request nextRequest(); } function nextRequest() { // Increase the counter i++; // Make sure we are still waiting for a request if (i &gt;= requestArray.length) { // No more to do return; } // Submit another request submitRequest(); } // This request is just to kick start the whole process submitRequest(); } // Called Onload function init() { // Some basic map setup (from the API docs) //Map centre var mapOptions = { center: new google.maps.LatLng(-38.143567, 175.965254), zoom: 9, mapTypeControl: true, streetViewControl: true, zoomControl: true, panControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Start the request making generateRequests() } // Get the ball rolling and trigger our init() on 'load' google.maps.event.addDomListener(window, 'load', init); </code></pre>