2018.02.22 Thu

誰でも簡単！Google Mapを自由自在にカスタマイズしよう！

こんにちは。
ジーニアスウェブの米田です。

webサイトに地図を表示させる際、多くの場合Google Mapが利用されていると思います。
ただ、デフォルトのデザインのままではつまらなかったり、サイト自体の雰囲気を壊してしまう可能性もあります。

そこで、今回はデザインやピンアイコンを簡単に変更する方法をご紹介します！

目次／このページでわかること

APIキーを取得する

Google Mapを設置するにはGoogle Maps APIなるものを利用する必要があります。
2016年6月22日以降、Google Maps APIを利用するにはAPIキーの取得が必須になりました。

以下、APIキーの取得方法になります。
取得するにはGoogleアカウントが必要になるので、作成しておきましょう。

取得方法はコチラ

基本設定

JavaScriptで地図を埋め込む記述を追加します。

<script>
    var loadedGoogleMap = function(){
        function initialize() {
            var myLatlng = new google.maps.LatLng(35.690207,139.731594); //マーカーの位置（＝所在地）
            var mapOptions = {
                center: myLatlng,
                zoom: 15,
            };
            var map = new google.maps.Map(document.getElementById('ここにIDを指定'),mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    };
</script>

取得したAPIキーを指定し、Google Maps APIを読み込むます。

<script async defer src="//maps.googleapis.com/maps/api/js?key=[取得したAPIキー]&callback=loadedGoogleMap"></script>

そして、地図を表示させたい場所のHTMLタグにIDを指定します。（9行目）

あとは、表示させたい位置の緯度経度を指定すれば、設置完了です。（4行目）

デザインを変更する

Styled Maps Wizardというツールを使うことで、簡単にカスタマイズが可能です。

実際にいじって遊んでみてください。お手軽さが分かるかと思います。

全体の色・色味を変更したり、線路や住所表示の有無も調整できます。
その他にも細かく設定ができるので、自分好みにカスタマイズしてみてください。

スタイルがが決まったら、出力しましょう。
「Show JSON」ボタンをクリックするとコードが表示されるので、これを先ほど記述したJS部分にコピペします。

以上でスタイルが反映されます。

ピンアイコンを変更する

こちらもとても簡単。

ピンアイコン用の画像を用意して、以下を記述するだけ！

<script>
    var icon = new google.maps.MarkerImage('ico.png',
        new google.maps.Size(55,72),/*アイコンサイズ設定*/
        new google.maps.Point(0,0)/*アイコン位置設定*/
    );
    var markerOptions = {
        position: latlng,
        map: map,
        icon: icon,
        title: 'タイトルが入ります'
    };
    var marker = new google.maps.Marker(markerOptions);
</script>