Google Mapsのマーカー（ピン）をGoogle Maps APIを使って好きな画像に変更する
Google Maps APIを使うとGoogle マップを自由自在にカスタマイズできる。
①の、「マップのマーカーを変更したい」という要望は結構多い気がします。（自分調べ）
そういったカスタマイズはGoogle Maps APIを使うことで可能です。
このような要望にも柔軟に対応できるようになっておくと色々な案件に挑戦しやすいと思うので、是非マスターしておきましょう！
Google Maps APIとは
Google Maps APIとは、Goolgeマップを色々カスタマイズできるようにGoogleが用意してくれた窓口です。
すごいざっくりな説明ですが、雰囲気だけつかめば問題ないです。
Google Maps APIに用意されている３つのプロダクト
Google Maps APIには、主に３つのプロダクトが用意されています。
https://cloud.google.com/maps-platform?hl=ja より引用
「Googleマップをどのようにカスタマイズしたいか」によって、使うプロダクトが変わります。
実は、冒頭で載せた以下の図の 黄色い帯で囲んだ部分は、上記のプロダクト名と一致しています。
Google Maps APIに用意されている３つのプロダクト
再掲
また、それぞれのプロダクトに別々のAPIが用意されています。
https://cloud.google.com/maps-platform/pricing/?hl=ja#matrix より引用
どのプロダクトにも存在するAPIは、「Maps JavaScript API」です。
とりあえず、Google Maps APIでカスタマイズするときは、この 「Maps JavaScript API」を有効化しましょう。
（有効化する方法は後述）
Google Maps APIの使用料金について
※2021年10月現在の情報です
結論、1 か月 $200 分まで無料です！
このあと紹介する Maps JavaScript APIの場合、1000回リクエストごとに$7となります。
https://cloud.google.com/maps-platform/pricing/?hl=ja#matrix より引用
しかし、ひと月で$200以上になる可能性は低いので、基本的に無料で使用できます。
なぜなら、1000回リクエストで$7なので、1リクエストあたり約$0.007です。
つまり、「1か月あたり28,571回のアクセスがないと$200を超えない」です。
大抵の場合、ひと月のアクセス数がそのような数字にならないので基本的には無料で使えるでしょう。
Google Maps APIのリクエストとは
さきほどから言っている「リクエスト」とは、Google Maps APIを使ったページが表示されたときです。
Google Maps APIのリクエストとは
https://cloud.google.com/maps-platform/pricing/?hl=ja#matrix より引用
Google Maps APIを使ったページが、ひと月に28,571回も表示されることはあまりないのではと思います。
ただし、一応超えないように制限をかけることも可能です。
それが「割り当て上限の確認・設定」です。
これによって、個々の API に対して、1日の上限回数などを設定することができます。
（詳しい設定方法は後述。）
APIキーを取得する
Google Maps APIについてなんとなく理解できたところで、さっそくAPIを使ってみたいところですが、
APIを使うためには、「APIキー」というものを取得する必要があります。
ここから先、APIキーを取得するまでを解説しますが、結構長いので覚悟してください笑
Googleアカウントでログインする
まず、以下のページにアクセスします。
https://console.cloud.google.com/?hl=ja
Goolgleアカウントでログインしていない場合は、ログイン画面になります。
APIキーを取得する
ログインが成功すると、以下の画面になります。
（※ただし、初めてGoogle Cloud Platformを利用する場合に限る）
利用規約に同意して続行ボタンを押しましょう。
次に表示される画面では、「スキップ」でOKです。
プロジェクトを作成する
つづいて、以下の「プロジェクトを選択」をクリックします。
以下の「新しいプロジェクト」をクリックします。
すると以下のような画面になります。
プロジェクト名のところがデフォルトで入力されているので、自分でわかりやすい名前に変えましょう。
完了したら左下の「作成」ボタンを押します。
続いて、以下の「プロジェクトの選択」をクリックします。
さきほど作成したプロジェクトをクリックし、右下の「開く」をクリックします。
以下の黄色枠のように、自分が作成したプロジェクトの名前になっていればOKです。
使用するAPIを有効化する
続いて、左上のハンバーガーメニューをクリックし、「APIとサービス」> 「ダッシュボード」をクリックします。
次に、「APIとサービスの有効化」をクリックします。
すると色々なAPIが表示されると思います。
今回は以下の「Maps JavaScript API」を選択してください。
「有効にする」をクリックします。
以下のようになっていればOKです。
APIキーを作成する
続いて、左サイドバーから「認証情報」をクリックします。
遷移先の画面にて「認証情報を作成」をクリックし、「APIキー」をクリックします。
すると、APIキーが作成されます。
このAPIキーは後程つかうので、どこかにコピーしておいてください。
最後に、このAPIキーを不正利用されないようにするために、上記の「キーを制限」をクリックして設定を行います。
作成したAPIキーに制限をかける
以下のような画面になったら、「アプリケーションの制限」から、
「HTTP リファラー（ウェブサイト）」を選択します。
次に、以下の「項目を追加」を選択して、作成したAPIキーの使用を許可するウェブサイトを設定します。
今回は、ローカル環境用に以下の２つを設定してみます。
http://localhost
http://localhost/*
設定したら、下にある「保存」をクリックします。
（補足）
ローカル環境ではなくexample.comというドメインを登録したい場合は以下の２つを登録します。
https://example.com
https://example.com/*
ドメインがHTTPとHTTPSの両方でアクセスできる場合は、httpに対しても同様に登録する必要があります。
詳しくは以下の公式サイトに書かれているので確認してみてください。
▼https://cloud.google.com/docs/authentication/api-keys?hl=ja&_ga=2.180525095.-1231133906.1633164293#adding_http_restrictions
１日のリクエスト回数を制限しておく
「Google Maps APIの使用料金について」の章で説明した通り、ひと月あたり$200までは無料で使用できます。
そして、大抵のウェブサイトであれば$200を超えるようなことはあまりないです。
とはいえ、念のためリクエスト回数を制限しておくと安心でしょう。
まず、左サイドバーの「割り当て」をクリックします。
１日のリクエスト回数を制限しておこう
次に、以下の黄色枠の矢印をクリックします。
１日のリクエスト回数を制限しておこう
続いて、下の方にスクロールすると以下の黄色枠があります。
赤丸部分の鉛筆マークをクリックしましょう。
１日のリクエスト回数を制限しておこう
以下の黄色枠の指示に従って数値を入力します。
１日のリクエスト回数を制限しておこう
入力する値は、とりあえず952でよいでしょう。
１日のリクエスト数がMAX952であれば、ひと月にMAX952×30日 = 28,560回がMAXとなります。
そのため、$200を超えるしきい値の28,571を超えることはありません。
（※ただし、Maps JavaScript APIの場合です）
ここはご自身のプロジェクトなどによって変わると思うので適宜変更してください。
最後に、「確認」の部分にチェックマークを入れ、「保存」をクリックします。
請求先アカウントを作成する
作成せずに使用すると、以下のようなエラーがコンソールにでてうまく機能しません。
また、請求先アカウントを作成しないと、ひと月$200の無料枠も付与されません。
https://developers.google.com/maps/gmp-get-started より引用
そのため、請求先アカウントを作成します。
まず、以下にアクセスします。
https://console.cloud.google.com/projectselector2/billing/enable
すると、以下のような画面になるので、ご自身で作成したプロジェクトを選択します。
初めて請求先アカウントを作成する場合は、以下のような画面になります。
右下の「請求先アカウントを作成」をクリックして作成しましょう。
すると、以下のような画面になるので適当に設定し、利用規約に同意して「続行」をクリックします。
続いて、電話番号を入力します。
+81の後に、あなたの電話番号を入力しましょう。
完了したら、「コードを送信」をクリックします。
受け取ったコードを入力し、「確認」を押しましょう。
次に、以下の各項目を入力し、一番下の「無料トライアルを開始」をクリックします。
とりあえず、今回は個人用でテストしたいだけなので以下のように設定しました。
無事登録できると以下の画面になります。
回答するのが面倒であれば「閉じる」をクリックしましょう。
これにてAPIキーを使う準備が完了しました！！
余談：実際の案件の場合はクライアント側で設定してもらおう
今までAPIキーを取得するために色々設定していきましたが、実際の案件ではクライアント側でこれらの設定を行ってもらいましょう。
もしあなたのGoogleアカウントで作成した場合、あなたのGoogleアカウントが消えればAPIキーも無効になりますし、請求先もあなただからです。
APIキーを使ってマップを作成してみよう！
さて、いよいよAPIキーを使用していきます。
まず、Google Map表示用の箱をHTMLに用意します。
<div class="map-wrap">
<div id="map" class="map"></div>
</div>
また、body閉じタグより前で以下を記述します。
<!-- "YOUR_API_KEY" の部分に、作成したAPIキーを貼り付ける -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<!-- 👇このjsファイル内にAPIを使用した記述を書く（後述） -->
<script src="/path/to/your_script.js"></script>
</body>
上記の”YOUR_API_KEY”の部分に、作成したAPIキーを貼り付けてください。
APIキーは、以下の部分にあります。
（※この記事を上から順に読んでいただいている方はすでにAPIキーをどこかにコピーしてあると思いますのでそれを使ってもらっても同じです）
続いて、スタイリングします。
.map-wrap {
max-width: 1440px;
margin: 0 auto;
position: relative;
padding-top: (465 / 1440 * 100%);
.map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
padding-topを%で指定すると、親要素の横幅に対する比率になり、レスポンシブ対応が可能になります。
詳しくは以下をご覧ください。
比率を保ちながら画像を拡大縮小させる方法
最後に、jsファイルに以下を記述してみてください。
これでGoogleマップが表示されるかと思います。
（もし表示されない場合は検証ツールのコンソールなどを確認してみてください）
window.initMap = () => {
let map;
const area = document.getElementById("map"); // マップを表示させるHTMLの箱
// マップの中心位置(例:原宿駅)
const center = {
lat: 35.667379,
lng: 139.7054965
};
//マップ作成
map = new google.maps.Map(area, {
center,
zoom: 17,
});
}
簡単に解説
window.initMap = () => { // 省略
このinitMapという名前は、htmlに述した以下のcallbackに指定した名前と一致させる必要があります。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
また、centerというプロパティには、表示させるマップの中心点となる緯度と経度を設定します。
（今回は適当に原宿の緯度と経度を設定しました。）
（補足）
緯度と経度の調べ方は簡単です。
Googleマップで表参道と検索し、以下のURLの部分に表示されています。
また、zoomというプロパティに17という値を設定しました。
ここの値が小さいほど、マップの拡大が小さくなり、全体が広く見渡せるようになります。
一方、この値が大きいほど、マップの拡大が大きくなり、建物の名前などをより細かく表示させることができます。
マーカーを好きな画像にしてみよう！
マーカーを好きな画像にしてみよう！
マーカーの画像を変更するためには、Markerクラスを利用します。
先ほど書いたjsファイルに以下の18～28行目を追記します。
window.initMap = () => {
let map;
const area = document.getElementById("map");// マップを表示させるHTMLの箱
// マップの中心位置(例:原宿駅)
const center = {
lat: 35.6673833,
lng: 139.7054965
};
//マップ作成
map = new google.maps.Map(area, {
center,
zoom: 17,
});
//マーカーオプション設定👇追記
const markerOption = {
position: center, // マーカーを立てる位置を指定
map: map, // マーカーを立てる地図を指定
icon: {
url: '/img/marker.png'// お好みの画像までのパスを指定
}
}
//マーカー作成
const marker = new google.maps.Marker(markerOption);
}
アイコンの大きさに制限はなさそうなのでどんな大きさでもいいですが、一応アイコンのサイズを変更することもできます。
以下のように、iconプロパティにscaledSizeプロパティを追加することで可能です。
//マーカーオプション設定
const markerOption = {
position: center, // マーカーを立てる位置を指定
map: map, // マーカーを立てる地図を指定
icon: {
url: '/img/marker.png', // お好みの画像までのパスを指定
scaledSize: new google.maps.Size(30, 30) //👈追記
}
}
余談：PCとSPでアイコン画像のサイズが変わる場合
PCとSPでアイコン画像のサイズが変わるようなデザインの場合、リサイズイベントなどで監視しながら処理を書くことになるので（たぶん）、若干実装が面倒です。
以下がその実装例です。
const mql = window.matchMedia('screen and (max-width: 767px)'); //、MediaQueryListの生成
let deviceFlag = mql.matches ? 1 : 0; // 0 : PC , 1 : SP
let checkBreakPoint = function (mql) {
deviceFlag = mql.matches ? 1 : 0; // 0 : PC , 1 : SP
}
// ブレイクポイントの瞬間に発火
mql.addListener(checkBreakPoint); //MediaQueryListのchangeイベントに登録
// 初回チェック
checkBreakPoint(mql);
window.initMap = () => {
let map;
const area = document.getElementById("map"); // マップを表示させるHTMLの箱
// マップの中心位置(例:原宿駅)
const center = {
lat: 35.6673833,
lng: 139.7054965
};
const styles = [
//地図全体の色味をカスタマイズ
//グレースケールにするために、saturation(彩度)を最低値-100に設定
{
stylers: [{
saturation: -100
}]
}
];
//マップ作成
map = new google.maps.Map(area, {
center,
scrollwheel: false,
zoom: 17,
styles: styles
});
//マーカーオプション設定
let markerOption = {
position: center, // マーカーを立てる位置を指定
map: map, // マーカーを立てる地図を指定
icon: {
url: '/img/marker02.png', // お好みの画像までのパスを指定
}
}
if (deviceFlag) {
//SP
markerOption = {
...markerOption,
icon: {
...markerOption.icon,
scaledSize: new google.maps.Size(73, 74)
}
}
} else {
//PC
markerOption = {
...markerOption,
icon: {
...markerOption.icon,
scaledSize: new google.maps.Size(73, 74)
}
}
}
//マーカー作成
let marker = new google.maps.Marker(markerOption);
let timer = false;
google.maps.event.addDomListener(window, 'resize', () => {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(() => {
// リサイズが終了した時点で行う処理または関数を記述
if (deviceFlag) {
//SP
marker.setMap(null);
//マーカーオプション設定
markerOption = {
...markerOption,
icon: {
...markerOption.icon,
scaledSize: new google.maps.Size(73, 74)
},
}
//マーカー作成
marker = new google.maps.Marker(markerOption);
} else {
//PC
marker.setMap(null);
//マーカーオプション設定
markerOption = {
...markerOption,
icon: {
...markerOption.icon,
scaledSize: new google.maps.Size(150, 151)
},
}
//マーカー作成
marker = new google.maps.Marker(markerOption);
}
}, 200);
});
}
詳しい説明は省きますが、81行目からの記述で、マップがリサイズされるたびにPCかSPか判断しています。
また、リサイズするたびに画面がちらつかないようにsetTimeoutをつかっています。
（おそらくもっといい方法があると思いますがいったんこんな感じで。笑）
以上のことを考えると、画像の大きさはSPでいい感じに見えるサイズにしておくと、実装がラクだと思います。
地図の色を変えてみよう！
最後に、マップをグレーにしてみます。
マップをグレーにする場合、以下のcssで簡単に実装できます。
（filterプロパティはIE以外の主要ブラウザで使えます）
.map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: grayscale(100%);//👈追記
}
ただし、これだとマーカーの色までグレーになってしまいます。
マーカーの色までグレーに…
マーカーの色はそのままで、マップだけグレーにするためには、cssではなくAPIの設定で処理します。
先ほどのfilterプロパティは削除して、
.map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// filter: grayscale(100%);👈削除
}
jsファイルに以下のように書きます。
window.initMap = () => {
let map;
const area = document.getElementById("map"); // マップを表示させるHTMLの箱
// マップの中心位置(例:原宿駅)
const center = {
lat: 35.6673833,
lng: 139.7054965
};
//👇追記
const styles = [
//地図全体の色味をカスタマイズ
//グレースケールにするために、saturation(彩度)を最低値-100に設定
{
stylers: [{
saturation: -100
}]
}
];
//👆追記
//マップ作成
map = new google.maps.Map(area, {
center,
zoom: 17,
styles: styles // 👈追記
});
//マーカーオプション設定
const markerOption = {
position: center, // マーカーを立てる位置を指定
map: map, // マーカーを立てる地図を指定
icon: {
url: '/img/marker.png' // お好みの画像までのパスを指定
}
}
//マーカー作成
const marker = new google.maps.Marker(markerOption);
}
13～21行目と、28行目を追加しました。
このようにすることで、以下のようになります。
地図だけグレーになりましたね！^^
まとめ
Google Maps APIを使う場合は多少のJSの知識がないと理解が追い付かないかと思いますので若干ハードル高いです。