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

Pocket

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

webサイトに地図を表示させる際、
多くの場合Google Mapが利用されていると思います。

ただ、デフォルトのデザインのままではつまらなかったり、
サイト自体の雰囲気を壊してしまう可能性もあります。

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

 

APIキーを取得する


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

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

取得方法はコチラ

 

基本設定


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

<script type="text/javascript">
    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>

 

最後に


とても簡単に実装ができるので、サイトデザインの幅が広がりますね。
自分で好きなようにカスタマイズするのもいいですし、
ギャラリー集なんかもあるので、参考にしてみるのもいいかもしれません。