Google Maps API v3を使ってウェブサイトやブログに地図を表示する

Google Maps API v3を使ってウェブサイトやブログに地図を表示する

Posted at April 25,2014 2:34 AM
Tag:[GoogleMaps]

Google Maps API v3を使ってウェブサイトやブログに地図を表示する方法を紹介します。

Google Maps API v3を使った地図

本エントリーではGoogleマップの基本的な表示するために必要な、下記の手順について説明します。

  • APIキーの取得
  • Googleマップの表示
  • 中心地点の設定
  • 縮尺の設定

1.APIキーの取得

Google APIコンソールのページを開いて、Google アカウントでログインし、表示された画面の左メニューにある「APIs & auth」をクリック。

左メニュー

APIの一覧が表示されるので、「Google Maps JavaScript API v3」の右側にある「OFF」をクリック。

APIの一覧

サービス利用規約に同意する場合はチェックボックスをチェックして「Accept」をクリック。

(クリックで拡大)
サービス利用規約

「Google Maps JavaScript API v3」のSTATUSが「ON」になったことを確認。

設定完了

「Credentials」をクリック。

左メニュー

「Public API access」に表示されている「API key」を次項で利用します。

(クリックで拡大)
Public API access

2.地図を表示する

ここでは地図を表示するための最低限のコードを紹介します。

まず、地図を表示するページに以下のscript要素を設定します。赤色で示したkeyパラメータには、1項で取得したAPIキー、sensorパラメータにはアプリケーションがユーザーの位置情報取得にGPSなどのセンサーを使用する場合はtrue、そうでない場合はfalseを設定します。

<script src="http://maps.googleapis.com/maps/api/js?key=APIキー&sensor=false"></script>

地図を表示させるためのHTMLとCSSを設定します。

<style>
#map {
    width: 300px;
    height: 300px;
}
</style>
  :
<div id="map"></div>

そして、地図を表示するためのスクリプトを設定します。このサンプルではペーストしてすぐ動作を確認できるよう、新宿駅を表示する設定にしています。

<script>
google.maps.event.addDomListener(window, 'load', function() {
    var mapdiv = document.getElementById('map');
    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(35.689779, 139.700381),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };
    var map = new google.maps.Map(mapdiv, myOptions);
});
</script>

表示内容の変更方法は3項および4項で説明します。

3.地図の中心地点(緯度・経度)を設定する

地図の中心地点は、centerパラメータ(赤色部分)に緯度と経度を設定します。

   :
    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(35.689779, 139.700381),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };
   :

新しいGoogleマップを利用しているのであれば、検索結果のURLパラメータに緯度・経度が表示されます。

(クリックで拡大)
検索結果のURL

より詳細に緯度・経度を決めたい場合は、ざっくり検索したあと、中心にしたい地点を右クリックして「この場所について」を選択。

検索結果

左上に詳細情報が表示され、その中に緯度・経度情報も表示されるので、そのままコピーすればOKです。

詳細情報

4.地図の縮尺を設定する

地図の縮尺は、zoomパラメータ(赤色部分)に1~21の値を設定します。値が大きくなるほど縮尺の分母の値が小さくなります。

   :
    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(35.689779, 139.700381),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };
   :

縮尺は3項と同様、検索結果のURLパラメータに表示されます。

検索結果

ブラウザ上で地図の縮尺を変更すればこの値も書き替わるので、表示を確認しながら値を決めるとよいでしょう。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)