ルート案内のアイコンを変更する

Start: End:

説明

ルート案内の結果のアイコンを変える方法を紹介します。次の3つのステップに従って説明します。
(1) "suppressMarkers : true" を to DirectionsRenderer にセットします。
(2) ルート案内の結果を受け取ったら、ルートのステップをそこから取り出します。
(3) その後、マーカーを生成して配置していきます。

(1)ルート検索結果のマーカーを非表示にする

ルート検索結果を表示するとき、DirectionsRendererを使います。このDirectionsRendererのインスタンスを作成するときに DirectionsRendererOptionsのsuppressMarkers = trueにします。

var rendererOptions = {
  map: map,
  suppressMarkers : true
}
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

その結果、ポリラインのみが表示されるようになります。 suppressMarkers=true

(2)DirectionsResultからステップの抽出

DirectionsResultはコールバック関数の第1引数として渡されます。

DirectionsService.route(request:DirectionsRequest, callback:function(DirectionsResult, DirectionsStatus))

それにはルート検索結果の情報が含まれていて、そこから各ステップを取り出すことができます。必要なのはマーカーを配置するためのposition(LatLng)で、directionStepのstart_locationとend_locationです。
(Google Chrome Developer Toolsで全体像を確認できます。) 必要な情報の取り出し

コードの中では、次の部分です。

function showSteps(directionResult) {
  var myRoute = directionResult.routes[0].legs[0];
  for (var i = 0; i < myRoute.steps.length; i++) {

(3)マーカーの配置

最後に各ステップのマーカーを配置します。このときにアイコンのデザインを変更することも可能です。この例では、Google Chart Tools: Image Charts を使ってアイコンを作成しています。

コードの中では、次の部分です。

for (var i = 0; i < myRoute.steps.length; i++) {
  var icon = "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=" + i + "|FF0000|000000";
  if (i == 0) {
    //Icon as start position
    icon = "https://chart.googleapis.com/chart?chst=d_map_xpin_icon&chld=pin_star|car-dealer|00FFFF|FF0000";
  }
  var marker = new google.maps.Marker({
    position: myRoute.steps[i].start_point, 
    map: map,
    icon: icon
  });
  attachInstructionText(marker, myRoute.steps[i].instructions);
  markerArray.push(marker);
}
//Icon as end position
var marker = new google.maps.Marker({
  position: myRoute.steps[i - 1].end_point, 
  map: map,
  icon: "https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=flag|ADDE63"
});

code

<script type='text/javascript'>

  var mapCanvas;
  var directionDisplay;
  var directionsService;
  var stepDisplay;
  var markerArray = [];

  function initialize() {
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService();
    
    // Create a map and center it on Manhattan.
    var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
    var myOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: manhattan
    }
    mapCanvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    // Create a renderer for directions and bind it to the map.
    var rendererOptions = {
      map: mapCanvas,
      suppressMarkers : true
    }
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)
    
    // Instantiate an info window to hold step text.
    stepDisplay = new google.maps.InfoWindow();
    
    calcRoute();
  }

  function calcRoute() {
  
    // First, remove any existing markers from the map.
    for (i = 0; i < markerArray.length; i++) {
      markerArray[i].setMap(null);
    }

    // Now, clear the array itself.
    markerArray = [];

    // Retrieve the start and end locations and create
    // a DirectionsRequest using WALKING directions.
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    };

    // Route the directions and pass the response to a
    // function to create markers for each step.
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        var warnings = document.getElementById("warnings_panel");
        warnings.innerHTML = "<b>" + response.routes[0].warnings + "</b>";
        directionsDisplay.setDirections(response);
        showSteps(response);
      }
    });
  }

  function showSteps(directionResult) {
    // For each step, place a marker, and add the text to the marker's
    // info window. Also attach the marker to an array so we
    // can keep track of it and remove it when calculating new
    // routes.
    var myRoute = directionResult.routes[0].legs[0];
    
    for (var i = 0; i < myRoute.steps.length; i++) {
      var icon = "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=" + i + "|FF0000|000000";
      if (i == 0) {
        icon = "https://chart.googleapis.com/chart?chst=d_map_xpin_icon&chld=pin_star|car-dealer|00FFFF|FF0000";
      }
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point, 
        map: mapCanvas,
        icon: icon
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray.push(marker);
    }
    var marker = new google.maps.Marker({
      position: myRoute.steps[i - 1].end_point, 
      map: mapCanvas,
      icon: "https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=flag|ADDE63"
    });
    markerArray.push(marker);
    
    google.maps.event.trigger(markerArray[0], "click");
  }

  function attachInstructionText(marker, text) {
    google.maps.event.addListener(marker, 'click', function() {
      // Open an info window when the marker is clicked on,
      // containing the text of the step.
      stepDisplay.setContent(text);
      stepDisplay.open(mapCanvas, marker);
    });
  }
  google.maps.event.addDomListener(window, "load", initialize);

</script>