Visualforce 開発者ガイド
jカスタムマーカーアイコンの使用
Visualforce の地図マーカーアイコンは、シンプルながら機能的です。マーカーを区別する場合や、地図に詳細やスタイルを追加する場合は、カスタムの地図マーカーアイコンを使用します。
マーカーのアイコンをカスタマイズするには、icon 属性を使用するグラフィックの絶対または完全修飾 URL に設定します。グラフィックが CDN で配布されているなどの場合には、任意の画像を Web で参照できます。また、グラフィックを静的リソースに保存することもできます。静的リソースの画像を使用する場合は、URLFOR() 関数を使用して画像 URL を取得します。次に例を示します。
1<apex:mapMarker title="{! Account.Name }"
2 position="{!Account.BillingStreet},{!Account.BillingCity},{!Account.BillingState}"
3 icon="{! URLFOR($Resource.MapMarkers, 'moderntower.png') }" />PNG、GIF、JPEG など、一般的なグラフィック形式を使用します。推奨されるマーカーサイズは、32 × 32 ピクセルです。他のサイズは拡大縮小され、常に理想的な結果とならない可能性があります。
次の完全なページは、カスタムマーカーを使用して取引先の場所を示し、標準マーカーで取引先の取引先責任者を示すものです。
1<apex:page standardController="Account">
2
3 <!-- This page must be accessed with an Account Id in the URL. For example:
4 https://MyDomainName--c.vf.force.com/apex/AccountContacts?id=001D000000JRBet -->
5
6 <apex:pageBlock >
7 <apex:pageBlockSection title="Contacts For {! Account.Name }">
8
9 <apex:dataList value="{! Account.Contacts }" var="contact">
10 <apex:outputText value="{! contact.Name }" />
11 </apex:dataList>
12
13 <apex:map width="600px" height="400px" mapType="roadmap"
14 center="{!Account.BillingStreet},{!Account.BillingCity},{!Account.BillingState}">
15
16 <!-- Add a CUSTOM map marker for the account itself -->
17 <apex:mapMarker title="{! Account.Name }"
18 position="{!Account.BillingStreet},{!Account.BillingCity},{!Account.BillingState}"
19 icon="{! URLFOR($Resource.MapMarkers, 'moderntower.png') }"/>
20
21 <!-- Add STANDARD markers for the account's contacts -->
22 <apex:repeat value="{! Account.Contacts }" var="ct">
23 <apex:mapMarker title="{! ct.Name }"
24 position="{! ct.MailingStreet },{! ct.MailingCity },{! ct.MailingState }">
25 </apex:mapMarker>
26 </apex:repeat>
27
28 </apex:map>
29
30 </apex:pageBlockSection>
31 </apex:pageBlock>
32
33</apex:page>このコードにより、次の地図が作成されます。
<apex:repeat> など、反復内で追加されたマーカーに異なるアイコンを使用するには、反復変数に関連する式を使用して URL を定義します。この簡単な方法は、レコードの参照項目の名前の付いたアイコンを使用することです。もう 1 つの方法は、カスタム数式項目にアイコン名を指定することです。
以下は上記の <apex:repeat> ブロックですが、取引先責任者オブジェクトに「ContactType__c」という名前のカスタム項目があり、取引先責任者のタイプごとに対応する名前のアイコンがあると想定した場合のバリエーションです。
1<!-- Add CUSTOM markers for the account's contacts -->
2 <apex:repeat value="{! Account.Contacts }" var="ct">
3 <apex:mapMarker title="{! ct.Name }"
4 position="{! ct.MailingStreet },{! ct.MailingCity },{! ct.MailingState }"
5 icon="{! URLFOR($Resource.MapMarkers, ct.ContactType__c + '.png') }">
6 </apex:mapMarker>
7 </apex:repeat>