Google Mapのデザインをカスタマイズする

2018.05.25　Posted by Coding_team

Webプログラミング

こんにちは、ウェブラボ技術メモです。

「Google Map」は、会社のアクセスページなどで
地図を公開する手段として、多くのホームページで使われていますね。

オシャレなデザインのホームページを作成する際に
Google Mapも色味を変えれたら…と思ったことはありませんか？

今回はGoogle Maps APIを使用して
Google Mapのデザインをカスタマイズしてみます。

APIキーの取得

Google Map APIを使用する際は、APIキーの取得が必須となります。

Googleは、2018年6月11日よりGoogle Maps Platformという新しいプランを発表しました。
これに伴い、APIキーが未設定のマップは正常に表示されなくなります。

この新プランについては、下記の記事でも紹介しております。
https://www.weblab.co.jp/blog/staff/marketing/6354.html

実装方法

今回は下記の生成ツールを参考に実装致しました。
http://creator.aainc.co.jp/archives/3752

後述しますが、このツールで生成されるコードは古いため、一部のコードを書き換える必要があります。

それでは実際に実装していきましょう。
生成ツールの入力項目の順に説明致します。

■タイトル
地図のタイトルを入力します。
会社の地図であれば、社名を入力しましょう。

■座標
グーグルマップで表示する位置座標を入力します。
下記より、その位置座標の調べ方について説明していきます。

地図に掲載したい場所を、「Google Map」で検索します。
地図に掲載したい場所とその周辺が表示されたら、地図のマーカーを置きたい箇所にマウスカーソルを置き、右クリックを押します。
右クリックで表示されたメニューから「この場所について」をクリックします。
表示されたウインドウに書かれている、「,（カンマ）」で区切られた2つの数字が、必要となる位置座標です。

■色
「Google Map」のベースカラーとなる、カラーコードを入力します。
入力したカラーコードを基準に、地図全体やアイコンの色味が自動で決定されます。

■縦幅・横幅
px単位の数値を入力します。

■拡大比率
Google Mapの初期拡大比率を設定します。
拡大比率は「0～22」程度あり、数値が大きくなるほど拡大します。
座標で設定したマーカーの場所とその周辺を表示する場合であれば「16～19」がよいでしょう。

以上の項目を入力し終えましたら、すぐ下にあるボタンをクリックします。
その後すぐに地図のプレビューとコードが生成されます。

実装

ここからは生成されたコードを使って、実装を行います。

まず、生成されたコードの「1行目～下から2行目」を、head内またはbody内に記入します。
最後の行の記述は残しておきます。

1行目はGoogle Maps APIを読み込むための記述、
2行目以降はjavascriptの記述となります。

■HTMLhead内

<script src="http://maps.google.com/maps/api/js?sensor=true&key=XXXXX"></script>/*「XXXXX」にAPIキーを入力します*/
<script type="text/javascript">
function googleMap() {
var latlng = new google.maps.LatLng(35.687943,139.724314);/* 座標 */
var myOptions = {
zoom: 18, /*拡大比率*/
center: latlng,
mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
};
var map = new google.maps.Map(document.getElementById('map1'), myOptions);

/*アイコン設定*/
var icon = new google.maps.MarkerImage('/icon.png',/*画像url*/
new google.maps.Size(70,84),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコン位置*/
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: 'ウェブラボ株式会社',/*タイトル*/
animation: google.maps.Animation.DROP/*アニメーション*/
};
var marker = new google.maps.Marker(markerOptions);

/*取得スタイルの貼り付け*/
var styleOptions = [
{
"stylers": [
{ "hue": '#07539f' }
]
}
];

var styledMapOptions = { name: 'ウェブラボ株式会社' }/*地図右上のタイトル*/
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('style', sampleType);
map.setMapTypeId('style');
};
google.maps.event.addDomListener(window, 'load', function() {
googleMap();
});
</script>

function googleMap() {

var latlng = new google.maps.LatLng(35.687943,139.724314);/* 座標 */

var myOptions = {

zoom: 18, /*拡大比率*/

center: latlng,

mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }

};

var map = new google.maps.Map(document.getElementById('map1'), myOptions);

/*アイコン設定*/

