スポンサードリンク

最短コピペで完了!!!

ややこしすぎる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」の箇所を修正し、マーカーアイコンが保存されたディレクトリを指定)

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="defer"></script>
</body>
</html>

スポンサードリンク