ウェブ学のすすめ

Study of Web Design & Programing

Google Maps APIの使い方（Google Maps JavaScript API V3）

JavaScript

Google Maps API（Google Maps JavaScript API V3）を使ってページにGoogleマップを表示させてみました。

↓別ウィンドウを開いて見る
Google Maps APIを使ってGoogleマップを表示 - js do it

ステップ１：HTML

ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
ポイント
<script src="http://maps.google.com/maps/api/js?sensor=ここにはfalseかtrueを指定"></script>
  • sensorパラメーター：ユーザーの位置情報を取得するのにセンサー（GPS など）を使用するかどうか

ステップ２：CSS

ソースコード
html { 
    height: 100%;
}
body { 
    height: 100%; 
    margin: 0; 
    padding: 0;
}
#map_canvas { 
    width: 100%;
    height: 100%;
}

ステップ３：JavaScript

ソースコード
function initialize() {
    var latlng = new google.maps.LatLng(35.69167,139.700211);　//緯度, 経度
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }
ポイント

初期設定オプション

  • zoom：数字が大きいほどズームイン(0〜19)
  • center:地図の中心
  • mapTypeId：マップタイプを指定
    • ROADMAP：デフォルト
    • SATELLITE：航空写真
    • HYBRID：航空写真と道路、地名を組み合わせて表示
    • TERRAIN：高度や水系（山、河川など）を表示

緯度, 経度を調べる


↓「Google マップ - 地図検索」から目的の場所を検索し、ドロップされたピンを右クリック＞「この場所について」をクリック

↓検索欄に緯度, 経度の順に表示されるのでコピーして指定の場所に貼り付けます。

↓緯度, 経度を調べられるWebサービス

参考


ホームページ - Google Maps API ― Google Developers