var icon = new google.maps.MarkerImage('/icon.png',/*画像url*/

new google.maps.Size(70,84),/*アイコンサイズ*/

new google.maps.Point(0,0)/*アイコン位置*/

);

var markerOptions = {

position: latlng,

map: map,

icon: icon,

title: 'ウェブラボ株式会社',/*タイトル*/

animation: google.maps.Animation.DROP/*アニメーション*/

};

var marker = new google.maps.Marker(markerOptions);

/*取得スタイルの貼り付け*/

var styleOptions = [

{

"stylers": [

{ "hue": '#07539f' }

]

}

];

var styledMapOptions = { name: 'ウェブラボ株式会社' }/*地図右上のタイトル*/

var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);

map.mapTypes.set('style', sampleType);

map.setMapTypeId('style');

};

google.maps.event.addDomListener(window, 'load', function() {

googleMap();

});

</script>

先述のように、生成ツールが古く、生成されるコードにはAPIキーが入力されていません。
1行目のAPIを読み込む記述は、下記のように変更してください。

■変更前

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

1	<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

■変更後

<script src="http://maps.google.com/maps/api/js?sensor=true&key=XXXXX"></script>/*「XXXXX」にAPIキーを入力します*/

1	<script src="http://maps.google.com/maps/api/js?sensor=true&key=XXXXX"></script>/「XXXXX」にAPIキーを入力します/

残しておいた最後の行は、地図を表示する記述となります。
実際に表示させたい箇所に記入します。

■HTML body内

<div id="map1" style="width:980px; height:400px; margin:0 auto;"></div>

1	<div id="map1" style="width:980px; height:400px; margin:0 auto;"></div>

コードの調整

これで実際に表示されれば完成…ですが
このままではマーカーが表示されません。
そこで少しだけコードの調整を行います。

用意した画像をマーカーとして使う場合

下記のコードに書かれている「/icon.png」は、マーカーの画像を指定しています。
使いたい画像を「icon.png」に設定し、該当する場所にアップロードするか
使いたい画像のあるURLを記入します。
必要であれば、アイコンサイズやアイコン位置の調整も行いましょう。

■HTMLhead内

/*アイコン設定*/
var icon = new google.maps.MarkerImage('/icon.png',/*画像url*/
new google.maps.Size(70,84),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコン位置*/
);

/*アイコン設定*/

var icon = new google.maps.MarkerImage('/icon.png',/*画像url*/

new google.maps.Size(70,84),/*アイコンサイズ*/

new google.maps.Point(0,0)/*アイコン位置*/

);

デフォルトのアイコンをマーカーとして使う場合

とくに画像を用意しない場合は、下記の記述を探して削除しましょう。
するとデフォルトのマーカーが表示されるようになります。

■HTMLhead内

/*アイコン設定*/
var icon = new google.maps.MarkerImage('/icon.png',/*画像url*/
new google.maps.Size(70,84),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコン位置*/
);

/*アイコン設定*/

var icon = new google.maps.MarkerImage('/icon.png',/*画像url*/

new google.maps.Size(70,84),/*アイコンサイズ*/

new google.maps.Point(0,0)/*アイコン位置*/

);

■HTMLhead内

icon: icon,

1	icon: icon,

マーカーのアニメーションを外す

ページ読み込み直後のアニメーションも不要という場合は、
下記の記述を変更します。

■変更前

title: 'ウェブラボ株式会社',/*タイトル*/
animation: google.maps.Animation.DROP/*アニメーション*/

1 2	title: 'ウェブラボ株式会社',/タイトル/ animation: google.maps.Animation.DROP/アニメーション/

■変更後

title: 'ウェブラボ株式会社'/*タイトル*/

1	title: 'ウェブラボ株式会社'/タイトル/

「title」と書かれた行の最後にある「,（カンマ）」を削除し忘れないようにしてください。

作成例

これでGoogle Mapのカスタマイズが完了しました！

これまでの調整を行ったコードで
作成したGoogle Mapは下記となります。
DEMOはこちら

以上、技術メモでした。

関連記事こちらの記事も合わせてどうぞ。

Webサイトのタグ内で有効・無効なHTML要素とは？

2022.07.28

Webサイト更新時に修正が反映されない時は？キャッシュ削除での解決方法

2022.05.19

次世代画像フォーマット「WebP」について

2021.11.26