前回に引き続き、Google Map APIについて。

今回は、マーカーを置いてみます。

 1. <script>
 2. $(document).ready( function(){
 3.   var latlng = new google.maps.LatLng( 35.570075, 135.191917 );
 4.   var map = new google.maps.Map(
 5.     document.getElementById('map'),
 6.     {
 7.       zoom: 14,
 8.       center: latlng,
 9.       mapTypeId: google.maps.MapTypeId.ROADMAP
10.     }
11.   );
12.   var marker = new google.maps.Marker({
13.     position: latlng,
14.     map: map,
15.     title: '天橋立'
16.   });
17. });
18. </script>

12〜16行目
markerという変数に以下のオプションを設定したマーカーを生成します。

・positionは、マーカーを表示させる位置を座標で指定します。この指定は必須です。
・mapは、どの地図にマーカーを表示させるか指定します。この指定も必須です。
・titleは、マーカーにロールオーバーした時に出るツールチップ用テキストを指定します。

その他のマーカーのオプション

・animation
　マーカーにアニメーションを指定します。
　アニメーションには、上から落ちてくる「DROP」、ピョンピョン弾む「BOUNCE」があります。

　BOUNCE

・draggable
　マーカーをドラッグできる（true）かできない（false）かを指定します。

　ドラッグできない（良く意味がわかんない・・・）

Google Map APIを覚えるなら

Google Maps APIプログラミング入門 改訂2版 新品価格 ￥3,780から (2013/10/25 14:40時点)