読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

Study of Web Design & Programing

Google Maps APIの使い方(Google Maps JavaScript API V3)

JavaScript

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

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

ステップ1: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 など)を使用するかどうか

ステップ2:CSS

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

ステップ3: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