【メモ】Google MAPを使用する際の注意点

周知の事実だが、Google MAPはAPIキーが必要となり、APIキーがないと表示されなくなった。
久しぶりにGoogle MAPをカスタマイズする機会があったので、やった範囲を備忘録として残そうと思う。

Google MAP API使用時の注意点

無償版ではJavaScript APIの使用が25,000回/日が限度となっている為、
アクセスが多いサイトなどでは注意が必要。
→https://developers.google.com/maps/documentation/javascript/usage?hl=ja
念のため、当然、「Googleアカウント」は必要なので、ない場合は用意しておく。

Google API発行の手順

【公式サイト】
https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja
【分かりやすいサイト】
https://its-office.jp/blog/web/2016/12/18/google-map-api.html

注意点としては、APIキーを取得する際、HTTPリファラーのラジオボタンにチェックを入れ、
「example.com/*」と入力すること。
ワイルドカードを付けるとそれ以降のディレクトリすべてに適用できる

この対応をしないと、APIキーがどのサイトでも使用できる状態になってしまう。
※もしテスト環境がある場合もそのテストサイトのURLを入れておかないと表示されない

もし設定を忘れてしまった場合は、
https://console.developers.google.com/?hl=ja
このURLから設定を変更できる。

Google MAPの実装

①スクリプトを読み込ませる

以下のスクリプトをhead内などに読み込ませる。

index.html

<script src="http://maps.google.com/maps/api/js?key=任意のAPIキー"></script>

任意のAPIキーの箇所には、上記で発行したキーを入れる。
ローカルで作業する場合、APIキーを入れるとマップが表示されないので

index.html

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

としてkeyの値を空にした状態で作業をするとよい。
※テストアップ、本番アップ時に入れるのを忘れないようにすること

②HTMLに以下のコードを記載

以下のhtmlを入れる。
※ID名は任意で構わない

index.html

<div id="map"></div>

③jsを書く

以下のjsを書く。

script.js

google.maps.event.addDomListener(window, 'load', init);
function init() {
  var latlng = new google.maps.LatLng(任意の座標,任意の座標);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, /*表示枠内の中心点*/
    mapTypeId: google.maps.MapTypeId.ROADMAP,/*表示タイプの指定*/
    center: latlng, /*表示枠内の中心点*/
    mapTypeControl: false,/*マップタイプ・コントローラの制御*/
    scaleControl: false,/*地図のスケールコントローラの表示*/
    streetViewControl: false,/*ストリートビューの表示*/
    scrollwheel: false/*ホイール操作でのズーム値の変更*/
  };
  var map = new google.maps.Map(document.getElementById('map'), myOptions);
}

オプションは今回私が実装したものを抜粋しているが、
https://syncer.jp/Web/API/Google_Maps/JavaScript/Map/
このサイトの「オプション」を参照すると、どういう値が入力できるか理解できる。
falseをtrueにすることによって切り替え可能。

上記コードを説明すると、

var latlng = new google.maps.LatLng(任意の座標,任意の座標);

この部分は
任意の座標はGoogle Mapで検索したときに表示されるURLからとれる。
例えば、東京駅の場合、
https://www.google.co.jp/maps/place/%E6%9D%B1%E4%BA%AC%E9%A7%85/@35.6811673,139.7648629,17z/
というURLになるので、

var latlng = new google.maps.LatLng(35.6811673,139.7648629);

とする。また、

document.getElementById('map')

部分だが、この'map'という箇所が先程指定した<div id="map"></div>のIDに値する。

なお、個人的に入れておいた方がいい値として、

scrollwheel: false/*ホイール操作でのズーム値の変更*/

は入れるかどうか検討した方がよいと思う。
大きいサイズのGoogle Mapを設置している際、
スクロールしているとマップのところで止まり、マップの拡大縮小が
始まるので、コンテンツを読ませたいときに邪魔になる。

以上で、マップが表示されるはずだ。

カスタマイズ

①マーカを設置する

script.js

  /*アイコンが常にセンター表示*/
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
  /*WEB企画アイコンの取得*/
  var icon = {
     url: 'マーカー画像のディレクトリ',
     size: new google.maps.Size(60, 60),/*マーカーのサイズA*/
     scaledSize: new google.maps.Size(60, 60),/*マーカーのサイズB*/
     origin: new google.maps.Point(0, 0),/*マーカーの位置*/
     anchor: new google.maps.Point(30, 60)/*マーカーの位置*/
  };
  /*マーカーの設置*/
  var markerOptions = {
    position: latlng,/*表示場所と同じ位置に設置*/
    map: map,/*var 任意 = new google.maps.Map(document.getElementById('map'), myOptions);の"任意"の値を入れる*/
    icon: icon,/*var icon = ～～のiconを入れる*/
    title: '任意のタイトル'/*マーカーのtitle。hoverした際に表示される。*/
  };
  var marker = new google.maps.Marker(markerOptions);

自分で作ったマーカーを設置する場合、上記を参考にする。マーカーをレティナ対応にする場合は
マーカーのサイズAとマーカーのサイズBの値を同じ値にして、揃える。
マーカーの位置を設定しておかないと、先程入れた座標からアイコンがずれるので任意で設定すること。

②デザインをカスタマイズする

script.js

var styleOptions =
    [
　　内容
    ];

  var styledMapOptions = { name: '任意の名前。迷ったらサイト名とかでよい' }
  var forType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('任意の値', forType);
  map.setMapTypeId('任意の値');

任意の値は半角英数で同じ名前を入れる。
実際のカスタマイズ内容は、「内容」の部分に記載するが、
以下2サイトを使用すると、楽にデザインが設定できる。

①Snazzy Maps
https://snazzymaps.com/

②StyledMapWizard
http://www.dwzone-it.com/StyledMapWizard/StyledMapWizard.asp

特に②のほうは、自分好みにカスタマイズできるのでお勧めだ。
ここで取得した値を、[　]内に貼り付けると任意のデザインになるはずだ。

その他便利サイト

これまでいろいろ書いてきたが、

■EZMAP
https://ezmap.co/

このサイトで作成したものをベースとしてもよいと思う。