{{tag>プログラミング関連 Google_Maps_API3}} [[start]]＞[[programming_start]] ~~NOCACHE~~ ====== GoogleMaps APIv3 マーカー表示====== DokuWiki に Google Maps Javascript API v3 にマーカー(ピン)を表示します。 ---- ===== もっとも単純なマーカー ===== 単純にマーカーを立てるだけです。クリックしても反応しません

マーカーを表示しているのは下記の部分で、経度と緯度を変更すると任意の場所にマーカーを表示できます。


    var marker = new google.maps.Marker({
      position: {lat: 【緯度】, lng: 【経度】},
      map: map
    });

---- ===== マーカーに文字表示とツールチップ表示 ===== マーカーに文字を表示とオンマウスでツールチップ表示します。

title属性でツールチップ表示（マウスを数秒マーカーに乗せると表示）します。マウスの無いスマホやタブレットでは表示できないので重要な情報は書けません。 label属性でマーカー上に文字を表示します。マーカーから文字がはみ出してもよければ文字数を多くしたり文字の大きさを大きくする事ができます。属性名は大文字小文字に注意して下さい（fontSize）。


var marker = new google.maps.Marker({
  position: {lat: 35.6895326, lng: 139.6908937},
  map: map,
  title: '【テキスト】',
  label: {text:'【テキスト】',color:'【カラー】',fontSize:'【文字サイズ】',fontWeight:'【文字太さ】'}
});

labelの装飾は省略できます。


//一部省略
label: {text:'【テキスト】',color:'【カラー】'}
//最も省略した場合
label: '【テキスト】'

---- ===== 吹き出しの表示 ===== マーカーをクリックすると吹き出しが表示されます。別名情報ウィンドウ・情報窓・infoWindow・バルーンとも言うようです。

「new google.maps.InfoWindow」で表示するメッセージをセット最初から表示する場合はInfoWindow.open()メソッドで吹き出しを表示したい位置を指定します。マーカークリックで表示したい場合はマーカーにイベントハンドラに登録して吹き出しを表示します。 ---- ===== 自作アイコン使用 =====

アイコン表示は下記の部分で行います。 * origin・・・アイコンセットの場合に切り出し地点を指定します。1画像しかない場合は0,0です * size・・・アイコンの原寸です。1画像しか無い場合は画像の幅と高さを与えます。アイコンセットから切り出す場合は切り出す大きさを指定します。 * scaledSize・・・マップに出力するアイコンの大きさです。sizeと同じなら省略できます。 * anchor・・・アイコンのどの位置を経度緯度と一致させるか決めます。0,0なら左上です。デモの場合は右上(32,0)になっています。


    var marker = new google.maps.Marker({
      position: {lat: 35.6895326, lng: 139.6908937}, //表示座標
      map: map,
      icon:{
        url : 'https://www.achiachi.net/blog/lib/tpl/dokuwiki/images/logo.png',
        origin : new google.maps.Point(0,0), //(アイコンセット用切り出し位置)
        size : new google.maps.Size(64,64),//アイコンサイズ
        scaledSize : new google.maps.Size(32, 32), //出力サイズ
        anchor : new google.maps.Point(32,0) //中心座標(出力サイズ規準)
      }
    });

下記のようにファイル名だけに省略する事が出来ますが、この場合は画像の底辺中央(例なら32,64)が中心座標になります。


icon: 'https://www.achiachi.net/blog/lib/tpl/dokuwiki/images/logo.png'