SYNCERのロゴ
アイキャッチ画像

ControlPosition

ControlPositionは、コントローラの位置を表す定数です。google.maps.ControlPosition.{NAME}という形で指定できます。

定数

名前説明
TOP_LEFT最上部の左側。LEFT_TOPより上。1
TOP_CENTER最上部の中央。2
TOP_RIGHT最上部の右側。RIGHT_TOPより上。3
LEFT_CENTER左側の真ん中。4
LEFT_TOP左側の上部。TOP_LEFTより下。5
LEFT_BOTTOM左側の下部。BOTTOM_LEFTより上。6
RIGHT_TOP右側の上部。TOP_RIGHTより下。7
RIGHT_CENTER右側の真ん中。8
RIGHT_BOTTOM右側の下部。BOTTOM_RIGHTより上。9
BOTTOM_LEFT最下部の左側。LEFT_BOTTOMより下。10
BOTTOM_CENTER最下部の中央。11
BOTTOM_RIGHT最下部の右側。RIGHT_BOTTOMより下。12

デモ

定数は、地図の各コントローラの位置設定時に、値として指定できます。

// <div id="map-canvas"></div>
var mapDiv = document.getElementById( "map-canvas" ) ;

var opts = {
	center: new google.maps.LatLng( 35, 139 ) ,
	zoom: 11 ,
	disableDefaultUI: true ,
	zoomControl: true ,
	zoomControlOptions: {
		position: google.maps.ControlPosition.BOTTOM_CENTER ,
	} ,
} ;

var map = new google.maps.Map( mapDiv, opts ) ;

サンプルコード

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="map-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	<script>
var mapDiv = document.getElementById( "map-canvas" ) ;

var opts = {
	center: new google.maps.LatLng( 35, 139 ) ,
	zoom: 11 ,
	zoomControl: true ,
	zoomControlOptions: {
		position: google.maps.ControlPosition.BOTTOM_CENTER ,
	} ,
} ;

var map = new google.maps.Map( mapDiv, opts ) ;
	</script>
</body>
</html>

デモページを開く

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月28日 (水)
コンテンツを公開しました。