このモジュールでは、カンファレンスのホテルのリストを返すメソッドを含んだカスタムコントローラを作成します。続いて、JavaScript Remotingでそのメソッドを呼び出すVisualforceページを作成し、Google Maps SDKを使ってマップにホテルを表示させます。
設定 で、 ビルド > 作成 > オブジェクト の順に選択します
新規カスタムオブジェクト をクリックし、次のように定義します:
保存 をクリックします
カスタム項目＆リレーション セクションで 新規 をクリックし、次のようにして 位置情報 という項目を作成します:
次へ 、 次へ 、 保存 の順にクリックします。
ホテルオブジェクトのタブを作成します
Hotel タブに移動し、ホテルのレコードを何件か入力します。その際、次のように、緯度（Latitude）と 経度（Longitude）の情報も指定します:
開発者コンソール（Salesforce画面の右上で自分の名前をクリックし、ドロップダウンメニューから選択）で、File > New > Apex Class の順に選択します。クラス名に HotelRemoter と入力し、 OK をクリックします。
次のようにクラスを実装します:
GitHub
Projectglobal with sharing class HotelRemoter {
@RemoteAction
global static List<Hotel__c> findAll() {
return [SELECT Id, Name, Location__Latitude__s, Location__Longitude__s
FROM Hotel__c];
}
}
ファイルを保存します
開発者コンソールで、 File > New > Visualforce Page の順に選択し、ページ名に HotelMap と入力し、 OK をクリックします
次のようにHotelMapを実装します:
<apex:page sidebar="false" showheader="false">
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(35.6754208, 139.7626623),
zoom: 15
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</apex:page>
ファイルを保存します
Preview ボタン（画面の左上）をクリックし、ブラウザでHotelMapページをテストします
次のようにコードを更新し、HotelRemoterを、Visualforceページ HotelMap のコントローラとして割り当てます:
<apex:page sidebar="false" showheader="false" controller="HotelRemoter">
loadHotels()関数を次のように定義します（initilize()関数の直後）:
function loadHotels() {
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.HotelRemoter.findAll}',
function(result, event){
if (event.status) {
for (var i=0; i<result.length; i++) {
var id = result[i].Id;
var name = result[i].Name;
var lat = result[i].Location__Latitude__s;
var lng = result[i].Location__Longitude__s;
addMarker(id, name, lat, lng);
}
} else {
alert(event.message);
}
},
{escape: true}
);
}
addMarker()関数を次のように定義します（loadHotels()関数の直後）:
function addMarker(id, name, lat, lng) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: name
});
google.maps.event.addListener(marker, 'click', function(event) {
window.top.location = '/' + id;
});
}
loadHotels();
ファイルを保存します
Preview ボタン（画面の左上）をクリックし、ブラウザでHotelMapページをテストします。ステップ1で入力した ホテルの場所にマーカーが表示されることを確認します。