この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

マーカーへの情報ウィンドウの追加

情報ウィンドウを使用すると、地図に詳しい内容を表示できます。情報ウィンドウは、ユーザーがマーカーをクリックまたはタップすると表示されます。

地図のマーカーの title 属性を使用すれば、ユーザーがマーカーにマウスポインターを置いたときに簡単な情報を表示できます。詳しい情報を表示したり、書式を細かく制御したりする場合は、代わりに情報ウィンドウを使用するか、情報ウィンドウと title 属性と併用します。

たとえば、取引先責任者の住所の詳細を最適な書式で表示することができます。また、クリック可能な電話リンクを追加したり、オブジェクトのプロファイル写真 (ある場合) を表示することもできます。

情報ウィンドウを地図のマーカーに追加するには、関連する <apex:mapMarker> の子コンポーネントとして <apex:mapInfoWindow> コンポーネントを追加します。<apex:mapInfoWindow> コンポーネントの本文は、ユーザーがマーカーをクリックまたはタップすると情報ウィンドウに表示され、Visualforce マークアップ、HTML と CSS、またはプレーンテキストを指定できます。

次の完成したページでは、情報ウィンドウのコンテンツに Visualforce マークアップを使用しています。

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/AccountContactsCustomMarker?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 markers for account contacts -->
17      <apex:repeat value="{! Account.Contacts }" var="ct">
18        <apex:mapMarker title="{! ct.Name }" 
19          position="{! ct.MailingStreet },{! ct.MailingCity },{! ct.MailingState }">
20
21          <!-- Add info window with contact details -->
22          <apex:mapInfoWindow >
23            <apex:outputPanel layout="block" style="font-weight: bold;">
24              <apex:outputText>{! ct.Name }</apex:outputText>
25            </apex:outputPanel>
26
27            <apex:outputPanel layout="block">
28              <apex:outputText>{! ct.MailingStreet }</apex:outputText>
29            </apex:outputPanel>               
30
31            <apex:outputPanel layout="block">
32              <apex:outputText>{! ct.MailingCity }, {! ct.MailingState }</apex:outputText>
33            </apex:outputPanel>               
34
35            <apex:outputPanel layout="block">
36              <apex:outputLink value="{! 'tel://' + ct.Phone }">
37                  <apex:outputText>{! ct.Phone }</apex:outputText>
38              </apex:outputLink>
39            </apex:outputPanel>               
40          </apex:mapInfoWindow>
41
42        </apex:mapMarker>
43      </apex:repeat>
44
45      </apex:map>
46    
47    </apex:pageBlockSection>
48  </apex:pageBlock>
49   
50</apex:page>

このコードにより、次の地図が作成されます。

デフォルトで、情報ウィンドウは一度に 1 つのみ表示されます。別のマーカーをクリックすると、最初の情報ウィンドウが閉じ、新しい情報ウィンドウが開きます。複数の情報ウィンドウを表示するには、ウィンドウを含む <apex:map> コンポーネントの showOnlyActiveInfoWindow を false に設定します。

一度に複数の情報ウィンドウを表示すると地図が見づらくなる可能性があるため、この影響を十分に考慮します。

メモ

Visualforce 開発者ガイド

マーカーへの情報ウィンドウの追加