GoogleMaps API（バージョン指定なし）

Google Maps API v2が廃止され現在はすべてv3によって運用されています。
ここでは「バージョンの指定をしない」場合に、
本日現在にロードされてくるGoogle Maps APIのバージョンを表示して確認しています。

GoogleMaps APIの実行

現在の実行バージョン：

※以下の通り、2015/09/01現在は「3.20」が(Release)ステータスの安定バージョンです。

Concepts | Google Maps JavaScript API#VersionDocs | Google Developers

Documentation of Versions

Documentation will always reflect the experimental version. However, for each version, we will offer a separately maintained reference.

Version 3.20 Reference (Release)

サンプルコード

JavaScript

１行目でライブラリの読み込みを行います。
ここではバージョン指定をせずに読み込んでいます。

function init(){

var map_div = document.getElementById("gmap_canvas");

var gmap_canvas = new google.maps.Map(map_div,{

center: new google.maps.LatLng(34.839450, 134.693903),

zoom : 14,

mapTypeId : google.maps.MapTypeId.ROADMAP

});

console.log(google.maps.version);

var def_marker = create_marker({

map: gmap_canvas,

position: new google.maps.LatLng(34.839450, 134.693903)

});

}

function create_marker(options){

var m = new google.maps.Marker(options);

return m;

}

google.maps.event.addDomListener(window,"load",init);

var gmapv = google.maps.version;

console.log(gmapv);

$('#ver').text(gmapv);

</script>

HTML

HTMLではGoogle Mapを表示するエリア(<div id=”gmap_canvas”></div>)を配置しています。エリアを囲んでいる「<div class=”aspect”></div>」部分は、ページ表示用の高さ制御用のタグです。

<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></div>

1	<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></div>

CSS

CSSではclass=”aspect”に対して、幅100%を指定し、高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。

<style type="text/css">
	.aspect{
		width:100%;
		height:50vw;
	}
	.aspect_normal,
	.aspect_dot,
	.aspect_key,
	.aspect_dotkey{
		width:100%;
		height:25vw;
	}
	#gmap_canvas,
	#gmap_canvas_normal,
	#gmap_canvas_dot,
	#gmap_canvas_key,
	#gmap_canvas_dotkey,
	div.g_canvas{
		width:100%;
		height:100%;
	}

</style>

.aspect{

width:100%;

height:50vw;

}

.aspect_normal,

.aspect_dot,

.aspect_key,

.aspect_dotkey{

width:100%;

height:25vw;

}

#gmap_canvas,

#gmap_canvas_normal,

#gmap_canvas_dot,

#gmap_canvas_key,

#gmap_canvas_dotkey,

div.g_canvas{

width:100%;

height:100%;

}

</style>

参考

最新バージョンは以下で確認できます。

JavascriptMapsAPIv3Changelog – gmaps-api-issues – A changelog that shows the releases for JS API v3. – Google Maps API bug reports and feature requests – Google Project Hosting

バグフィックス等の更新履歴は以下で確認できます。

Issues – gmaps-api-issues – Google Maps API bug reports and feature requests – Google Project Hosting

GoogleMaps APIのロード仕様は以下が参考になります。

Getting Started | Google Maps JavaScript API#Loading_the_Maps_API | Google Developers