移動方向地図に自分の選択マーカーを追加するには？

Question

私はセットDirectionsRenderer（{suppressMarkers：真}）で試してくださいましたが、これは動作していない。..

<style> 
    html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 
    #map { 
     height: 100%; 
    } 
    #floating-panel { 
     position: absolute; 
     top: 10px; 
     left: 25%; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     text-align: center; 
     font-family: 'Roboto','sans-serif'; 
     line-height: 30px; 
     padding-left: 10px; 
    } 
</style> 

<div id="floating-panel"> 
    <b>Mode of Travel: </b> 
    <select id="mode"> 
     <option value="DRIVING">Driving</option> 
     <option value="WALKING">Walking</option> 
     <option value="BICYCLING">Bicycling</option> 
     <option value="TRANSIT">Transit</option> 
    </select> 
</div> 
<div id="map"></div> 

<script> 

    function initMap() { 
     var php = <?php echo '{ 
    "status": "true", 
    "msg": "Logs found", 
    "logs": [{ 
      "log_id": "656461", 
      "gps_device_id": "1195306005", 
      "gps_lat": "19.19706", 
      "gps_long": "72.96049", 
      "gps_location": "Pipeline Road, Sai Nath Nagar, Jeejamata Nagar", 
      "datetime": "2016-05-18 06:34:57" 
    },{ 
      "log_id": "5345435", 
      "gps_device_id": "1195306005", 
      "gps_lat": "19.53543", 
      "gps_long": "72.454354", 
      "gps_location": "Pipeline Road, Sai Nath Nagar, Jeejamata Nagar", 
      "datetime": "2016-05-18 06:34:57" 
    },{ 
      "log_id": "543543", 
      "gps_device_id": "1195306005", 
      "gps_lat": "19.43554", 
      "gps_long": "72.435435", 
      "gps_location": "Pipeline Road, Sai Nath Nagar, Jeejamata Nagar", 
      "datetime": "2016-05-18 06:34:57" 
    },{ 
      "log_id": "234234", 
      "gps_device_id": "234234234", 
      "gps_lat": "22.19707", 
      "gps_long": "75.96050", 
      "gps_location": "Pipeline Road, Sai Nath Nagar, Jeejamata Nagar", 
      "datetime": "2016-05-18 06:34:57" 
    }] 
}'; ?> 
     var jsonData = JSON.parse(JSON.stringify(php.logs)); 
//  for (var i = 0; i < jsonData.length; i++) { 
     var gps_lat = jsonData[0].gps_lat; 
     var gps_long = jsonData[0].gps_long; 
     var gps_lat2 = jsonData[jsonData.length - 1].gps_lat; 
     var gps_long2 = jsonData[jsonData.length - 1].gps_long; 
//  } 
     //console.log(gps_lat,gps_long,gps_lat2,gps_long2); 
     var directionsDisplay = new google.maps.DirectionsRenderer; 
     var directionsService = new google.maps.DirectionsService; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 14, 
      center: {lat: parseFloat(gps_lat), lng: parseFloat(gps_long)} 
     }); 
//  var myLatLng = {lat: parseFloat(gps_lat), lng: parseFloat(gps_long)}; 
// 
//  var marker = new google.maps.Marker({ 
//  position: myLatLng, 
//  map: map, 
//  title: 'Hello World!' 
//  }); 

     directionsDisplay.setMap(map); 

     calculateAndDisplayRoute(directionsService, directionsDisplay, gps_lat, gps_long, gps_lat2, gps_long2); 
//  document.getElementById('mode').addEventListener('change', function() { 
//   calculateAndDisplayRoute(directionsService, directionsDisplay,gps_lat,gps_long,gps_lat2,gps_long2); 
//  }); 



    } 

    function calculateAndDisplayRoute(directionsService, directionsDisplay, gps_lat, gps_long, gps_lat2, gps_long2) { 

     //var selectedMode = document.getElementById('mode').value; 
     directionsService.route({ 
      origin: {lat: parseFloat(gps_lat), lng: parseFloat(gps_long2)}, // Haight. 
      destination: {lat: parseFloat(gps_lat2), lng: parseFloat(gps_long2)}, // Ocean Beach. 
      // Note that Javascript allows us to access the constant 
      // using square brackets and a string value as its 
      // "property." 
      travelMode: google.maps.TravelMode.DRIVING 
     }, function (response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
       var leg = response.routes[ 0 ].legs[ 0 ]; 
       makeMarker(leg.start_location, flag.png, "title"); 
       makeMarker(leg.end_location, bus_location.png, 'title'); 
      } else { 
       window.alert('Directions request failed due to ' + status); 
      } 
     }); 
    } 
</script> 
<!-------------- End ----------------------------> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initMap"></script> 

Answer 1

は、変更マーカーアイコンのためにこのコードを試してみてください。

<!DOCTYPE html> 
    <html> 
     <head> 
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
      <meta charset="utf-8"> 
      <style> 
       html, body, #map-canvas { 
        height: 100%; 
        margin: 0px; 
        padding: 0px 
       } 
      </style> 
      <script src="http://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
      <script> 
       var directionsDisplay; 
       var directionsService = new google.maps.DirectionsService(); 
       var map; 


       function initialize() { 
        directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true}); 
        map = new google.maps.Map(document.getElementById('map-canvas'), null); 
        directionsDisplay.setMap(map); 
        calcRoute(); 
       } 

       function calcRoute() { 
        var startMarker; 
        var endMarker; 
        var start = new google.maps.LatLng(51.470907, 7.225558); 
        var end = new google.maps.LatLng(52.435293, 10.736883); 

        var startGeocoder = new google.maps.Geocoder(); 
        var endGeocoder = new google.maps.Geocoder(); 

        startGeocoder.geocode({'latLng': start}, function (results, status) { 
         if (status == google.maps.GeocoderStatus.OK && results[1]) { 

         } 
        }); 

        endGeocoder.geocode({'latLng': end}, function (results, status) { 
         if (status == google.maps.GeocoderStatus.OK && results[1]) { 

         } 
        }); 

        var request = { 
         origin: start, 
         destination: end, 
         travelMode: google.maps.TravelMode.DRIVING 
        }; 

        directionsService.route(request, function (response, status) { 
         if (status == google.maps.DirectionsStatus.OK) { 
          directionsDisplay.setDirections(response); 
          startMarker = new google.maps.Marker({ 
           position: response.request.origin, 
           icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
           map: map 
          }); 
          endMarker = new google.maps.Marker({ 
           position: response.request.destination, 
           icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
           map: map 
          }); 
         } 
        }); 
       } 
       google.maps.event.addDomListener(window, 'load', initialize); 
      </script> 
     </head> 
     <body> 
      <div id="map-canvas"></div> 
     </body> 
    </html>