Google Maps API の使い方

NEWS
ad

Google Maps APIの使い方について聞かれたので、ついでに記事にしようと思います。

Google Maps APIの使い方についての記事がいろいろと書かれているということでしたので、見てみたら、とてもわかりづらい記事ばかりでしたので。しかし、上位表示されているので、不思議な感じでした。

結論から言えば、Google Maps APIの使い方は、グーグル(Google)自身が公開している公式のGoogle Maps APIの記事やサンプルコードが一番わかりやすいと思います。

なぜエンジニアではないわたしたちがエンジニアに聞かれないといけないのか…。

まず、Google Maps APIを利用するには、APIキーを取得しなければいけません。また、利用形態によりましては、従量課金となりますので、プライスやグーグル(Google)の利用規約などを事前にチェックしておくことが大切だと思います。キーの取得くらいは、ご自身で。

Google Maps APIのほとんどは、JavaScript。いくつかのMaps APIサービスがあるので、活用したい場合は、それぞれのAPIキーを有効化する必要がありますので。

ここで、ざっくりですが、グーグル(Google)自身が公開しているGoogle Maps APIの一例を。公開されているサンプルコードです。適当に選びました。こちらのサンプルコードをコピペしてYOUR_API_KEYというところに取得したAPIキーを入力して、試しにindex.htmlなどにしてみて試してみれば良いかと思います。それからいろいろとカスタムしていけば良いのではないでしょうか。

ベースができれば、グーグル(Google)の利用規約等の範囲内で、1層、2層…と言った感じで重ねて、良いサービスができれば良いのではないでしょうか。ちゃちゃっといろいろとGoogle Maps APIの記事を久しぶりに検索しましたが、結局グーグル(Google)の公式ウェブサイト(website)が一番わかりやすいと思いましたので。いくつかのAPIが用意されていますので、探検してみてください。現時点で公式サイトで公開されているサンプルコードの一例ですが、アップデートなどにより、変更などがあることがあると思いますのでご了承ください。

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

Google Map API

ちなみに最近だと、良いエンジニア、デベロッパーの人たちも検索上位表示されていなくても非常にわかりやすい記事を書いてくれている方もたくさんいます。例えば、ギットハブ(Github)なんかも良いのかもしれません。

トップへ戻る