Google Mapsはiframeなどで任意の場所にピンを立てた地図をwebサイトに埋め込める。試しに北海道庁にピンを落としたgoogleマップを埋め込んでみる。
このベーシックなgoogleマップではなく、地図そのものを夜景モードっぽくしたりモノクロ（グレースケール）で表示することも実はできる。ピンマークをオリジナル画像にすることだってできる。Google Maps APIを使う。
Google Maps APIの基本は、API KEYの取得から始まる？
まず基本。Google Maps APIのページ。ここを手繰っていけばドキュメンテーションなどが読める。
といっても初めてだとよくわからないのでネット検索するわけだけれど、ネット検索のときに注意すべき点がひとつある。それがAPI KEYの要否。2016年10月頃（？）からGoogle Maps APIの利用にはAPI KEYが必要になっているので、それ以前に書かれた記事の方法だと、API KEYに関する記述がないために、うまく表示されないケースがあると思われる。
Google Maps APIの基本のソース
これはGoogle Maps APIのwebサイトに掲載されている。
マーカーが配置された Google マップをウェブサイトに追加する | Google Maps JavaScript API | Google Developers
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>モノクロ（グレースケール）にしたい場合はスタイル関係を設定する
Google Maps API でマップの見た目を変えることも可能。たとえば夜モードっぽくする例が公式サイトに載っている。
マップのスタイル設定を開始する | Google Maps JavaScript API | Google Developers
モノクロ（グレースケール）にしたい場合は、上記のコードの「center: uluru」のあとに「,（カンマ）」を付けたうえで、以下のコードを追加する。
styles: [
{
stylers: [
{"saturation": "-100" }
]
}]“saturation”: “-100” というのが彩度を下げる的な意味を持つらしい。
stylesの追記でマップ全体の表示がおかしくなった件
ある案件でグレースケールにしようとstyles:[{}]を追記してみたら、googleマップの表示がおかしくなった。ピンは正しく表示されるが背景画像（本来地図が表示されるエリア）は単一色。その背景画像をドラッグすると正しい状態で表示された周辺地図が現れる。といった具合。
この表示の不具合はIEでは発生せずchromeやfirefoxで発生した。原因がわかるまで3時間かかった。
原因は、webサイトのcssに記載していた「img:max-width:100% !important;」の「!important;」であった。
スマホファーストを意識してレスポンシブデザインのサイトでスマホからcssを記述していて「!important;」をわざわざ追加したらこの始末。まいったまいった。
Google Maps API に関しては、まだ一からやっていないので、このページはあくまで備忘録。