Apex Code Development You need to sign in to do that
Don't have an account?
nabemaru GoogleMapページのS-ControlからVisualForceへの移植について
先日、Developer Editionを取得して開発をすすていたのですが、
2010/2～の開発環境には、【S-Control】が見当たりませんでした。
そこで、以前S-Controlを利用して作成していたGoogleMap表示画面を
VisualForceに移植しようと試みているのですが、
うまくキャンバスを表示してくれません。
（USのディスカッションボードを見ても、解決策がうまく見つからなかったです。
セキュリティ的にどうのこうのとあるのですが、MAP APIをいろいろなURLで取得するも
うまく表示してくれません。）
どなたか、Google Map表示画面をVisualForce画面で実現された方が
いらっしゃいましたら、よろしくHELP頂ければと思います。
尚、開発環境等の情報を以下に記載します。
・サーバ：https://na7.salesforce.com
・ビジュアルフォースレンダリングサーバ：https://c.na7.visual.force.com/apex
・Google MAPのKEYは、 https://c.na7.visual.force.comで取得しました。
コード：
<apex:page standardController="Building__c" showheader="false">
<html>
<head>
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=ABQIAAAAyTMUWKwiTouoUpHGLVq-nhRn347FFc3A8pwveefGWGZ94j713RSWACXNLfEJoToWxelZWuERV03vVQ" type="text/javascript"></script>
<script type="text/javascript">
var map;
var geocoder = null;
//エントリポイント
function init() {
var Home_Obj = new Array();
Home_Obj.type = "Home";
Home_Obj.name = '{!$Organization.Name}';
Home_Obj.add = '{!$Organization.State}'
+ '{!$Organization.City}'
+ '{!$Organization.Street}';
Home_Obj.phone = '{!$Organization.Phone}';
//緯度経度を調べて記入
Home_Obj.Lat=**.******; Home_Obj.Lng=***.******;
Home_Obj.pin="rangerstation.png";
Home_Obj.shadow="rangerstation_shadow.png";
// Google Map 初期化作業
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(Home_Obj.Lat, Home_Obj.Lng), 16);
//ホーム描画
getGeopoint(Home_Obj);
}
}
//位置情報（緯度・経度）を取得する
function getGeopoint(Obj) {
// Googleのジオコーディングサービスを利用して住所から位置情報を取得
geocoder = new GClientGeocoder();
var address = Obj.add;
geocoder.getLatLng(address, function(point) {
Obj.Lat = point.lat();
Obj.Lng = point.lng();
plotMap(Obj);
}
);
}
//地図上にプロットする
function plotMap(Obj) {
//アイコン作成
var icon1 = new GIcon();
icon1.image = "http://maps.google.co.jp/mapfiles/ms/icons/"
+ Obj.pin;
icon1.shadow = "http://maps.google.co.jp/mapfiles/ms/icons/"
+ Obj.shadow;
icon1.iconSize = new GSize(32, 32);
icon1.shadowSize = new GSize(59, 32);
icon1.iconAnchor = new GPoint(16, 32);
icon1.infoWindowAnchor = new GPoint(16, 0);
//表示内容作成
var html = '<div><b>' + Obj.type + '</b></div>' +
'<div>建物名： '+Obj.name+'</div>' +
'<div>住所： '+Obj.add+'</div>';
//ピン描画
var marker = new GMarker(new GLatLng(Obj.Lat, Obj.Lng),icon1);
map.setCenter(new GLatLng(Obj.Lat, Obj.Lng), 16);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);
}
</script>
</head>
<body onload="init()" onunload="GUnload()">
メモ欄<br>
<textarea cols="40" rows="5" wrap="virtual" id="code" name="code"></textarea>
<input type="button" value="このページを印刷" onclick="window.print();" /><br/>
<div id="map_canvas" style="margin: 10 auto; width: 100%; height: 80%"></div>
</body>
</html>
</apex:page>
以上よろしくご教示のほどお願いいたします。
にnabemaruにより編集されたメッセージにnabemaruにより編集されたメッセージ
自己フォローです。
なんだかんだと調べていたら、
コードシェア－
にたどり着き、結局、
Google Map API
とか、
Google Visualization: Map
に行き着きました。
そこで、いろいろ調べていたら、
どうもGoogle Map APIの使い方が、S-Controlを使っていた当時（２年前くらい？）と
変わっていたようで、 以下のコードサンプルの赤い部分に変更することで、
うまく動き始めました。
ということで、S-Controlだから、VisualForceだからが、原因ではなくて、
Google Map APIの利用方法に問題があったみたいでした。
ちなみに、コード内の緯度・経度は、適当な数値を入れてください。
本当にはまってしまって、無駄な時間を過ごしてましたが、これでなんとかなりそうです。
<apex:page showheader="false">
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=
ABQIAAAAccVdb8XwGgqiGrWYuhIkBxRn347FFc3A8pwveefGWGZ94j713RTF245HM_1esXR7TuUh5waC0ttRjQ">
</script>
<script type="text/javascript">
google.load("maps", "2.x");
var map;
var geocoder = null;
// Call this function when the page has been loaded
function initialize() {
map = new google.maps.Map2(document.getElementById("map_div"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new google.maps.LatLng(**.******, ***.******), 13);
var Home_Obj = new Array();
Home_Obj.type = "Home";
Home_Obj.name = '{!$Organization.Name}';
Home_Obj.add = '{!$Organization.State}' + '{!$Organization.City}' + '{!$Organization.Street}';
Home_Obj.bill = "";
Home_Obj.phone = '{!$Organization.Phone}';
Home_Obj.Lat=**.******; //緯度経度を調べて記入
Home_Obj.Lng=***.******;//緯度経度を調べて記入
Home_Obj.pin="rangerstation.png";
Home_Obj.shadow="rangerstation_shadow.png";
//ホーム描画
getGeopoint(Home_Obj);
}
//位置情報（緯度・経度）を取得する
function getGeopoint(Obj) {
// Googleのジオコーディングサービスを利用して住所から位置情報を取得
geocoder = new GClientGeocoder();
var address = Obj.add;
geocoder.getLatLng(address, function(point) {
Obj.Lat = point.lat();
Obj.Lng = point.lng();
plotMap(Obj);
});
}
//地図上にプロットする
function plotMap(Obj) {
//アイコン作成
var icon1 = new GIcon();
icon1.image = "http://maps.google.co.jp/mapfiles/ms/icons/" + Obj.pin;
icon1.shadow = "http://maps.google.co.jp/mapfiles/ms/icons/" + Obj.shadow;
icon1.iconSize = new GSize(32, 32);
icon1.shadowSize = new GSize(59, 32);
icon1.iconAnchor = new GPoint(16, 32);
icon1.infoWindowAnchor = new GPoint(16, 0);
//表示内容作成
var html = '<div><b>' + Obj.type + '</b></div>' +
'<div>建物名： '+Obj.name+'</div>' +
'<div>住所： '+Obj.add+'</div>';
//ピン描画
var marker = new GMarker(new GLatLng(Obj.Lat, Obj.Lng),icon1);
map.setCenter(new GLatLng(Obj.Lat, Obj.Lng), 16);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body onLoad="initialize()" onunload="GUnload()">
メモ欄<br/>
<textarea cols="40" rows="5" wrap="virtual" id="code" name="code"></textarea>
<input type="button" value="このページを印刷" onclick="window.print();" /><br/>
<div id="map_div" style="width: 600px; height: 600px"></div>
</body>
</html>
</apex:page>
にnabemaruにより編集されたメッセージAll Answers
以下の箇所でSyntax Error が発生しておりスクリプトが完全に実行されていないため
GoogleMapが表示されていないようです。
Syntax Error が発生箇所
Home_Obj.Lat=**.******; Home_Obj.Lng=***.******;
コメントアウトするととりあえずGoogleMapが表示されるのが確認できました。
※Apex：Pageタグのカスタムオブジェクトは記述から削除しました。
<apex:page showheader="false" > <html> <head> <script src="http://maps.google.co.jp/maps?file=api&v=2&key=ABQIAAAAyTMUWKwiTouoUpHGLVq-nhRn347FFc3A8pwveefGWGZ94j713RSWACXNLfEJoToWxelZWuERV03vVQ" type="text/javascript"> </script> <script type="text/javascript"> var map; var geocoder = null; //エントリポイント function init() { var Home_Obj = new Array(); Home_Obj.type = "Home"; Home_Obj.name = '{!$Organization.Name}'; Home_Obj.add = '{!$Organization.State}' + '{!$Organization.City}' + '{!$Organization.Street}'; Home_Obj.phone = '{!$Organization.Phone}'; //緯度経度を調べて記入 //Home_Obj.Lat=**.******; //Home_Obj.Lng=***.******; Home_Obj.pin="rangerstation.png"; Home_Obj.shadow="rangerstation_shadow.png"; // Google Map 初期化作業 if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GOverviewMapControl()); map.setCenter(new GLatLng(Home_Obj.Lat, Home_Obj.Lng), 16); //ホーム描画 getGeopoint(Home_Obj); } } //位置情報（緯度・経度）を取得する function getGeopoint(Obj) { // Googleのジオコーディングサービスを利用して住所から位置情報を取得 geocoder = new GClientGeocoder(); var address = Obj.add; geocoder.getLatLng(address, function(point) { Obj.Lat = point.lat(); Obj.Lng = point.lng(); plotMap(Obj); } ); } //地図上にプロットする function plotMap(Obj) { //アイコン作成 var icon1 = new GIcon(); icon1.image = "http://maps.google.co.jp/mapfiles/ms/icons/" + Obj.pin; icon1.shadow = "http://maps.google.co.jp/mapfiles/ms/icons/" + Obj.shadow; icon1.iconSize = new GSize(32, 32); icon1.shadowSize = new GSize(59, 32); icon1.iconAnchor = new GPoint(16, 32); icon1.infoWindowAnchor = new GPoint(16, 0); //表示内容作成 var html = '<div><b>' + Obj.type + '</b></div>' + '<div>建物名： '+Obj.name+'</div>' + '<div>住所： '+Obj.add+'</div>'; //ピン描画 var marker = new GMarker(new GLatLng(Obj.Lat, Obj.Lng),icon1); map.setCenter(new GLatLng(Obj.Lat, Obj.Lng), 16); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); map.addOverlay(marker); } </script> </head> <body onload="init()" onunload="GUnload()"> メモ欄<br> <textarea cols="40" rows="5" wrap="virtual" id="code" name="code"></textarea> <input type="button" value="このページを印刷" onclick="window.print();" /><br/> <div id="map_canvas" style="margin: 10 auto; width: 100%; height: 80%"></div> </body> </html> </apex:page>
Hikeyさん
コメントありがとうございます。
ホームの緯度・経度は、わざと*に変換して張り付けていました。
説明が足らず、フォロー頂きありがとうございました。
ところで、Hikeyさんが試された環境は、
na7.salesforce.com
でしょうか？
あ、追加の情報を忘れていました。
ブラウザは、Google Chrome を利用しています。
コメント頂いた内容で緯度経度部分をコメントアウトして
再度試してみたのですが、やはり、マップ本体自体が表示されず、
・拡大縮小バー
・ミニマップ
しか表示されないんですよ。
にnabemaruにより編集されたメッセージ自己フォローです。
なんだかんだと調べていたら、
コードシェア－
にたどり着き、結局、
Google Map API
とか、
Google Visualization: Map
に行き着きました。
そこで、いろいろ調べていたら、
どうもGoogle Map APIの使い方が、S-Controlを使っていた当時（２年前くらい？）と
変わっていたようで、 以下のコードサンプルの赤い部分に変更することで、
うまく動き始めました。
ということで、S-Controlだから、VisualForceだからが、原因ではなくて、
Google Map APIの利用方法に問題があったみたいでした。
ちなみに、コード内の緯度・経度は、適当な数値を入れてください。
本当にはまってしまって、無駄な時間を過ごしてましたが、これでなんとかなりそうです。
<apex:page showheader="false">
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=
ABQIAAAAccVdb8XwGgqiGrWYuhIkBxRn347FFc3A8pwveefGWGZ94j713RTF245HM_1esXR7TuUh5waC0ttRjQ">
</script>
<script type="text/javascript">
google.load("maps", "2.x");
var map;
var geocoder = null;
// Call this function when the page has been loaded
function initialize() {
map = new google.maps.Map2(document.getElementById("map_div"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new google.maps.LatLng(**.******, ***.******), 13);
var Home_Obj = new Array();
Home_Obj.type = "Home";
Home_Obj.name = '{!$Organization.Name}';
Home_Obj.add = '{!$Organization.State}' + '{!$Organization.City}' + '{!$Organization.Street}';
Home_Obj.bill = "";
Home_Obj.phone = '{!$Organization.Phone}';
Home_Obj.Lat=**.******; //緯度経度を調べて記入
Home_Obj.Lng=***.******;//緯度経度を調べて記入
Home_Obj.pin="rangerstation.png";
Home_Obj.shadow="rangerstation_shadow.png";
//ホーム描画
getGeopoint(Home_Obj);
}
//位置情報（緯度・経度）を取得する
function getGeopoint(Obj) {
// Googleのジオコーディングサービスを利用して住所から位置情報を取得
geocoder = new GClientGeocoder();
var address = Obj.add;
geocoder.getLatLng(address, function(point) {
Obj.Lat = point.lat();
Obj.Lng = point.lng();
plotMap(Obj);
});
}
//地図上にプロットする
function plotMap(Obj) {
//アイコン作成
var icon1 = new GIcon();
icon1.image = "http://maps.google.co.jp/mapfiles/ms/icons/" + Obj.pin;
icon1.shadow = "http://maps.google.co.jp/mapfiles/ms/icons/" + Obj.shadow;
icon1.iconSize = new GSize(32, 32);
icon1.shadowSize = new GSize(59, 32);
icon1.iconAnchor = new GPoint(16, 32);
icon1.infoWindowAnchor = new GPoint(16, 0);
//表示内容作成
var html = '<div><b>' + Obj.type + '</b></div>' +
'<div>建物名： '+Obj.name+'</div>' +
'<div>住所： '+Obj.add+'</div>';
//ピン描画
var marker = new GMarker(new GLatLng(Obj.Lat, Obj.Lng),icon1);
map.setCenter(new GLatLng(Obj.Lat, Obj.Lng), 16);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body onLoad="initialize()" onunload="GUnload()">
メモ欄<br/>
<textarea cols="40" rows="5" wrap="virtual" id="code" name="code"></textarea>
<input type="button" value="このページを印刷" onclick="window.print();" /><br/>
<div id="map_div" style="width: 600px; height: 600px"></div>
</body>
</html>
</apex:page>
にnabemaruにより編集されたメッセージ