fc2ブログ

地図の表示(4) タブ付吹き出しの表示 -Google Maps-

Google Mapで目的の場所にタブを持った吹き出し付マーカーを表示します。 マーカーをクリックするとタブを持った吹き出しが表示されます。例では東京タワーにマーカーを表示しています。

マーカーが表示されていない場合は下記サンプルをクリックしてください。
サンプル※1

※1:トップページ、カテゴリーページにはマーカーは表示されません。記事固有ページを表示した場合のみマーカーが表示されます。

コード

head部

地図を表示するためにhead部分に挿入するJavascriptコードです。マップキー●●●はご自身のキーに置き換えてください。

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=●●●"
type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.659057, 139.744442), 16); //基準点
map.addControl(new GLargeMapControl()); // 拡大縮小ボタン表示
map.addControl(new GMapTypeControl());// 地図タイプ変更ボタン表示
var marker =new GMarker(GLatLng(35.658632, 139.745411)); // 東京タワーにマーカーを設定
GEvent.addListener(marker, "click", function() { marker.openInfoWindowTabsHtml([new GInfoWindowTab('名称','東京タワー'), new GInfoWindowTab('正式名称','日本電波塔')]);
map.addOverlay(marker); // マーカーを表示 }
}
//]]>
</script>

body部

body要素に挿入するHTMLコードです。

<div id="map" style="width: 500px; height: 300px">div>

関連記事
Google Maps
FC2ブログに設置 -Google Maps-
地図の表示(1) 基本地図 -Google Maps-
地図の表示(2) マーカー表示 -Google Maps-
地図の表示(3) 吹き出しの表示 -Google Maps-
地図の表示(4) タブ付吹き出しの表示 -Google Maps-
IEで発生するGoogle Mapsのエラー回避策
外部ファイル -Google Maps-
オリジナルアイコンを表示 -Google Maps-

 スポンサードリンク

スポンサーサイト



  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:ホームページ・ブログ制作
  2. ジャンル:コンピュータ
  1. 2007/07/21 (土)|
  2. [Javascript]Google Maps
  3. | トラックバック：0
  4. | コメント：0

地図の表示(3) 吹き出しの表示 -Google Maps-

Google Mapで目的の場所に吹き出し付マーカーを表示します。 マーカーをクリックすると吹き出しが表示されます。例では東京タワーにマーカーを表示しています。

マーカーが表示されていない場合は下記サンプルをクリックしてください。
サンプル※1

※1:トップページ、カテゴリーページにはマーカーは表示されません。記事固有ページを表示した場合のみマーカーが表示されます。

コード

head部

地図を表示するためにhead部分に挿入するJavascriptコードです。マップキー●●●はご自身のキーに置き換えてください。

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=●●●"
type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.659057, 139.744442), 16); //基準点
map.addControl(new GLargeMapControl()); // 拡大縮小ボタン表示
map.addControl(new GMapTypeControl());// 地図タイプ変更ボタン表示
var marker =new GMarker(GLatLng(35.658632, 139.745411)); // 東京タワーにマーカーを設定
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml('東京タワー');});
map.addOverlay(marker); // マーカーを表示 }
}
//]]>
</script>

body部

body要素に挿入するHTMLコードです。

<div id="map" style="width: 500px; height: 300px">div>

関連記事
Google Maps
FC2ブログに設置 -Google Maps-
地図の表示(1) 基本地図 -Google Maps-
地図の表示(2) マーカー表示 -Google Maps-
地図の表示(3) 吹き出しの表示 -Google Maps-
地図の表示(4) タブ付吹き出しの表示 -Google Maps-
IEで発生するGoogle Mapsのエラー回避策
外部ファイル -Google Maps-
オリジナルアイコンを表示 -Google Maps-

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:ホームページ・ブログ制作
  2. ジャンル:コンピュータ
  1. 2007/07/21 (土)|
  2. [Javascript]Google Maps
  3. | トラックバック：0
  4. | コメント：0

地図の表示(2) マーカー表示 -Google Maps-

Google Mapで目的の場所にマーカーを表示します。例では東京タワーにマーカーを表示しています。

マーカーが表示されていない場合は下記サンプルをクリックしてください。
サンプル※1

※1:トップページ、カテゴリーページにはマーカーは表示されません。記事固有ページを表示した場合のみマーカーが表示されます。

コード

head部

地図を表示するためにhead部分に挿入するJavascriptコードです。マップキー●●●はご自身のキーに置き換えてください。

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=●●●"
type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.659057, 139.744442), 16); //基準点
map.addControl(new GLargeMapControl()); // 拡大縮小ボタン表示
map.addControl(new GMapTypeControl());// 地図タイプ変更ボタン表示
var marker =new GMarker(GLatLng(35.658632, 139.745411)); // 東京タワーにマーカーを設定
map.addOverlay(marker); // マーカーを表示 }
}
//]]>
</script>

body部

body要素に挿入するHTMLコードです。

<div id="map" style="width: 500px; height: 300px">div>

関連記事
Google Maps
FC2ブログに設置 -Google Maps-
地図の表示(1) 基本地図 -Google Maps-
地図の表示(2) マーカー表示 -Google Maps-
地図の表示(3) 吹き出しの表示 -Google Maps-
地図の表示(4) タブ付吹き出しの表示 -Google Maps-
IEで発生するGoogle Mapsのエラー回避策
外部ファイル -Google Maps-
オリジナルアイコンを表示 -Google Maps-

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:ホームページ・ブログ制作
  2. ジャンル:コンピュータ
  1. 2007/07/21 (土)|
  2. [Javascript]Google Maps
  3. | トラックバック：0
  4. | コメント：0

次のページ»