クライアントである地元の教会のウェブサイトに取り組んでいます。マップ ページのリンク機能を使用して Google マップを埋め込みました。マップ上の情報ウィンドウには「レビュー」が含まれており、教会はこれを懸念しています。情報ウィンドウからそれを削除する方法はありますか? レビュー自体は削除したくありません。情報ウィンドウのリンクだけですか?
これは可能ですか?クエリ文字列を介して操作できる他のカスタマイズ オプション (サイズ以外) はありますか?
クライアントである地元の教会のウェブサイトに取り組んでいます。マップ ページのリンク機能を使用して Google マップを埋め込みました。マップ上の情報ウィンドウには「レビュー」が含まれており、教会はこれを懸念しています。情報ウィンドウからそれを削除する方法はありますか? レビュー自体は削除したくありません。情報ウィンドウのリンクだけですか?
これは可能ですか?クエリ文字列を介して操作できる他のカスタマイズ オプション (サイズ以外) はありますか?
ほぼ 2 年前、API といくつかのコード操作を使用して、バブルの内容を完全に制御できるカスタム マップを作成しました。上記のリンクをクリックしてデモをご覧ください。この回答のコードをクリーンアップしましたが、実装するには、すべての YOUR__BLANK__HERE テキストを適切な値に置き換える必要があります。
ステップ 1: gMaps API を呼び出す
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY_HERE"
type="text/javascript">
</script>
ステップ 2:ドキュメントの本文に、id "map" を持つ要素を作成します。CSS でサイズと位置を調整します。高さと幅が必要です。
<div id="map" class="content"></div>
ステップ 3: DOM で div を定義したら、次のスクリプト タグを安全に挿入できます。
<script type="text/javascript">
//<![CDATA[
// Check to see if this browser can run the Google API
if (GBrowserIsCompatible()) {
var gmarkers = [];
var htmls = [];
var to_htmls = [];
var from_htmls = [];
var i=0;
// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point);
// The info window version with the "to here" form open
to_htmls[i] = html +
'<br />Start address:<form action="http://maps.google.com/maps" method="get">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
'<INPUT value="Get Directions" TYPE="SUBMIT">' +
'<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() +
// "(" + name + ")" +
'"/>';
// The inactive version of the direction info
html = html + '<br><a href="javascript:tohere('+i+')">Get Directions<'+'/a>';
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
gmarkers[i] = marker;
htmls[i] = html;
i++;
return marker;
}
// functions that open the directions forms
function tohere(i) {
gmarkers[i].openInfoWindowHtml(to_htmls[i]);
}
// Display the map, with some controls and set the initial location
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(
YOUR_LATITUDE_HERE,
YOUR_LONGITUDE_HERE
),
YOUR_ZOOM_LEVEL_HERE // a value of 13 worked for me
);
// Set up one marker with an info window
var marker = createMarker(
new GLatLng(
YOUR_LATITUDE_HERE,
YOUR_LONGITUDE_HERE
),
'YOUR_MARKER_NAME_HERE',
'<i>YOUR_HTML_HERE<'+'/i>');
/* repeat the process to add more markers
map.addOverlay(marker);
var marker = createMarker(
new GLatLng(
YOUR_LATITUDE_HERE,
YOUR_LONGITUDE_HERE
),
'YOUR_MARKER_NAME_HERE',
'<i>YOUR_HTML_HERE<'+'/i>');
map.addOverlay(marker);*/
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/
// http://www.econym.demon.co.uk/googlemaps/
//]]>
</script>
このコードを使用すると、バブルには YOUR_HTML_HERE で指定した html と Get Directions へのリンクが含まれます。これは (クリックすると) 出発地の住所を尋ねるテキスト ボックスに変わります。残念ながら、クエリの結果は新しいブラウザー ウィンドウで開きます (最初の公開時には、API にルート案内機能が含まれていなかったため)。
私は自分自身の質問に対する答えを見つけたと思います。情報ウィンドウ自体は変更できませんが、事業体としての教会ではなく、住所自体の地図にリンクすることでうまくいきます。運転ルートのリンクはまだそこにあり、彼らが望んでいたのはほとんどそれだけです。