前回のエントリー「C++Builder XE6のFireMonkeyモバイルアプリケーションでTWebBrowserのHTMLページにJavaScriptを実行する」の続きです。
TWebBrowserのEvaluateJavaScriptメソッドは、定義されているJavaScriptに引数を与えて実行することができます。
作成するサンプルのアプリケーションでは、ボタンを押すとGoogleマップにマーカーを追加します。
フォームにTButtonとTWebBrowserを配置します。
フォームのOnCreateイベントを追加します。
起動時にTWebBrowserにGoogleマップを表示します。
__fastcall TForm2::TForm2(TComponent* Owner)
: TForm(Owner)
{
const UnicodeString HTML =
"<!DOCTYPE html>"
"<html lang=\"ja\">"
"<head>"
"<meta charset=\"UTF-8\">"
"<meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">"
"<style>"
"html, body, #map_canvas { width: 100%; height: 100%; }"
"</style>"
"<script src=\"http://maps.google.com/maps/api/js?sensor=true\"></script>"
"<script>"
"var map;"
"function initialize() {"
" var latlng = new google.maps.LatLng(34.693738, 135.502165);"
" var myOptions = {"
" zoom: 11,"
" center: latlng,"
" mapTypeId: google.maps.MapTypeId.ROADMAP"
" };"
" map = new google.maps.Map(document.getElementById(\"map_canvas\"), myOptions);"
"}"
"function AddMaker(name, lat, lng) {"
" var marker = new google.maps.Marker({"
" position: new google.maps.LatLng(lat, lng),"
" map: map,"
" title: name"
" });"
" var infowindow = new google.maps.InfoWindow({"
" content: name"
" });"
" google.maps.event.addListener(marker, \"click\", function() {"
" infowindow.open(map,marker);"
" });"
"}"
"</script>"
"</head>"
"<body onload=\"initialize();\">"
"<div id=\"map_canvas\"></div>"
"</body>"
"</html>";
WebBrowser1->LoadFromStrings(HTML, "");
}
表示しているHTMLには使用されていないJavaScriptの関数「AddMaker」があります。
このAddMaker関数をC++Builderから実行します。
ボタンのOnClickイベントを追加します。
void __fastcall TForm2::Button1Click(TObject *Sender)
{
WebBrowser1->EvaluateJavaScript("AddMaker(\"ユニバーサルスタジオジャパン\", 34.665442, 135.432338)");
WebBrowser1->EvaluateJavaScript("AddMaker(\"通天閣\", 34.652499, 135.506306)");
WebBrowser1->EvaluateJavaScript("AddMaker(\"海遊館\", 34.654518, 135.428965)");
WebBrowser1->EvaluateJavaScript("AddMaker(\"大阪城\", 34.687315, 135.526201)");
WebBrowser1->EvaluateJavaScript("AddMaker(\"道頓堀\", 34.668549, 135.502716)");
}
アプリケーションを実行します。
ボタンを押します。
マーカーが追加されました。
マーカーをクリックすると、情報ウィンドウが表示されます。