5 返信 最新の回答 日時: May 19, 2013 6:47 PM ユーザー:takara

    住所で検索した結果をgoogleMapに表示したいです。

    takara

      タイトル

      住所で検索した結果をgoogleMapに表示したいです。

      フォーラムに投稿

           お世話になります。
           ずいぶんFMから離れておりわからない事だらけです。
           ご教授(過去の文献の指示でも結構です)いただけると助かります。

           OS:Windows版 バージョン12にて試験しております。
           うまく行けば、Server版で導入を考えております。

           googleMapにて複数の顧問先を表示したいと考えております。
           顧客情報テーブルで下記の様に住所を登録します。

           住所1 東京都
           住所2 品川区なにがし
           住所3 1丁目なにがし

           住所1で東京と検索した結果、東京都にある顧問先をマップ上に全部ピンを打ちたいです。
           住所2で品川と検索した結果、品川区にある顧問先をマップ上に全部ピンを打ちたいです。
           ※上限があるのであればそのMax値。

           よろしくお願いいたします。

            

        • 1. Re: 住所で検索した結果をgoogleMapに表示したいです。
          ねこ吉

               レスが付かないようなので、きちんとした回答がでるまでの参考程度に

               読んでいただけたらと思い書き込みます。

               流れとしては、次のようになると思います。

               まず、FileMaker は使わず、HTMLソースとWebブラウザを使って、やろうと

               する内容を試作します。

               (1) GoogleMap API のドキュメントをみて、住所からピンを立てるための

                呼び出しかたを調べる。

               (2) その呼び出し方を、Javascript を使って記述する。その関数を、

                HTML ページの読込みのタイミング(<body onload=... のところ)で

                実行するようにする。

               (3) そのHTMLソースを Webブラウザで開いて、目的の地図が表示される

                ことを確かめる。

               ここからが、FileMaker の処理です。

               (4) (2) で作成したHTMLソースと同じ内容のテキストデータを、

                FileMaker 上の計算によって作り出す。そのとき、住所などは、

                フィールドから読込ませて、可変になるように。

               (5) (4)で、出来たテキストを、「dataスキーム」の文字列として、

                テキスト型のフィールドに格納する。

                たとえば、HTML ソースが 「 <html><body>テスト</body></html>」だったとしたら、

                dataスキームは「data:text/html,<html><body>テスト</body></html>」です。

               (6) レイアウトで Webビューアツールを配置し、プロパティの Webアドレスとして、

                (5) のフィールドを指定する。


                

                

          • 2. Re: 住所で検索した結果をgoogleMapに表示したいです。
            hiro_

                 レスが入っているのに放置したままなので、まだ生きているか心配ですが...、

                 ココのサイトにも参考過去スレがあります。
                  「Google Map の地図部分のみの表示」の最終3ページ http://forums.filemaker.com/posts/67b54523c9?page=3

                 基本はねこ吉さんの通りですが、プロット地点が多そうなので、この場合レスポンスを考えてHTMLはDATA:スキーム送信でなく、外部エクスポートして利用する方が良さそうです。

                 文章説明は困難なので、作例テンプレートを作り公開しましたので、そちらからダウンロードして説明代わりに自習下さい。
                   http://www.russ.jp/stepbbs/step.cgi?mode=view&no=92079
                   ●ダウンロード「MultiMarkerMap.fp7」→ http://yahoo.jp/box/mbkmYe
                  

                 ポイントは、HTML内の特にJavaScriptですが、これが理解できるようにならないと、テンプレートのカスタム転用は難しいかも?

                 <!--
                 *******************************************************
                 getMap.html  by Hiro
                  GoogleMapsAPI3 マルチ地点マーカーを取得、表示
                 *******************************************************
                 //-->

                 <html>

                  <head>
                   <meta http-equiv="content-type" content="text/html;charset=utf-8">
                  </head>

                  <body>
                   <style>
                   body {
                     margin: 0;
                     padding: 0;
                     overflow: hidden;
                     border: 0;
                     background-color: #eeeeff;
                   }
                  
                   form {
                     margin:0;
                  }
                  
                   h1, h2, h3, h4 {
                     margin: 0;
                     padding: 0;
                     font-size: 0.9em;
                   }

                   #sideContainer {
                     width: 200px;
                     height: 100%;
                     list-style-type: none;
                     padding: 5px 0 5px 0;
                     margin: 0;
                     float: left;
                     border: 1px solid #676767;
                     overflow-x: hidden;
                     overflow-y: auto;
                   }
                   #sideContainer li {
                     font-size: 11px;
                     line-height: 18px;
                     padding: 0 5px 0 5px;
                     white-space: nowrap;
                   }
                  
                   #mapContainer {
                     float: left;
                     width: 750px;
                     height: 100%;
                     border: 1px solid #676767;
                   }
                  
                   #generateLink {
                     background-color: #fff;
                     border: 2px ridge #000;
                     color: #00c;
                     cursor: pointer;
                     font-size: 0.6em;
                     font-weight: bold;
                     left: 300px;
                     padding: 1px 2px;
                     position: absolute;
                     text-align: center;
                     text-decoration: underline;
                     width: 100px;
                     z-index: 1000;
                   }
                 </style>
                   <div id="generateLink" style="display: none;">初期値リセット</div>
                   <div id="mapContainer"></div>
                   <ul id="sideContainer"></ul>
                   <form name="f1">
                    <input type="hidden" name="datas">
                   </form>
                   <script type="text/javascript" src="./Include_DataArray.js"></script>
                   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                   <script type="text/javascript">
                 var bounds = fit_bounds = max_lat = min_lng = min_lat = max_lng = null;
                 var gMap = {
                   map: null,
                   mapContainer: document.getElementById('mapContainer'),
                   sideContainer: document.getElementById('sideContainer'),
                   generateLink: document.getElementById('generateLink'),
                   markers: [],
                   visibleInfoWindow: null,
                   datas: [],
                   datas: eval(document.f1.datas.value),
                   datasCount: eval(document.f1.datas.value).length,

                   generateTriggerCallback: function(object, eventType) {
                     return function() {
                       google.maps.event.trigger(object, eventType);
                     };
                   },

                   openInfoWindow: function(infoWindow, marker) {
                     return function() {
                       // Close the last selected marker before opening this one.
                       if (gMap.visibleInfoWindow) {
                         gMap.visibleInfoWindow.close();
                       }
                       infoWindow.open(gMap.map, marker);
                       gMap.visibleInfoWindow = infoWindow;
                       gMap.map.fitBounds(bounds);
                     };
                   },

                   zoomopenInfoWindow: function(infoWindow, marker) {
                     return function() {
                       // Close the last selected marker before opening this one.
                       if (gMap.visibleInfoWindow) {
                         gMap.visibleInfoWindow.close();
                       }
                       infoWindow.open(gMap.map, marker);
                       gMap.visibleInfoWindow = infoWindow;
                       gMap.map.setZoom(16);
                     };
                   },

                   clearMarkers: function() {
                     for (var i = 0, marker; marker = gMap.markers[i]; i++) {
                       marker.setVisible(false);
                     }
                   },

                   generateMultiMarkers: function(center) {
                     // Populate side bar.
                     var avg = {
                       lat: 0,
                       lng: 0
                     };

                     var ul = gMap.sideContainer;
                     /*ul.style.width = 200 + 'px';*/
                     /*ul.style.height = gMap.map.getDiv().offsetHeight + 'px';*/

                     // Clear list and map markers.
                     ul.innerHTML = '';
                     gMap.clearMarkers();

                     for (var i = 0; i < gMap.datasCount; i++) {
                       var n = i + 1;
                       var html = '<span title="・ダブルクリックは非ズーム、\n・クリックはズームで開きます">#' + n + ': ' + gMap.datas[i][2] + '</span>';

                       // Place markers on map.
                       var randLatLng = new google.maps.LatLng(
                           Number(gMap.datas[i][0]),
                           Number(gMap.datas[i][1]));
                       var marker = new google.maps.Marker({
                         map: gMap.map,
                         title: '#' + n + ': ' + gMap.datas[i][2],
                         position: randLatLng
                       });
                       gMap.markers.push(marker);

                       // Create marker info window.
                       var infoWindow = new google.maps.InfoWindow({
                         content: [
                           '<h3 style="">',
                           html,
                           '</h3>',
                           '<div style="font-size: 0.8em;">',
                           gMap.datas[i][3]+'<br>',
                           '電話:' + gMap.datas[i][4]+'<br>',
                           gMap.datas[i][5]+'、'+gMap.datas[i][6],
                           '</div>'
                         ].join(''),
                         size: new google.maps.Size(200, 80)
                       });
                      
                       // Add marker click & dblclick event listener.
                       google.maps.event.addListener(marker, 'click', gMap.zoomopenInfoWindow(infoWindow, marker));
                       google.maps.event.addListener(marker, 'dblclick', gMap.openInfoWindow(infoWindow, marker));

                       // Generate list elements for each marker.
                       var li = document.createElement('li');
                       var aSel = document.createElement('a');
                       aSel.href = 'javascript:void(0);';
                       aSel.innerHTML = html;
                       aSel.onclick = gMap.generateTriggerCallback(marker, 'click');
                       aSel.ondblclick = gMap.generateTriggerCallback(marker, 'dblclick');
                       li.appendChild(aSel);
                       ul.appendChild(li);

                       // Sum up all lat/lng to calculate center all points.
                       avg.lat += randLatLng.lat();
                       avg.lng += randLatLng.lng();
                       // Max Min lat/lng to calculate Bounds.
                       var lat = randLatLng.lat();
                       var lng = randLatLng.lng();
                       if(!max_lat || max_lat<lat) max_lat = lat;
                       if(!min_lat || min_lat>lat) min_lat = lat;
                       if(!max_lng || max_lng<lng) max_lng = lng;
                       if(!min_lng || min_lng>lng) min_lng = lng;
                     }

                     // Center map.
                     gMap.map.setCenter(new google.maps.LatLng(
                        avg.lat / gMap.datasCount, avg.lng / gMap.datasCount));
                     // Zoom map.
                     if(!fit_bounds) {
                         var southwest = new google.maps.LatLng(max_lat, min_lng);
                         var northeast = new google.maps.LatLng(min_lat, max_lng);
                         bounds = new google.maps.LatLngBounds(southwest, northeast);
                         gMap.map.fitBounds(bounds);
                         fit_bounds = 1;
                     }
                   },
                  
                   init: function() {
                     gMap.map = new google.maps.Map(gMap.mapContainer, {
                   mapTypeControl: true,   
                   mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                   navigationControl: true,   
                   navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},   
                   mapTypeId:google.maps.MapTypeId.ROADMAP
                     });

                     // Show generate link only after map tiles finish loading.
                     google.maps.event.addListener(gMap.map, 'tilesloaded', function() {
                       gMap.generateLink.style.display = 'block';
                       gMap.generateLink.style.left = 6 + 'px';
                       gMap.generateLink.style.top = gMap.map.getDiv().offsetTop + gMap.map.getDiv().offsetHeight - 28 + 'px';
                     });

                     // Add onclick handler to generate link.
                     google.maps.event.addDomListener(gMap.generateLink, 'click', function() {
                       gMap.generateMultiMarkers(gMap.map.getCenter());
                       gMap.map.fitBounds(bounds);
                       // Close the last selected marker.
                       if (gMap.visibleInfoWindow) {
                         gMap.visibleInfoWindow.close();
                       }
                     });

                     // Generate markers against map center.
                     google.maps.event.trigger(gMap.generateLink, 'click');
                   }
                 };

                 google.maps.event.addDomListener(window, 'load', gMap.init, gMap);
                 </script>
                  </body>

                 </html>


                 なお、このHTML本文は静的部分のみに止め、動的データ部分は別途外部JSファイル(Include_DataArray.js)出力して、それを静的本文にIncludeするようにしています。
                 また、住所データをAPIに認識させるために緯度経度データに変換する必要がありますが、そのためのHTML文も別途使っています。

                  

            > ※上限があるのであればそのMax値
                 レスポンスを考慮しなければ千数百件の事例報告があるようです。 http://waox.main.jp/news/?p=1099

            • 3. Re: 住所で検索した結果をgoogleMapに表示したいです。
              takara

                   ねこ吉様、ご配慮いただきありがとうございます。
                   Hiro.様、サンプルありがとうございます!7から12へ変換しました。動作試験で完璧です。

                   ただ現状新規マルチマーカ地図作製ボタンを押して初回の表示が北マリアナがちらっと見える海です。
                   これはgoogleMap側の仕様でしょうか?
                   その点を確認するためにも、ソースを順番に見て行きます。

              • 4. Re: 住所で検索した結果をgoogleMapに表示したいです。
                hiro_

                     【補足】

                > OS:Windows版 バージョン12にて試験しております。
                     > ただ現状新規マルチマーカ地図作製ボタンを押して初回の表示が北マリアナがちらっと見える海です

                     ようやくFM12を取得しまして、やっとFM12環境の上記問題を確認・修正しました。

                > うまく行けば、Server版で導入を考えております。
                     FM共有環境の不具合を確認・修正しました。


                     最新アップデート版は、http://www.russ.jp/stepbbs/step.cgi?mode=view&no=92079 から入手できます。

                • 5. Re: 住所で検索した結果をgoogleMapに表示したいです。
                  takara

                       Hiro様 本当に何から何までありがとうございます.
                       またフォーラムに不慣れで,返事等お待たせしてしまい申し訳ございませんでした.
                       お陰さまでFMを利用して業務改善に取り組めております.
                       今後ともよろしくお願いいたします.