Google MAPで埋め込みたい地点からiframeで埋め込む方法（このページでは普通の方法と呼びます）と、
それもいいけど、ピンを変更したり色調整したりしたい！ そんなときはGoogle Map APIを使って埋め込む方法の備忘録です。
目次
APIを使用せず普通にiframeで埋め込む方法
まずは普通にiframeでGoogle MAPを埋め込んでみます。
iframeデフォルト
ごくごく普通の配置方法です（ダミーで岩手大学です）。
Demo
埋め込みたい場所をGoogle MAPで開き（ピンがあるならそのピンを選択して表示させた状態で）、「共有」>「地図を埋め込む」タブからサイズを調整するなりしてHTMLをコピー、WEBページの埋め込みたい箇所にペーストします。
HTMLにwidthの指定など含まれていますが、レスポンシブ対応を考えるとwidth="100%"にしちゃうかclassを付加してCSSでサイズ調整することが多いです。
iframeで埋め込む場合、APIキーも何も必要ありません。ただコピペしてアップするだけで設置完了です。
言語変更で英語の地図を埋め込むこともできる
Google MAPの左上、検索窓の頭にハンバーガーメニューがあります。ここをクリックして展開し、色々並んでる下の方にある「言語」から「English(United State)」を選択すると、地図が英語版に切り替わります。この状態で前述と同じように「Share」からHTMLをコピーし、埋め込むことで、英語版の地図を埋め込みができます。
Demo
iframeにCSSフィルターをかける
グレーにしたいなど簡単なカスタマイなら、CSSフィルターを使う手があります。
配置方法は上記と同じですが、iframeに任意のclass（ここでは.grayscale）を付加し、CSSを記述します。
iframe.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}をあてます。
Demo
問題点：IE非対応。ピンにもフィルターがかかってしまう。オリジナルマーカーは付けられない。
Google MAP APIでGoogleマップを埋め込む
もっとデザインを調整したいという場合はGoogle MAP APIを使って埋め込むことになります（普通の方法より当然工数はかかります）。
まずはAPIキーを取得する
APIキーを取得しなければ、Google MAP APIは使用できません。また支払い方法としてクレジットカード情報を登録しないと使用できません。
APIキーを取得手順は、以下のサイトがとても詳しいです。
よっぽどの大企業でもない限り、課金されるほど使用することはないようです。以下参考リンクです。
APIキーを使って実際にページに設置する
1つめのQiitaのリンクで設置まで解説されているのですが、こちらでも解説していきます。
APIの読み込み
Maps JavaScript APIを読み込むための記述を追加します。
<script src="http://maps.google.com/maps/api/js?key=APIキー&language=ja"></script>APIキーの部分に先程取得したAPIキーを入れてください。
SSL化したサイトに配置する場合は、src="http://maps.google.com/（略のhttpの部分をhttpsにしてください。
途中でSSL化した場合など変更を忘れて、地図が非表示になってしまうことがあるので、気を付けましょう。
追記20220613: APIキーをサイトに載せることになるので、勝手に他者がこちらのAPIキーを使ってしまうことがあります。
私の場合はGoogleからエラーを知らせるメールが届きました。Githubで使用されてたのですが、当人へのコンタクト方法が分からず、Google Cloud Platformの「APIとサービス」 > 「認証情報」 > 「APIキーを編集」と入って「アプリケーションの制限」から「HTTP リファラー（ウェブサイト）」でこのサイトからのアクセス以外制限をかける手を取ってみました。
また、「課金」から○円以上の利用でアラートメールが届くようにしておくと万が一の際も安心ですね。
HTMLで埋め込みたい箇所に記述を追加する
<div id="map-test01"></div>ここではidをmap-test01とします。
CSSで埋め込むmapのサイズを指定する
#map-test01 {
height: 400px;
width: 100%;
}サイズは任意で調整してください。
サイズを指定しないとMAPが表示されません。
scriptの記述を追加する
こちらでは地図を表示するための記述を追加します。
以下は最低限の必要な記述です。
<script>
var MyLatLng = new google.maps.LatLng(39.7161777, 141.1364266); //座標を指定
var Options = {
zoom: 15, //地図の縮尺値を指定
center: MyLatLng, //地図の中心座標
mapTypeId: 'roadmap' //地図の種類を指定
};
var map = new google.maps.Map(document.getElementById('map-test01'), Options); //埋め込むMAPのidを指定
</script>デモページ
デフォルトのピンを表示させる
上の例では最低限の指定しかしていないため、ピンすら表示されていませんでした。
前述のscriptの記述内にさらに追加します。
//マーカーの指定
var marker = new google.maps.Marker({
position: MyLatLng,
map: map,
});デモページ
オリジナルのピンを表示させる。
先程のマーカーの追記に指定を加えます。ここではマーカーの設定としてまとめて記載します。
//マーカーの指定
var marker = new google.maps.Marker({
position: MyLatLng,
map: map,
icon: new google.maps.MarkerImage(
'/images/pin.png',//マーカー画像URL
new google.maps.Size(48, 48),//マーカーの表示サイズ（画像サイズに合わせる）
new google.maps.Point(0, 0),//マーカー画像表示の起点（変更しない）
new google.maps.Point(24, 45)//マーカー位置の調整（適時）
),
});デモページ
簡単な設定でグレースケールにする
ここではscriptで彩度の設定をすることでグレースケールにします。
またまたscriptに追記していきます。
//彩度の設定
var mapStyle = [{
"stylers": [{
"saturation": -100 //彩度を無しにしている
}]
}];
var mapType = new google.maps.StyledMapType(mapStyle);
map.mapTypes.set( 'GrayScaleMap', mapType);
map.setMapTypeId( 'GrayScaleMap' );デモページ
グレースケールになったのですが、左上の「地図|航空写真」（マップタイプコントロール）の切り替えをすると元のカラーに戻ってしまいます。
左上のマップタイプコントロールを非表示にする
左上のマップタイプコントロール「地図|航空写真」を非表示にします。
scriptのvar Optionsに一行追加するだけです。
//マーカーの指定
var marker = new google.maps.Marker({
zoom: 15,
position: MyLatLng,
map: map,
mapTypeControl: false, //マップタイプコントロールの表示設定
});デモページ
さらにscriptで凝った調整をしてみる
上記を参考にカスタマイズして行きます。簡単に言うとStyling Wizard: Google Maps APIsというサービスを使って色々調整し、吐き出されたJSONをscriptに追記します。
このカスタマイズで色の調整をしますので、前述のグレースケール（彩度）の指定は外してください。
scriptが非常に長くなるのでここでは例は出しません。
設定項目が多岐に渡っていて、うまく調整していかないと見づらくなりアクセシビリティ的にも宜しくない結果になってしまいますが、近隣のPinを減らせるのは嬉しいかも。
このサイト（事業所一覧 | ユーフーズ株式会社）ではGoogle MAPのカスタマイズを頑張って、まるでイラレで作ったような地図に仕上げています。
あと、普通に外枠のdivにCSSでborder-radiusが効きますね。
デモページ
このscriptのオプションで調整はいくらでもできるのですが、実際に使うことはあまり無さそうなので、参考リンクだけ載せておきます。
ついでに、かっこ良く調整してシックに決めてるサイトを見つけたので、こちらのリンクを置いておきます。カフェも気になりますね〜。（追記：2022.02.01: 閉店しちゃってました）
エラー原因探索表
書いてある通りにやっても表示されない。でも何らかの要因で不具合が起きている。症状によって原因が絞り込めるので、簡単にまとめてみました。
| 症 状 | 原 因 |
|---|---|
| 地図が配置されるべき場所が真っ白（スペースは空いている） | ・head内のAPIキーの読み込みscriptを記述していますか？ また、サイトに合わせてhttphttpsを変えていますか？・親要素に高さ指定してるからと地図を配置する idの高さを100%とすると表示されません。px指定しましょう。・最近、サイトのSSL化をしませんでしたか? headタグに記述するAPIキーもhttpからhttpsにする必要があります。・カスタマイズを頑張ろうとして scriptの記述を間違えても真っ白になります。 |
| 地図の代わりにグレー背景とエラーメッセージ。 | ・head内のAPIキーの読み込みscriptに正しくAPIキーがコピペされていますか？ |
| 地図の上に半透明グレーがかかって「For development purposes only」の文字（上記画像ですね）。 | ・APIキーを取得するとき、クレジットカード登録を忘れていませんか？ ・APIキーが必要なかった時代に設置して、そのまんまになってませんか？ APIキーを取得してMAPを配置し直すか、普通にiframeでのMAPを埋め込みに修正しましょう。 |
| そもそも地図が配置されるスペースごと表示されていない。 | ・地図を配置するidに高さ・横幅の指定をCSSでちゃんとしていますか？ idやclassの綴り間違いなど疲れてるとうっかりやりがち……。 |
やらかしてナレッジを得るたびに追加していく予定です。