目標:Googleマップのマーカーを変更

前回のブログ（Google Maps APIを使ってWebサイトに地図を埋め込む方法）でWebサイトにマーカー付きのGoogleマップを表示させる方法を説明しました。

このGoogleマップはデフォルトの設定から、いろいろなカスタマイズをすることが可能です。

今回はその中でも、マーカー（ピン）をオリジナル画像に変更する方法を説明していきます。

マーカーとは、地図上の位置を指し示すためのアイコンのことです。みなさん見覚えがあるかと思いますが、デフォルトの設定ではこのような赤いピンです。

このアイコンを好きなデザインに変更します。完成図のイメージはこんな感じになります。（※あくまでも参考例です）

マーカー変更の手順

ではさっそくマーカー変更の手順を説明していきます。手順は以下の2ステップだけです！

Step.1 マーカーにする画像を準備する

Step.2 CSSを追加する

マーカーにする画像を準備する

まず、マーカーにしたい画像を準備しましょう。

地図上に重ねて表示させるので、PNG形式やGIF形式などの背景透過の画像にするときれいになります。

今回私はPNG形式の画像を使用しました。

用意した画像はFTPツールなどを使用してサーバー上にアップしておきます。

マップを表示するjavascriptにコードを追加

前回のブログで、マップを表示させるためのJavaScriptのコードを紹介しました。

マーカーを変更するにはこのJavaScriptにマーカーを指定する記述を追加する必要があります。

【前回までのコード】

<script>
    function initMap() {
        var latlng = new google.maps.LatLng( 34.808502, 135.639683 );
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 14,
            center: latlng
        });
			
        //マーカーの設定
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
      }
</script>

【マーカーの情報に画像のURLを追加したコード】

<script>
    function initMap() {
        var latlng = new google.maps.LatLng( 34.808502, 135.639683 );
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 14,
            center: latlng
        });
			
        //マーカーの設定
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: 'マーカー画像のURL'//ここを追加
        });
      }
</script>

上記のようにマーカーの設定を記載している部分にicon:"マーカー画像のURL"を追記します。

これでオリジナルマーカーが地図上に表示されているはずです。

必要であればマーカーの設定を調整する

マップを確認してみて、マーカーの位置をがおかしい場合は微調整することが可能です。

JavaScriptにさらにマーカー画像の設定についてのコードを追記します。

【追加するコード】

//マーカーの設定
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: new google.maps.MarkerImage(
      'マーカー画像のURL',//マーカー画像URL
      new google.maps.Size(60, 80),//マーカー画像のサイズ
      new google.maps.Point(0, 0),//マーカー画像表示の起点（変更しない）
      new google.maps.Point(30, 80)//マーカー位置の調整
    ),  
});

上記のそれぞれの数値を変更することで微調整することができます。

注意点として、マーカー位置の調整をする場合は、サイズの指定とマーカー画像表示の起点の表示の両方の設定が必要です。

最終的に変更後のJavaScriptのコードは以下のようになります。

<script>
    function initMap() {
        var latlng = new google.maps.LatLng( 34.808502, 135.639683 );
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 14,
            center: latlng
        });
			
        //マーカーの設定
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: new google.maps.MarkerImage(
               'マーカー画像のURL',//マーカー画像URL
                new google.maps.Size(60, 80),//マーカー画像のサイズ
                new google.maps.Point(0, 0),//マーカー画像表示の起点（変更しない）
                new google.maps.Point(30, 80)//マーカー位置の調整
            ),  
        });
      }
</script>

マーカー位置のずれは、画像が左右非対称な場合などに起こります。

そんなときは実際の表示を確認しながら、JavaScriptへの記述でマーカー位置を調整してみてください。

さいごに

今回はWebサイトに表示させたGoogleマップのマーカー画像を変更する方法を説明しました。

お店や会社のロゴを入れたりして、よりオリジナルなアクセスマップを作ってみてください！