Google Maps

簡単な使い方

Google MapsはGoogleの地図サービスです。右の例のように,自分のWebページ内に設置することもできます。

まず,地図上で示したい場所の緯度・経度を調べます。Google Mapsでその場所を右クリックし,「この場所について」をクリックすると,緯度・経度が表示されますので,それをコピー&ペーストして使います。

例えば世界測地系の緯度(北緯)34.7468,経度(東経)136.5248だったとしましょう。この場所をGoogle Mapsでリンクするには,

<a href="http://maps.google.co.jp/maps?q=34.7468,136.5248">奥村研究室</a>

のようにします。

地図をWebページに設置するには,そのページの <head></head> の間のどこか(多分一番下)に,次のようなコードを挿入します。緯度・経度・ズーム・ツールチップ(title)は適当に直してください。ズームは0が世界全図,一番詳しい地図は場所や地図の種類によって18〜21程度のようです。

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(34.7468,136.5248);
  var mapOptions = {
    zoom: 14,
    center: myLatlng
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: '奥村研究室'
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

そして,地図を出したい場所に次のように書きます(これは幅・高さが400ピクセルの例です)。

<div id="map_canvas" style="width:400px; height:400px;"></div>

うまくいったら,本格的に使うためには,スタート ガイド - Google Maps JavaScript API v3 — Google Developers を見て,https://code.google.com/apis/console からAPIキーを取得して,

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script src="http://maps.googleapis.com/maps/api/js?key=ここにキーを書き込む"></script>

のように直します。このとき,「このキーは oku.edu.mie-u.ac.jp/*okumuralab.org/* で使う」という具合に登録しますので,他サイトのキーを勝手に使うことはできません。

1日あたり25,000回の使用制限を超えると有料になります。実際には90日間連続で超えないと大丈夫のようですので,その間に対策ができそうです。詳しくはGoogleの使用制限と購入のページをご覧ください。実際の使用量は https://code.google.com/apis/console で調べられますが,私のところは,今のところ有料になる心配はまったくありません。

トラブルシューティング

CSSに

img { max-width: 100%; }

があると地図がおかしくなります(私もひっかかりました)。対策として,

img { max-width: 100%; }
#map_canvas img { max-width: none; }

のように,Google Mapsの部分だけ打ち消せばいいでしょう。


Last modified: