次に、
Visualforce
ページを作成し、ナビゲーションメニューから利用できるようにしましょう。
この
Visualforce
ページは次の項目を参照します。• googleMapsAPIという名前の静的リソース
• FindNearbyという名前の
Apex
クラスこれらはダウンロードしたパッケージに含まれていて、このガイドで使用するため にインストールされています。
Visualforce
ページのFindNearbyWarehousesPageも、パッケージに含まれています。パッケージに含まれているページを使用する場合は、次のステップ「タブを新 規作成する」
(
ページ89)
に進んでください。このページのコードはユーザの現在の場所を使用し、
Google Maps
と統合して、20
マイル以内に存在する倉庫を示した地図を表示します。近くに倉庫がある場合、倉 庫の名前、住所、電話番号と共にピンが地図に表示されます。1. Salesforce
アプリケーションで、[
設定]
から[
開発] > [
ページ]
をクリックし ます。2. [
新規]
をクリックします。3.
[表示ラベル]項目に、「FindNearbyWarehousesPage」と入力します。FindNearbyWarehousesPageページは、インストールしたパッケージに含
まれます。そのため、このコードをコピーして新しいページを作成する場 合、ページを別の名前に変更する必要があります。
4.
[Salesforce モバイルアプリケーションでの使用が可能]チェックボックスをオンにします。
このチェックボックスを選択することは、ページがモバイルに対応してい
て
Salesforce1
で使用できることを示します。5.
次のコードを切り取って[Visualforce Markup]
タブに貼り付けます。<apex:page sidebar="false" showheader="false"
standardController="Warehouse__c"
recordSetVar="warehouses" extensions="FindNearby">
<apex:includeScript value="{!$Resource.googleMapsAPI}" />
<!-- This API key needs to be set up for there to be no JS errors -->
<!--http://salesforcesolutions.blogspot.com/2013/01/
integration-of-salesforcecom-and-google.html-->
<!--<script type="text/javascript"
src="https://maps.googleapis.com/
maps/api/js?key=AIzaSyAVrfZm7_NhbL jHrFPdl242BYV1PBmDPqs&sensor=
false"> </script>-->
<!-- Set up the map to take up the whole window -->
<style>
html, body { height: 100%; }
.page-map, .ui-content, #map-canvas
{ width: 100%; height:100%; padding: 0; }
#map-canvas { height: min-height: 100%; }
</style>
<script>
function initialize() { var lat, lon;
// Check to see if the device has geolocation // detection capabilities with JS
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position){
lat = position.coords.latitude;
lon = position.coords.longitude;
//Use VF Remoting to send values to be //queried in the associated Apex Class Visualforce.remoting.Manager.
invokeAction(
'{!$RemoteAction.FindNearby.
getNearby}', lat, lon,
function(result, event){
if (event.status) { console.log(result);
createMap(lat, lon, result);
} else if (event.type ===
'exception') {
//exception case code } else {
} },
{escape: true}
);
});
} else {
//Set default values for map if the device //doesn't have geolocation capabilities
/** San Francisco **/
lat = 37.77493;
lon = -122.419416;
var result = [];
createMap(lat, lon, result);
}
function createMap(lat, lng, warehouses){
//Grab the map div and center the map at //the proper latitude/longitude
var mapDiv = document.getElementById(
'map-canvas');
var map = new google.maps.Map(mapDiv, { center: new google.maps.LatLng(lat, lng), zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP });
//Set up the markers for the map using the //variable we queried for in our controller var warehouse;
for(var i=0; i<warehouses.length;i++){
warehouse = warehouses[i];
console.log(warehouses[i]);
setupMarker();
}
function setupMarker(){
var content='<a href src="/'+ warehouse.Id + '" >'+
warehouse.Name + '</a><br/>'+
warehouse.Street_Address__c + '<br/>' + warehouse.City__c + '<br/>' + warehouse.Phone__c;
//Create the callout that will pop up //on the marker
var infowindow = new google.maps.
InfoWindow({
content: content });
//Place the marker
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(
warehouse.Location__Latitude__s, warehouse.Location__Longitude__s) });
//Create an action to open the callout google.maps.event.addListener(
marker, 'click', function(){
infowindow.open(map, marker);
});
} }
//Run the initialize function when the window loads google.maps.event.addDomListener(
window, 'load', initialize);
</script>
<body style="font-family: Arial; border: 0 none;">
<div id="map-canvas"></div>
</body>
</apex:page>
6. [
保存]
をクリックします。これで、倉庫を検索する
Visualforce
ページを作成できました。次のステップでは、ページのタブを作成します。その後に、