Synergy!LEAD

リード詳細画面にGoogleマップを表示させるには？

デフォルトの住所項目で住所を管理する場合、自動的にGoogleマップが表示されます。

カスタム項目でリードの住所情報を管理したい場合でもSalesforce の機能「Visualforceページ」を利用すれば、そのリードの住所情報をもとに「Googleマップ」を表示することが可能です。以下に簡単ではありますが、リードの詳細画面にGoogleマップを表示させる方法を紹介します。

Googleマップ表示用の Visualforceページを作成する手順

  1. [ 設定 ] | [ クイック検索 ] にて「ページ」を入力し、[ Visualforceページ ] を選択します。 [ 新規 ] をクリックして新規作成画面に進みます。
    1_Visualforceページ一覧
  2. 「表示ラベル」「名前」に任意の値を入力し、画面下の「Visualforce Markup」にページ用のソースコードを入力して [ 保存 ] をクリックします。
    POINT
    リードおよび取引先責任者用のソースコードをページ下部に記載しています。
    2_リード用map連携VF
  3. リードの詳細画面に作成したVisualforceページを表示させるため、ページレイアウトを編集します。[設定] | [ クイック検索 ] にて「ページレイアウト」と入力、選択し、編集するレイアウトを選択します。
    3_リードページレイアウト
    POINT
    上記画像ではレイアウトは1つのみですが、ご利用の組織では複数存在する可能性があります。用途に合わせて編集対象のレイアウトを選択してください。
  4. レイアウト編集画面上に表示されるパレットから「Visualforceページ」を選択し、作成した Visualforce をドラッグ & ドロップで詳細画面に設置します。設置後、[ 保存 ] をクリックします。
    4_ページレイアウト編集
  5. 任意のリードを選択し詳細画面を表示すると、リードに設定された住所にもとづいてGoogleマップが表示されます。
    5_リード詳細_マップ表示
POINT
このページでは「リード」での設定方法を記載していますが、リードを取引先責任者を置き換えることで、取引先責任者の詳細画面にも Googleマップを設定できます。

Googleマップ表示用の Visualforceページを作成する手順

  1.  [ 歯車マーク ] | [ 設定 ] | [ クイック検索 ] に「ページ」を入力し、[ Visualforceページ ] を選択します。 [ 新規 ] をクリックして新規作成画面に進みます。
  2. 「表示ラベル」「名前」に任意の値を入力し、画面下の「Visualforce Markup」にページ用のソースコードを入力して [ 保存 ] をクリックします。
    POINT
    リードおよび取引先責任者用のソースコードをページ下部に記載しています。
  3. リードの詳細画面に作成した Visualforceページを表示させるため、ページレイアウトを編集します。[ 歯車マーク ] | [ 設定 ] | [ オブジェクトマネージャ ] | [ リード ] | [ ページレイアウト ] を選択し、編集するレイアウトを選択してください。
    POINT
    上記画像ではレイアウトは1つのみですが、ご利用の組織では複数存在する可能性があります。用途に合わせて編集対象のレイアウトを選択してください。
  4. レイアウト編集画面上に表示されるパレットから「Visualforceページ」を選択し、作成した Visualforce をドラッグ & ドロップで詳細画面に設置します。設置後、[ 保存 ] をクリックします。
  5. 任意のリードを選択し詳細画面を表示すると、リードに設定された住所にもとづいて Googleマップが表示されます。
POINT
このページでは「リード」での設定方法を記載していますが、リードを取引先責任者を置き換えることで、取引先責任者の詳細画面にも Googleマップを設定できます。

Visualforceページ ソースコード サンプル

<apex:page standardController="Lead" standardStylesheets="false" showHeader="false">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.google.co.jp/maps/api/js?sensor=false"></script>

