外部サービス連携

VisualforceのPDFにGoogleマップへのリンクを表示

取引先の位置情報（緯度経度）から組み立てたGoogleマップのURLを、VisualforceのPDFへクリックできるリンクとして埋め込む方法です。PDF化に必要な属性の指定もあわせて示します。

2024.03.11

なぜPDFからGoogleマップへ直接リンクするのか

PDFの中の住所をタップすると地図アプリが開く、というのは受け取った人にとって親切です。仕組みは単純で、緯度経度などの位置情報から組み立てたGoogleマップのURLを、通常のハイパーリンクとして出力するだけです。QRコードのように画像を外部から取得する必要がないので、リモートサイト設定などの追加の手間もありません。

位置情報からGoogleマップのURLを組み立てる

取引先に、緯度経度を保持する項目と、そこからGoogleマップのURLを組み立てる数式項目を用意します。

  1. 緯度経度を保持する項目を用意する

    取引先オブジェクトに、緯度・経度の値をテキストまたは地理位置情報型で保持する項目を作成します。

  2. GoogleマップのURLを組み立てる数式項目を作成する

    作成した項目の値を使って、Googleマップで開けるURLの文字列を返す数式項目を作成します。数式の例を次に示します。

取引先のカスタム項目LocationNumの定義画面。データ型は地理位置情報
緯度経度を保持する項目です。データ型が地理位置情報になっている点を見てください。
カスタム項目 住所GoogleMap の定義画面。下部の数式オプションに数式が並ぶ
URLを組み立てる数式項目です。画面いちばん下の数式オプションの行を見てください。
"https://www.google.com/maps?q=" & TEXT(LocationNum__Latitude__s) & "," & TEXT(LocationNum__Longitude__s)

数式項目の例です。緯度経度を保持するLocationNumから、GoogleマップのURLを組み立てます。

地理位置情報型の項目は、数式ではLocationNum__Latitude__s・LocationNum__Longitude__sのように緯度と経度を別々に参照します。TEXT()は数値や日付を文字列に変換する関数で、&は文字列をつなげる演算子です。実際に使う地図サービスのURLの仕様（緯度と経度をどの順番で、どんな区切り文字でつなぐか）は、利用するサービス側の仕様に沿って組み立ててください。

Visualforceページでリンクを表示する

<apex:page renderAs="pdf" applyHtmlTag="false" showHeader="false" standardController="Account">
<head>
<style type="text/css">
body {
    font-family: "Arial Unicode MS";
    font-size: 12px;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th {
    border: 1px solid #000;
    color: #FFF;
    background-color: #0B5394;
    height: 50px;
    padding: 5px;
}
td {
    border: 1px solid #000;
    text-align: center;
    height: 30px;
}
</style>
</head>
<body>
<table>
<thead>
<tr><th colspan="2">Google Map ハイパーリンク</th></tr>
</thead>
<tbody>
<tr>
<td>住所</td>
<td><a href="{!Account.AddressGoogleMap__c}">地図を開く</a></td>
</tr>
</tbody>
</table>
</body>
</apex:page>

apex:pageのrenderAs="pdf"でPDF化します。数式項目のURLをそのままa要素のhrefに渡しています。

PDFにするには、apex:pageにrenderAs="pdf"を指定します。これが無いと、PDFではなくVisualforceの通常のHTMLページとして表示されるだけになります。表の見出し行の文字列は、<th>で囲みます。生成後のPDFをPDFビューアで開いて、リンクが動作するかを確かめてください。

取引先アクション 住所GoogleMap の詳細画面。VisualforceページにSampleHyperlinkを指定
作ったページをアクションとして登録した画面です。Visualforceページと高さの指定を見てください。

取引先の詳細画面でも同じリンクを開ける

数式項目はページレイアウトに配置するだけで、取引先の詳細画面からもクリックできます。VisualforceのPDFの中のリンクと、詳細画面の項目のリンクは、どちらも同じ数式項目のURLを使っているだけで、仕組みは別ではありません。

取引先test1の詳細画面ヘッダー。右上に住所GoogleMapのボタンが並んでいる
取引先の詳細画面です。右上の住所GoogleMapボタンから、作ったページを開きます。
取引先の項目表示。LocationNumの緯度経度と、住所GoogleMapのURLが並んでいる
数式項目が返したURLです。詳細画面でも、そのままリンクとして押せます。

動作確認

  1. 取引先の詳細画面でリンクを確認する

    住所GoogleMap項目のリンクを押して、Googleマップが開くことを確認します。

  2. 作成したアクションを押す

    Visualforceページを呼び出すアクションを押して、PDFが開くことを確認します。

  3. PDFの中のリンクを確認する

    PDFビューアの中でリンクを押し、Googleマップが開くことを確認します。

Googleマップが東京タワーの位置を表示している画面
詳細画面のリンクを押した結果です。数式項目が組み立てたURLで地図が開きます。
出力の中のリンクから開いたGoogleマップ。東京タワーの位置が示されている
出力の中のリンクを押した結果です。ここまで開ければ動作確認は終わりです。

ここで間違えやすい

タイトルに「PDF」と書いてあっても、apex:pageにrenderAs="pdf"が無ければPDFにはなりません。PDF化を前提にしたコードを流用するときは、renderAs属性の有無を必ず確認してください。
間違い何が起きるか
renderAs="pdf"を付け忘れるブラウザにそのままHTMLとして表示され、PDFにならない
見出し行の直下に文字列を直接置く表の見出し行が崩れる。<th>や<td>で囲む
PDFの中のリンク動作を確認しないまま公開するクリックしても地図が開かない状態に気づかない
地図サービス側のURL仕様の変更に気づかない数式項目が古い形式のURLを返し続け、リンクが開かなくなる

確認した環境

  • 2026年9月 ／ Salesforce Summer '26（APIバージョン67.0）時点の公式ドキュメントで、apex:pageの属性とPDFレンダリングの制約一覧を確認しています

まとめ

  • 緯度経度から組み立てたGoogleマップのURLは、通常のハイパーリンクとしてVisualforceのページに置くだけでPDFに反映できます
  • QRコードと違って外部の画像を取得しないので、リモートサイト設定は不要です
  • PDFにするには、apex:pageのrenderAs="pdf"が必須です
  • 表の見出し行に文字列を直接置かず、<th>や<td>で囲んでください
  • リンクが生成後のPDFで実際にクリックできるかは、生成したPDFを開いて確かめてください

参考：当時の画面

記事を最初に書いた当時の画面です。いまの手順と違うところは、各画像の説明に書いています。

住所GoogleMapのアクション画面。表の中に東京タワーのリンクが表示されている
アクションを押した結果です。表の中のリンクが押せる状態かを見てください。
ブログ一覧に戻る前の記事：ApexからfaximoSilverのFAX送信APIを呼ぶ実装次の記事：Pipelineでのメタデータ移行と標準ツール代替

Salesforceの導入・運用についてご相談ください

導入前の検討から、お使いの環境の改修・運用、AIとの連携まで承ります。状況を伺ったうえで、進め方をご提案します。

お問い合わせ