GoogleMaps APIv3 マーカー表示

DokuWiki に Google Maps Javascript API v3 にマーカー(ピン)を表示します。

単純にマーカーを立てるだけです。クリックしても反応しません

<style>
#mapdiv {width:400px;height:300px;}
</style>
<div id="mapdiv"></div>
<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('mapdiv'), {
      center: {lat: 35.6895326, lng: 139.6908937},
      zoom: 8
    });
    //マーカー作成
    var marker = new google.maps.Marker({
      position: {lat: 35.6895326, lng: 139.6908937},
      map: map
    });
 
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap" async defer></script>

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

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

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

<style>
#mapdiv {width:400px;height:300px;}
</style>
<div id="mapdiv"></div>
<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('mapdiv'), {
      center: {lat: 35.6895326, lng: 139.6908937},
      zoom: 8
    });
    //マーカー作成
    var marker = new google.maps.Marker({
      position: {lat: 35.6895326, lng: 139.6908937},
      map: map,
      title: 'オンマウスでツールチップ表示',
      label: {text:'東京',color:'#ffffff',fontSize:'10px',fontWeight:'bold'}
    });
 
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap" async defer></script>

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・バルーンとも言うようです。

<style>
#mapdiv {width:400px;height:300px;}
</style>
<div id="mapdiv"></div>
<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('mapdiv'), {
      center: {lat: 35.6895326, lng: 139.6908937},
      zoom: 8
    });
 
    var marker = new google.maps.Marker({
      position: {lat: 35.6895326, lng: 139.6908937},
      map: map,
    });
 
    //吹き出し準備
    var infowindow = new google.maps.InfoWindow({
      content: '表示するメッセージ'
    });
 
    //吹き出しを最初から表示(下の1行を削除すると最初非表示)
    infowindow.open(map,marker);
 
    //マーカークリックすると吹き出し表示
    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
 
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap" async defer></script>

「new google.maps.InfoWindow」で表示するメッセージをセット

最初から表示する場合はInfoWindow.open()メソッドで吹き出しを表示したい位置を指定します。

マーカークリックで表示したい場合はマーカーにイベントハンドラに登録して吹き出しを表示します。

<style>
#mapdiv {width:400px;height:300px;}
</style>
<div id="mapdiv"></div>
<script>
  var map;
  function initMap4() {
    map = new google.maps.Map(document.getElementById('mapdiv'), {
      center: {lat: 35.6895326, lng: 139.6908937},
      zoom: 8
    });
 
    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) //中心座標(出力サイズ規準)
      }
    });
 
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap" async defer></script>

アイコン表示は下記の部分で行います。

• 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'