難解なGoogle Maps APIをややこしい説明なし5ステップで完了させる

スポンサードリンク

最短コピペで完了!!!

ややこしすぎるGoogle Maps APIで1日ハマったので、備忘録。少し強引だが、5ステップでまとめてみた。複数のカスタムマーカーにも対応してるので、これさえあれば、どの地図でもほぼほぼカバーできるでしょう。ふーーー汗。大雑把に書いたので、今後時間あるときにでも見やすく清書したいと思います。

5ステップ

  1. GoogleAPI登録し、APIコードを取得する
  2. 下記HTMLコードの「あなたのGoogleMapsAPIコードをここ」にAPIコードペースト
  3. HTMLファイルをサーバーにアップ(オンラインのサーバーにアップすること。LAMP等のローカル環境NG)
  4. ブラウザでアクセスして、MAPが表示されればほぼ完成。あとはCSSとHTMLなど分解して自由にスタイリング。
  5. 経度、緯度、ズーム、センターポジション、などを調べ、lat、lng、zoom等に入力。(マーカーのカスタマイズなどはコードのコメント参照を。「あなたのURL」の箇所を修正し、マーカーアイコンが保存されたディレクトリを指定)

各ステップの詳細説明

1. GoogleAPI登録し、APIコードを取得する

上記リンクに行き、下記手順でAPI取得
  1. サイドバー > ダッシュボード
  2. APIを有効にする
  3. 検索フォームに「Google Static Maps API」と入力
  4. 「Google Static Maps API」選択
  5. 「有効にする」選択
  6. サイドバー > 認証情報
  7. 「認証情報を作成」> 「API」選択
  8. APIをメモ(これがAPIコード)
  9. APIに名前をつける
  10. 「アプリケーション制限タブ」でリファラー(API使用を許可するURL)を入力。この際、テストサイトURLもつけておく。
  11. API制限でMap API選び保存
  12. ⚠️マークが取れていれば5分で反映

注意点:API制限でテストサーバーやローカル許可しても、本サイトでないと反映されない

HTML内に追記(CSS含んでいるのでこれ一枚で完了)

下記コードをhead内にペースト(といいながら、すみません、これペーストしなくてもいいです。ペーストすると閉じタグないし、おかしいですね。なんだっけこれ…)

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true_or_false">
ポイント
  • 「true_or_false」は、位置検知センサー(GPSなど)がある機器ではtrue、それ以外はfalse。
  • iPhoneなどの地図を表示する場合はtrue、それ以外はfalse。
  • PC用の地図ならfalse。

HTML(CSS含んでいるのでこれ一枚で完了)

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps API</title>
    <style>
      #Map {
      height: 400px;
      width: 100%;
      }
    </style>
  </head>
  <body>
 <!--HTMLに表示 -->
    <div id=Map></div>
 <!--Google Maps API -->
  <script>
    function initMap() {
      var mymark = {lat: 35.67241, lng: 139.48073};  // 目的地
      var park1 = {lat: 35.67295, lng: 139.48122}; // パーキング1
      var park2 = {lat: 35.67122, lng: 139.48}; // パーキング2
      var park3 = {lat: 35.67017, lng: 139.47816};  // パーキング3
      var mycenter = {lat: 35.6716, lng: 139.4797};  // センターポジション

      var map = new google.maps.Map(document.getElementById('Map'), {
        zoom: 17,  // ズーム値
        center: mycenter,
        scrollwheel: false  // スクロールの有無
      });

      var marker = new google.maps.Marker({
        position: mymark,
        map: map,
        animation: google.maps.Animation.DROP  // ドロップアニメの有無
      });
      // カスタムマーカーは下記コメント参照
      // var markerImg1 = {url: 'http://www.moranbong.tokyo/images/icons/icon_parking.png'}; // カスタムマーカーの画像ファイルを指定
      // icon: markerImg1 // カスタムマーカーの画像呼び出し
      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';    // マーカーの画像ファイルを指定
      var marker = new google.maps.Marker({
        position: park1,
        map: map,
        icon: iconBase + 'parking_lot_maps.png'   // マーカーの画像呼び出し
      });
      var marker = new google.maps.Marker({
        position: park2,
        map: map,
        icon: iconBase + 'parking_lot_maps.png'   // マーカーの画像呼び出し
      });
      var marker = new google.maps.Marker({
        position: park3,
        map: map,
        icon: iconBase + 'parking_lot_maps.png'   // マーカーの画像呼び出し
      });
    }
    </script>
    <!--Google Maps API - CODE -->
<script src="https://maps.googleapis.com/maps/api/js?key=あなたのGoogleMapsAPIコードをここに&callback=initMap" async defer></script>
</body>
</html>

スポンサードリンク

この記事を書いた人

mojigumi

mojigumiの代表、コウです。
主に広告デザインを中心に、企画・出版・編集・印刷、Web制作をしています。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします