2010-11-30 9 views
9

DirectionsRenderを使用してルートを細かくプロットしましたが、一般的なGoogleマーカーを自分のものに置き換える方法がわかりません。Google Maps v3 APIで開始および終了マーカー画像を変更する方法

私はこれを通常のGoogleマップの状況では知っていますが、開始と終了のための方向マーカーでこれを行うことは困難です。何かアドバイス、ポインタまたは穏やかあざけるため

おかげで、これは愚かな質問である場合:D

マイケル

答えて

3

これはあなたが示すように

は、すべての画像アイコンを宣言し、それにアプローチする必要があるかでありますマーカーを作成中

var movingIcon = new google.maps.MarkerImage('/img/icon_moving.jpg'); 
var startIcon = new google.maps.MarkerImage('/img/icon_start.png'); 

下に続いて、ICを使用そのマーカーに特定の画像を設定するオプションに

marker = new google.maps.Marker({ 
      position: point, 
      map: map, 
      icon: movingIcon 
      }); 
+2

マーカーの向きを変更する方法を尋ねていましたが、マーカーアイコンを変更する方法にのみ対応しています。 –

6

DirectionRendermarkerOptionsと呼ばれるオプションを取ります。 APIからの引用:

DirectionsRendererによってレンダリングされたすべてのマーカーは、これらのオプションを使用します。

したがって、マーカーを設定する場合は、MarkerImageを使用してください(philarが示すように)。

もう1つの方法はDirectionRenderのオプションにsuppressMarkers: trueを渡してから、独自のマーカーを使用することです。

2

まず、あなたはその後、オプションなどの後に...

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
//you set your custom image 
var image = new google.maps.MarkerImage('images/image.png', 
        new google.maps.Size(129, 42), 
        new google.maps.Point(0,0), 
        new google.maps.Point(18, 42) 
       ); 

//you set your icon for each of the direction points Origin 
       var marker1 = new google.maps.Marker({ 
        position: new google.maps.LatLng(19.432651,-99.133201), 
        map: map, 
        icon: image 
       }); 
//you set your icon for each of the direction points Destination, 
       var marker2 = new google.maps.Marker({ 
        position: new google.maps.LatLng(45.508648,-73.55399), 
        map: map, 
        icon: image 
       }); 

あなたはまた、出発地と目的地のために異なるアイコンを追加することができ、あなたのDirectionsRenderer

directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true}); 
//to hide the default icons 

にこれを追加する必要があります。 var画像で遊んで、 それは私のために働く!

関連する問題