<script type="text/javascript">  
google.maps.event.addDomListener(window, 'load', function() {

    var myOptions = {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map;
    var marker;

    var leadCompany = "{!HTMLENCODE(Lead.Company)}";
    var address = "{!HTMLENCODE(Lead.PostalCode)} {!HTMLENCODE(Lead.Country)} {!HTMLENCODE(Lead.State)} {!HTMLENCODE(Lead.City)} {!HTMLENCODE(Lead.Street)}";
    
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow({
        content: "<b>" + leadCompany + "</b><br>" + address
    });

    geocoder.geocode( { address: address}, function(results, status) {

        var mapEle = document.getElementById("map");
        if (status == google.maps.GeocoderStatus.OK && results.length) {

            if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                //マップの生成
                map = new google.maps.Map(mapEle, myOptions);

                //マップのセンターを設定
                map.setCenter(results[0].geometry.location);
                //マーカーの設定
                var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map, 
                    title:leadCompany
                }); 
                
                var info = new google.maps.InfoWindow({
                    content: "<b>" + leadCompany + "</b><br>" + address
                });
                google.maps.event.addListener(marker ,'click', function() {
                    info.open(map,marker);
                });
                info.open(map,marker);
            }
        } else {
            //取得NG
            //error
            mapEle.innerHTML= leadCompany + " の位置情報が正しく取得できませんでした。";
            resizeIframe();
        }
    });


    function resizeIframe() {
        var me = window.name;
        if (me) {
        var iframes = parent.document.getElementsByName(me);
            if (iframes && iframes.length == 1) {
                height = document.body.offsetHeight;
                iframes[0].style.height = height + "px";
            }
        }
    }

});
</script>
 
<style>
#map {
    font-family: Arial;
    font-size:12px;
    line-height:normal !important;
    height:450px;
    background:transparent;
}
</style>
 
</head>

<body>
<div id="map"></div> 
</body> 

</apex:page>

<apex:page standardController="Contact" standardStylesheets="false" showHeader="false">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.google.co.jp/maps/api/js?sensor=false"></script>

<script type="text/javascript">  
google.maps.event.addDomListener(window, 'load', function() {

    var myOptions = {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map;
    var marker;

    var accountName = "{!HTMLENCODE(Contact.Account.Name)}";
    var address = "{!HTMLENCODE(Contact.MailingPostalCode)} {!HTMLENCODE(Contact.MailingCountry)} {!HTMLENCODE(Contact.MailingState)} {!HTMLENCODE(Contact.MailingCity)} {!HTMLENCODE(Contact.MailingStreet)}";
    
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow({
        content: "<b>" + accountName + "</b><br>" + address
    });

    geocoder.geocode( { address: address}, function(results, status) {

        var mapEle = document.getElementById("map");
        if (status == google.maps.GeocoderStatus.OK && results.length) {

            if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                //マップの生成
                map = new google.maps.Map(mapEle, myOptions);

                //マップのセンターを設定
                map.setCenter(results[0].geometry.location);
                //マーカーの設定
                var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map, 
                    title:accountName
                }); 
                
                var info = new google.maps.InfoWindow({
                    content: "<b>" + accountName + "</b><br>" + address
                });
                google.maps.event.addListener(marker ,'click', function() {
                    info.open(map,marker);
                });
                info.open(map,marker);
            }
        } else {
            //取得NG
            //error
            mapEle.innerHTML= accountName + " の位置情報が正しく取得できませんでした。";
            resizeIframe();
        }
    });


    function resizeIframe() {
        var me = window.name;
        if (me) {
        var iframes = parent.document.getElementsByName(me);
            if (iframes && iframes.length == 1) {
                height = document.body.offsetHeight;
                iframes[0].style.height = height + "px";
            }
        }
    }

});
</script>
 
<style>
#map {
    font-family: Arial;
    font-size:12px;
    line-height:normal !important;
    height:450px;
    background:transparent;
}
</style>
 
</head>

<body>
<div id="map"></div> 
</body> 

</apex:page>

メール配信

フォーム作成

Webトラッキング

Salesforce

仕様

Synergy!LEAD サポート

お問い合わせ窓口 https://sngy.ly/synergylead-support

対応時間平日10時～12時　13時～18時

※お問い合わせにはメールで対応しております。


最新情報と便利な使い方をメルマガでお届け！

『Synergy!LEAD プラスワン』 ご登録は こちら から

※ご契約社さま限定のサービスとなります。

ページのトップへ戻る