LUNARAVE WEBクリエイターの仕事と休息

アクセスカウンタ

Google Maps APIの利用戦国IXAWeb技術Youtubeチャンネル

zoom RSS Google Mapの利用 -(4)マーカーの表示-

<<   作成日時 : 2007/03/05 12:29   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

先日より試験的に使っている"Google Map"。
現在、ツールボタンやスライダーを設置し大阪駅が表示されるようにしている。

 サンプルマップ


"Google Map"を利用しているサイトでよく見かけるのが、特定の場所に矢印がついて
そこをクリックするとコメントが表示されるものだ。

これもHTMLのソースに手を加えることで実現可能だ。


前回のソースに追記する。


<script type="text/javascript">
//<![CDATA[
function load() {
 if (GBrowserIsCompatible()) {
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.4419, -122.1419), 13);
  map.addControl(new GLargeMapControl()); //上下左右の移動ボタンと拡大・縮小スライダーを表示
  map.addControl(new GMapTypeControl()); //航空写真・地図の切り替えボタンを表示
map.setCenter(new GLatLng(34.702495,135.49417), 15); //場所と縮尺を指定
 }
}
//]]>
</script>



 ↓


<script type="text/javascript">
//<![CDATA[
function load() {
 if (GBrowserIsCompatible()) {
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.4419, -122.1419), 13);
  map.addControl(new GLargeMapControl()); //上下左右の移動ボタンと拡大・縮小スライダーを表示
  map.addControl(new GMapTypeControl()); //航空写真・地図の切り替えボタンを表示
map.setCenter(new GLatLng(34.702495,135.49417), 15); //場所と縮尺を指定
  
  //▼マーカー
var marker = new GMarker(new GLatLng(34.702777,135.495179));
GEvent.addListener(marker,"click", function() {
 marker.openInfoWindowHtml("大阪駅");
});
map.addOverlay(marker);
//▲マーカー
 }
}
//]]>
</script>



この状態で地図を確認してみる。

 地図表示


大阪駅の上にマーカーが表示されたので、これをクリックする。

 地図表示


これでコメントが表示されるようになった。

どうやら、このマーカーやコメントもある程度のカスタマイズが可能なようだ。
次はこのあたりに手を加えてみようかと思う。

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
Google Mapの利用 -(4)マーカーの表示- LUNARAVE WEBクリエイターの仕事と休息/BIGLOBEウェブリブログ
文字サイズ:       閉じる