Googleマップをサイトに表示する_Part1「基本とかマーカー画像とか」

サイトにGoogleマップを載せているところも今ではたくさんあるけど、そのやり方については結構高度な印象があって、Google公式ドキュメントを見てもブログサイトを見ても初心者には分かりづらかったので勉強してみた。それを備忘録として、自分なりに分かりやすく書いていこうと思う。備忘録って言葉を久しぶりに使った。このサイトのコンセプトなのにね。
なお、この記事はJavaScript、jQueryをある程度使える人を対象として書いていますが、コピペからちょっといじったりして使えたりすると思うので、好きにいじってみてください。
GoogleMapsAPIを読み込む
なにはともあれAPIを読み込む。これを読み込むだけでMapの機能が使える。ありがとうGoogle。
<script src="//maps.google.com/maps/api/js"></script>
この時、APIキーというものが必要になる。キーの取得やAPIの使用はすべて無料。勝手にAPI使わずに申請してねってことで取得しましょう。Googleのデータやリソースを全力で使わせてもらう感じになるので、キーはちゃんと取得しておく。でもこのサイトの説明が分かりやすいから丸投げする。
こうやって取得したキーをさっきのスクリプトに書き込む。
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX"></script>
ちょっと前まではキーの設定と一緒に「sensor」という設定が必要だったんだけど、今は必要ない。どうやら不要→必要→不要という流れらしい。ブレブレ。
これでGoogleMapsが使えるようになった。