Google Maps APIで静的な方向を表示する方法

-1

私の旅程に関するいくつかの地図を自分のサイトに追加したいと思います。Google Maps APIで静的な方向を表示する方法

私はGoogle Maps Javascript APIでカスタマイズしたスタイルを作成しました。ユーザーが出発地と目的地、

を挿入することができますが、私はそれをしたくないので、私が見てきた

すべての例では、HTMLファイル内の入力が含まれています。私の目標は、オーランドからキーウエストなど、自分のスタイルで「静的な」地図だけを表示することです。

コードを教えてもらえますか？

ありがとうございました！

これは私のカスタムスタイルです：

function initMap() { 
    var customMapType = new google.maps.StyledMapType([ 
     { 
     "featureType": "all", 
     "elementType": "all", 
     "stylers": [ 
      { 
       "invert_lightness": true 
      }, 
      { 
       "saturation": 10 
      }, 
      { 
       "lightness": 30 
      }, 
      { 
       "gamma": 0.5 
      }, 
      { 
       "hue": "#435158" 
      } 
     ] 
    }, 
    { 
     "featureType": "water", 
     "elementType": "all", 
     "stylers": [ 
      { 
       "saturation": "0" 
      }, 
      { 
       "lightness": "6" 
      }, 
      { 
       "gamma": "1" 
      } 
     ] 
    } 
    ], { 
     name: 'Leonardo' 
    }); 
    var customMapTypeId = 'custom_style'; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 7, 
    center: {lat: 28, lng: -81.946}, // Florida. 
    mapTypeControlOptions: { 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId] 
    } 
    }); 




    map.mapTypes.set(customMapTypeId, customMapType); 
    map.setMapTypeId(customMapTypeId); 
}

出典

2016-03-27 Leonardo

[静的マップAPI]（https://developers.google.com/maps/documentation/static-maps/intro#Paths）のように_「静的」_マップを使用していますか場所間に道を引く？またはJavascript APIを使用するだけで、[ここの例]（https://developers.google.com/maps/documentation/javascript/examples/directions-simple）のようなフォームフィールドとイベントリスナーを使用する代わりに、あなたの起源がありますあなたのjavascriptでハードコードされた宛先？ – duncan

フォームフィールドを使わずに、原点と目的地がハードコードされたJavascript APIを使用するだけです！ありがとうございました！ – Leonardo

は、ここでそれを行う方法の例です。

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map { 
      height: 100%; 
      margin: 0px; 
      padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
     function initMap() { 
      var customMapType = new google.maps.StyledMapType(
       [ 
        { 
         "featureType": "all", 
         "elementType": "all", 
         "stylers": [ 
          {"invert_lightness": true}, 
          {"saturation": 10}, 
          {"lightness": 30}, 
          {"gamma": 0.5}, 
          {"hue": "#435158"} 
         ] 
        }, 
        { 
         "featureType": "water", 
         "elementType": "all", 
         "stylers": [ 
          {"saturation": "0"}, 
          {"lightness": "6"}, 
          {"gamma": "1"} 
         ] 
        } 
       ], 
       {name: 'Leonardo'} 
      ); 
      var customMapTypeId = 'custom_style'; 

      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 7, 
       center: {lat: 28, lng: -81.946}, // Florida. 
       mapTypeControlOptions: { 
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId] 
       } 
      }); 

      var directionsService = new google.maps.DirectionsService(); 
      var directionsDisplay = new google.maps.DirectionsRenderer({ 
       map: map 
      }); 

      var start = new google.maps.LatLng(28, -81.946); 
      var end = new google.maps.LatLng(41.85, -87.65); 

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

      directionsService.route(request, function(result, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        directionsDisplay.setDirections(result); 
       } 
      }); 

      map.mapTypes.set(customMapTypeId, customMapType); 
      map.setMapTypeId(customMapTypeId); 
     } 

     google.maps.event.addDomListener(window, 'load', initMap); 
    </script> 
</head> 
<body> 
    <div id="map"></div> 
</body> 
</html>

出典

2016-03-28 09:42:17 duncan

ありがとうございました！それは完璧だ！ – Leonardo

Google Maps APIで静的な方向を表示する方法

答えて

関連する問題