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

"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

この記事へのコメント

この記事へのトラックバック