FileMakerでGoogle Mapを表示
Google Maps JavaScript API v3 使用
APIキー取得方法
https://qbxxdp.blogspot.com/2019/11/filemakergoogle-mapgoogle-maps.html
動作検証
Windows 10
FileMaker 13,14,15,16,17,18
Mac OS 10.13.3
FileMaker Pro 18
iOS13
FileMaker Go 18
サンプルファイル
GMap_Limited.zip(無料)管理者権限無し
https://fm-aid.stores.jp/items/5dd0e28063794452d5012237
作るのが面倒な場合、有料サンプルをどうぞ。
また、ご支援頂ける場合、ご購入頂けると幸いです。
GMap_Unlimited.zip(500円)管理者権限あり
https://fm-aid.stores.jp/items/5dd0ec45a3423d5602e165c2
FileMaker
テーブル:
レイアウト：
リレーション:
スクリプト:
変数を設定 [ $map.js; 値:" var address= '{{address}}'; var Zoom = {{Zoom}}; var myLatlng; function codeAddress() { var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { myLatlng=results[0].geometry.location; initialize(); } else { alert('Geocode was not successful for the following reason: ' + status); } }); } function initialize() { var mapOptions = { zoom: Zoom, center: myLatlng }; var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: address }); } " /*参考：Geocoding Service | Google Maps JavaScript API | Google Developers : https://developers.google.com/maps/documentation/javascript/geocoding*/ ]
変数を設定 [ $map.js; 値:Substitute ( $map.js ; [ "{{address}}" ; GMap::address ] ; [ "{{Zoom}}" ; GMap::Zoom ] ) ]
変数を設定 [ $html; 値:Let([html= "data:text/html;charset=utf-8, <html> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8'/> <meta http-equiv='X-UA-Compatible' content='IE=edge'/> <style type='text/css'> html, body, #map_canvas { width: 100%; height: 100%; margin: 0; padding: 0; } body { border:0;padding:0;margin:0;overflow:hidden; font-size:75%; font-family: 'メイリオ', Meiryo ; } #map_canvas { position: relative; } </style> <script type='text/javascript' src='http://maps.google.com/maps/api/js?key={api_key}'></script> <script type='text/javascript'>{map.js}</script> </head> <body onload='codeAddress()'> <div id='map_canvas'></div> </body></html>" ]; Substitute ( html ; ["{api_key}" ; google_project::api_Key] ; ["{map.js}" ; $map.js] ) ) ]
Web ビューアの設定 [ オブジェクト名: "WEB1"; URL: $html ]
