C++Builder XE6のFireMonkeyモバイルアプリケーションでTWebBrowserのHTMLページにJavaScriptを実行する(2)

前回のエントリー「C++Builder XE6のFireMonkeyモバイルアプリケーションでTWebBrowserのHTMLページにJavaScriptを実行する」の続きです。

TWebBrowserのEvaluateJavaScriptメソッドは、定義されているJavaScriptに引数を与えて実行することができます。

作成するサンプルのアプリケーションでは、ボタンを押すとGoogleマップにマーカーを追加します。

フォームにTButtonとTWebBrowserを配置します。

00

フォームの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)");
}

アプリケーションを実行します。

01

ボタンを押します。

02

マーカーが追加されました。

マーカーをクリックすると、情報ウィンドウが表示されます。

Screenshot_2014-06-28-19-54-27

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です