title: Google Maps API - Markers to Directions Route Service
body: <p>I am trying to add additional markers (custom icons) to my directional Google maps, but I cant seem to add these outside the initialize() function.</p>
  
  <p>I need to add them outside the initialize() function, because I would like to icons to change based on the route. It's the ADD EXTRA MARKERS TEST which I'm having trouble with. All the rest of the script works perfectly.</p>
  
  <p>Many thanks in advance for any help.</p>
  
  <p>Code so far:</p>
  
  <pre><code>       var directionDisplay;
         var directionsService = new google.maps.DirectionsService();
         var stepDisplay;
  
  
  
          function initialize() {
              var latlng = new google.maps.LatLng( &lt;? echo $lat; ?&gt; , &lt;? echo $lon; ?&gt; );
              var rendererOptions = {draggable: true};
              directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
              var myOptions = {zoom: 14,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControl: false};
              var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
              directionsDisplay.setMap(map);  
          directionsDisplay.setPanel(document.getElementById("directionsPanel"));
                   }
  </code></pre>
  
  <p>//calcRoute     </p>
  
  <pre><code>        function calcRoute() {
              var travelMode = 'DRIVING';
              var start = $("#routeStart").val();
              var via = $("#routeVia2").val();
              var end = $("#routeVia").val();
              var waypoints = [];
              if (via != '') {waypoints.push({location: via,stopover: true});
              }
              var request = {
                  origin: start,
                  destination: end,
                  waypoints: waypoints,
                  unitSystem: google.maps.UnitSystem.IMPERIAL,
                  travelMode: google.maps.DirectionsTravelMode[travelMode]
              };
  </code></pre>
  
  <p>//DISPLAY ROUTE AND PASS LATLNG TO PHP FILE FOR FURTHER PROCESSING</p>
  
  <pre><code>    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {            
      directionsDisplay.setDirections(response);
      var myRoute = response.routes[0];
      var txtDir = '';
      for (var i=0; i&lt;myRoute.legs[0].steps.length; i++) {
      txtDir += myRoute.legs[0].steps[i].path+"";                             
      }
  var strLAT = "" + txtDir;
  </code></pre>
  
  <p>//SEND DATA TO URL PHP FILE</p>
  
  <pre><code>     var xmlHttp = getXMLHttp();
       xmlHttp.onreadystatechange = function() {
       if (xmlHttp.readyState == 4) {
       HandleResponse(xmlHttp.responseText);
       }}                     
       xmlHttp.open("POST",'MYPHPFILE',true);
       xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       xmlHttp.send("LATLON="+strLAT);
  </code></pre>
  
  <p>//ALERT TEST TO ENSURE PHP PROCESSED DATA CORRECTLY</p>
  
  <pre><code>    function HandleResponse(response) {
              document.getElementById('ResponseDiv').innerHTML = response;
              alert($('#ResponseDiv').text());
          }
  </code></pre>
  
  <p>ADD EXTRA MARKERS TEST       </p>
  
  <pre><code>      var wxlatlng = new google.maps.LatLng( 52 , -1 );
              var marker = new google.maps.Marker({ 
              position: wxlatlng, 
              map: map, 
              icon: "http://nwsgeo.com/demo/images/pins/road-closed.jpg", 
              title: "test icon", 
  
       });
  </code></pre>
  
  <p>//ERROR MESSAGES</p>
  
  <pre><code>     }else{
       if (status == 'ZERO_RESULTS') {
       alert('No route could be found between the origin and destination.');
       }else if(status == 'INVALID_REQUEST') {
       alert('The DirectionsRequest provided was invalid.');
       }else{
       alert("There was an unknown error in your request. Requeststatus: nn" + status);
       }}});}
  </code></pre>