iPentec.com  /  Doc  /  HTML  /  JavaScript  /  Google Map

目次

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

Google Map JavaScript API v3を使ってを使ってシンプルな地図を表示します。
注意
この記事で紹介している方法は旧バージョンのAPIを利用する方式のため、現在は動作しません。 新しい Maps JavaScript API または、Maps Embed API を利用して、HTMLページ内にGoogle Mapの地図を埋め込んで表示します。
を参照してください。

事前準備: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?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>

解説

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

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

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

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

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

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

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

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

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

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

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?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?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?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"></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>
このページのキーワード
  • Google Map JS API v3 APIを使ったシンプルな地図表示
著者
ジョニー
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。

関連するページ

最終更新日: 2024-01-22
作成日: 2011-06-06
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.