住所で検索した結果をgoogleMapに表示したいです。
お世話になります。
ずいぶんFMから離れておりわからない事だらけです。
ご教授（過去の文献の指示でも結構です）いただけると助かります。
OS：Windows版 バージョン12にて試験しております。
うまく行けば、Server版で導入を考えております。
googleMapにて複数の顧問先を表示したいと考えております。
顧客情報テーブルで下記の様に住所を登録します。
住所１ 東京都
住所２ 品川区なにがし
住所３ １丁目なにがし
住所１で東京と検索した結果、東京都にある顧問先をマップ上に全部ピンを打ちたいです。
住所２で品川と検索した結果、品川区にある顧問先をマップ上に全部ピンを打ちたいです。
※上限があるのであればそのMax値。
よろしくお願いいたします。
レスが付かないようなので、きちんとした回答がでるまでの参考程度に
読んでいただけたらと思い書き込みます。
流れとしては、次のようになると思います。
まず、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) のフィールドを指定する。
レスが入っているのに放置したままなので、まだ生きているか心配ですが...、
ココのサイトにも参考過去スレがあります。
「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
ねこ吉様、ご配慮いただきありがとうございます。
Hiro.様、サンプルありがとうございます！７から１２へ変換しました。動作試験で完璧です。
ただ現状新規マルチマーカ地図作製ボタンを押して初回の表示が北マリアナがちらっと見える海です。
これはgoogleMap側の仕様でしょうか？
その点を確認するためにも、ソースを順番に見て行きます。
【補足】
> OS：Windows版 バージョン12にて試験しております。
> ただ現状新規マルチマーカ地図作製ボタンを押して初回の表示が北マリアナがちらっと見える海です
ようやくFM12を取得しまして、やっとFM12環境の上記問題を確認・修正しました。
> うまく行けば、Server版で導入を考えております。
FM共有環境の不具合を確認・修正しました。
最新アップデート版は、http://www.russ.jp/stepbbs/step.cgi?mode=view&no=92079 から入手できます。
Hiro様 本当に何から何までありがとうございます．
またフォーラムに不慣れで，返事等お待たせしてしまい申し訳ございませんでした．
お陰さまでFMを利用して業務改善に取り組めております．
今後ともよろしくお願いいたします．
【補足】
> OS：Windows版 バージョン12にて試験しております。
> ただ現状新規マルチマーカ地図作製ボタンを押して初回の表示が北マリアナがちらっと見える海です
ようやくFM12を取得しまして、やっとFM12環境の上記問題を確認・修正しました。
> うまく行けば、Server版で導入を考えております。
FM共有環境の不具合を確認・修正しました。
最新アップデート版は、http://www.russ.jp/stepbbs/step.cgi?mode=view&no=92079 から入手できます。