[JavaScript] Google Map JavaScript API v3 APIを使ったシンプルな地図表示

このページのタグ:[HTML] [JavaScript] [Google Map]
Google Map JavaScript API v3を使ってを使ってシンプルな地図を表示します。

事前準備:APIキーの取得

GoogleMapの仕様変更があり、現在ではAPIキーが必須になっています。こちらの記事を参照して、GoogleMap APIのキーを取得します。

プログラム

下記のHTMLファイルを作成しサーバーにアップします。

map.html


<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&key=(APIキー)"></script> 
<script type="text/javascript"> 
  function initialize() { 
    var latlng = new google.maps.LatLng(35.681143,139.767165); 
    var myOptions = { 
      zoom: 15, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  } 
 
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html>

解説

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
表示するGoogleMapのビューポートの設定をMetaタグでします。

<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&key=(APIキー)"></script>
GoogleMapを利用するためのJavaScriptファイルを読み込みます。

function initialize() {
 ...
}
はBodyタグのonloadイベントで呼び出される初期化関数を実装しています。

var latlng = new google.maps.LatLng(35.681143,139.767165);
GoogleMapの地図を表示する位置(地図の中心点の緯度経度)クラスのインスタンスを作成します。

var myOptions = {
  zoom: 15,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
にて地図のオプションを設定します。

zoom: 15,
地図の拡大の度合いを設定します。数値が大きいほど大きく拡大されます。(詳細な地図が表示されます)

center: latlng
にて表示する地図の中心の緯度経度を指定します。

mapTypeId: google.maps.MapTypeId.ROADMAP
表示する地図の形式を設定します。今回は道路地図を表示します。

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
にてGoogleMapの地図インスタンスを作成します。

<div id="map_canvas" style="width:100%; height:100%"></div>
にてDIVタグのブロック領域に"map_canvas"IDの地図を描画します。

MapTypeId

MapTypeId は以下が選択可能です。
意味
ROADMAP地図を表示します。
SATELLITE航空写真を表示します。
HYBRID航空写真上に主要な道路や施設を表示します。
TERRAIN地形図を表示します。

実行結果

サーバーに配置したmap.htmlにアクセスします。下図の画面が表示されます。

動作するバージョン



プログラム例2

map-frame.html


<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=(APIキー)"></script> 
<script type="text/javascript"> 
  function initialize() { 
    var latlng = new google.maps.LatLng(35.681143,139.767165); 
    var myOptions = { 
      zoom: 15, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  

    var myLatlng = new google.maps.LatLng(35.685867,139.760578);
    var marker = new google.maps.Marker({
       position: myLatlng,
       map: map,
       title:"Hello 大手門!"
    });
  } 
 
</script> 
</head> 
<body onload="initialize()"> 
  <div style="width:780px">
  <div style="float:left;width:256px;">
    Googleマップをページ内に表示<br/>
    マップの操作もできますよ<br/>
  </div>
  <div id="map_canvas" style="float:left;width:512px; height:256px;"></div> 
  <div style="clear:left;"></div>
  </div>
</body> 
</html>

解説

Google Map JavaScript API v3のマップ表示は指定したDIVタグ(ブロック領域)のエリア部分にマップを表示するため、GoogleMapを表示するDIV領域をページの一部分に設定すればページの一部にマップを表示できます。
iframeなどを用いなくても、ページの一部にGoogleMapの地図を表示できます。

実行結果

サーバーに配置したmap-frame.htmlにアクセスします。下図の画面が表示されます。

動作しない場合

動作しない場合は地図を表示する枠のサイズを固定にすると表示される場合があります。

コード例

map.html


<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=(APIキー)"></script> 
<script type="text/javascript"> 
  function initialize() { 
    var latlng = new google.maps.LatLng(35.681143,139.767165); 
    var myOptions = { 
      zoom: 15, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  } 
 
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas" style="width:600px; height:480px"></div> 
</body> 
</html>

APIキーを指定する場合

APIキーを指定する場合は、http://maps.google.com/maps/api/js にkeyパラメーターでAPIキーを指定します。APIキーの取得手順はこちらの記事を参照してください。
APIキーを指定するコード例

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=(APIキー)"></script> 
<script type="text/javascript"> 
  function initialize() { 
    var latlng = new google.maps.LatLng(35.681143,139.767165); 
    var myOptions = { 
      zoom: 15, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  } 
 
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html>

以前はAPIキーを指定しなくても地図が表示されましたが、現在はAPIキーが必須になっています。
APIキーを指定しないコード例

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  function initialize() { 
    var latlng = new google.maps.LatLng(35.681143,139.767165); 
    var myOptions = { 
      zoom: 15, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  } 
 
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html>
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)