Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

周知の事実だが、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/

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away