この記事で紹介している方法は旧バージョンのAPIを利用する方式のため、現在は動作しません。
新しい Maps JavaScript API または、Maps Embed API を利用して、HTMLページ内にGoogle Mapの地図を埋め込んで表示します。
を参照してください。
Google Map JavaScript API v3を使ってを使ってシンプルな地図を表示します。
GoogleMapの仕様変更があり、現在ではAPIキーが必須になっています。こちらの記事を参照して、GoogleMap APIのキーを取得します。
下記の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 id="map_canvas" style="width:100%; height:100%"></div>
MapTypeId は以下が選択可能です。
| 値 | 意味 |
|---|---|
| ROADMAP | 地図を表示します。 |
| SATELLITE | 航空写真を表示します。 |
| HYBRID | 航空写真上に主要な道路や施設を表示します。 |
| TERRAIN | 地形図を表示します。 |
サーバーに配置した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);
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にアクセスします。下図の画面が表示されます。
動作しない場合は地図を表示する枠のサイズを固定にすると表示される場合があります。
<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キーを指定する場合は、http://maps.google.com/maps/api/js にkeyパラメーターで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キーが必須になっています。
<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>
