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

アクセスカウンタ

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

zoom RSS Google Maps v3の利用 -(2)マーカーの表示-

<<   作成日時 : 2012/01/25 18:18   >>

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

"Google Maps"のバージョンが2から3への変更を推奨されているので、ver.3によるマーカーを表示させるサンプルを紹介する。

前回までで"大阪駅"を中心とする地図を表示するところまで実装している。
->Google Maps v3の利用 -(1)地図の表示-

今回は"大阪駅"にマーカーを立てるサンプルコードを記載する。
前回のソース中、下記の箇所に数行追加するだけでよい。


var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



 ↓


var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// ▽マーカー
var marker = new google.maps.Marker({
  position: new google.maps.LatLng(34.702306, 135.495824),
  map: map,
  title: "大阪駅"
});
// △マーカー


これをブラウザで見ると次のようになる。

 マーカーの追加


「title」オプションでマウスオーバー時に表示させる文字を一緒に指定でき、ソースの簡略が図れている。

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

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

トラックバック(0件)

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

トラックバック用URL help


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

タイトル
本 文

コメント(1件)

内 容 ニックネーム/日時
What's up it's me, I am also visiting this web
site on a regular basis, this web page is genuinely fastidious and the viewers are really sharing good thoughts.
Emely
URL
2017/07/31 12:41

コメントする help

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