前回のエントリー「Delphi XE6のFireMonkeyモバイルアプリケーションでTWebBrowserのHTMLページにJavaScriptを実行する」の続きです。
TWebBrowserのEvaluateJavaScriptメソッドは、定義されているJavaScriptに引数を与えて実行することができます。
作成するサンプルのアプリケーションでは、ボタンを押すとGoogleマップにマーカーを追加します。
フォームにTButtonとTWebBrowserを配置します。
フォームのOnCreateイベントを追加します。
起動時にTWebBrowserにGoogleマップを表示します。
procedure TForm1.FormCreate(Sender: TObject);
const
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>';
begin
WebBrowser1.LoadFromStrings(HTML, '');
end;
表示しているHTMLには使用されていないJavaScriptの関数「AddMaker」があります。
このAddMaker関数をDelphiから実行します。
ボタンのOnClickイベントを追加します。
procedure TForm1.Button1Click(Sender: TObject);
begin
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)');
end;
アプリケーションを実行します。
ボタンを押します。
マーカーが追加されました。
マーカーをクリックすると、情報ウィンドウが表示されます。