地図への場所マーカーの追加
<apex:mapMarker> コンポーネントを使用して地図にマーカーを追加すると、特定の場所を示すことができます。マウスポインターをマーカーに置いたときに表示されるテキストを含めることもできます。
地図にマーカーを配置するには、関連する <apex:map> の子として <apex:mapMarker> コンポーネントを追加します。マーカーの場所を position 属性で指定します。必要に応じて、title 属性を使用して、マウスポインターをマーカーに置いたときにテキストが表示されるようにします。
地図には、最大 100 個のマーカーを追加できます。コレクションまたはリストから複数のマーカーを追加するには、<apex:repeat> 反復コンポーネントを使用します。
position 属性は、マーカーを配置する地図上の点を定義します。position 値をさまざまな形式で指定できます。
- 住所を表す文字列。たとえば、「1 Market Street, San Francisco, CA」のようになります。住所は地理コード化され、緯度と経度が決まります。
- 場所の座標を指定する latitude および longitude 属性を含む JSON オブジェクトを表す文字列。たとえば、「{latitude: 37.794, longitude: -122.395}」のようになります。
- 場所の座標を指定する latitude および longitude キーを含む、Map<String, Double> 型の Apex 地図オブジェクト。
次に、取引先の住所を中心にした、取引先の取引先責任者のリストを表示するページを示します。
このコードにより、次の地図が作成されます。
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/NearbyContacts?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 <apex:repeat value="{! Account.Contacts }" var="contact">
17 <apex:mapMarker title="{! contact.Name }"
18 position="{!contact.MailingStreet},{!contact.MailingCity},{!contact.MailingState}"
19 />
20 </apex:repeat>
21
22 </apex:map>
23
24 </apex:pageBlockSection>
25 </apex:pageBlock>
26
27</apex:page>
この例については、次の点に注意してください。
- center および position 属性は、住所要素を連結して地理コード化できる住所文字列を提供する Visualforce 式として渡されています。
- このページでは住所に地理コード化を使用しているため、最初の 9 件の取引先責任者のみが表示されます。地理コード化検索の上限は 10 件ですが、<apex:map> の center 属性がその 1 つを使用します (上図では、取引先に取引先責任者が 3 人しかいません)。