【Google Map】Javascriptのメソッド

// キャンパスの要素を取得する
var canvas = document.getElementById( 'map-canvas' ) ;

// 中心の位置座標を指定する
var latlng = new google.maps.LatLng( 35.681177, 139.766751 );

// 地図のオプションを設定する
var mapOptions = {
zoom: 15 , // ズーム値
center: latlng , // 中心座標 [latlng]
};

// [canvas]に、[mapOptions]の内容の、地図のインスタンス([map])を作成する
var map = new google.maps.Map( canvas, mapOptions ) ;

地図を表示するには、Mapクラスを利用します。第1引数には、地図キャンパスとなるエレメント(div要素など)、第2引数には、オプションとなるオブジェクトを指定します。インスタンスを作成した時点で、地図は描画されるので、左辺(var map =の部分)は必ずしも必要ありません。インスタンスを代入した任意名の変数(map)は後ほど、地図を操作する際に利用できます。逆に、一度表示して、その後は一切地図を操作しない場合は不要だということです。

JavaScript
var map = new google.maps.Map( canvas , MapOptions )

番号	引数	説明
第1引数	canvas	地図のキャンパスにする要素。
第2引数	MapOptions	地図のオプションを表すオブジェクト。

canvas

// 地図のキャンパスとなるdiv要素を取得
var canvas = document.getElementById( "map-canvas" ) ;

MapOptions


// 地図のオプションを設定する (第2引数に指定)
var mapOptions = {
zoom: 15 , //ズーム値
center: new google.maps.LatLng( 35.681177, 139.766751 ) , //中心の位置座標

// disableDefaultUI: true , //デフォルトUIをなくす
// draggable: false , //ドラッグできなくする
// ...
} ;

// 地図のインスタンスを作成する
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 15 , // ズーム値
center: new google.maps.LatLng( 35.681177, 139.766751 ) , // 中心の位置座標
} ) ;

// マーカーのインスタンスを作成する
var marker = new google.maps.Marker( {
map: map , // 地図
position: new google.maps.LatLng( 35.681177, 139.766751 ) , // 位置座標
} ) ;

マーカーを設置するにはMarkerクラスを利用します。引数は、オプションとなるオブジェクトのみです。

JavaScript

var marker = new google.maps.Marker( MarkerOptions )

番号	引数	説明
第1引数	MarkerOptions	マーカーのオプションを表すオブジェクト。

MapOptions

// マーカーのオプションを設定する (引数に指定)
var MarkerOptions = {
map: map , // 設置する地図

position: new google.maps.LatLng( 35.681177, 139.766751 ) , // 位置座標
} ;

// 地図のインスタンスを作成する
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 15 , // ズーム値
center: new google.maps.LatLng( 35.681177, 139.766751 ) , // 中心の位置座標
} ) ;

// 情報ウィンドウのインスタンスを作成する
var infoWindow = new google.maps.InfoWindow( {
content: "SYNCER" , // 内容
position: map.getCenter() , // 位置座標
} ) ;

infoWindow.open( map ) ;

情報ウィンドウを設置するにはInfoWindowクラスを利用します。引数は、オプションとなるオブジェクトのみです。

JavaScript

var infoWindow = new google.maps.InfoWindow( InfoWindowOptions )

番号	引数	説明
第1引数	InfoWindowOptions	情報ウィンドウのオプションを表すオブジェクト。

InfoWindowOptions

// 情報ウィンドウのオプションを設定する (引数に指定)
var InfoWindowOptions = {
map: map , // 設置する地図
content: "SYNCER" , // 表示する内容
} ;

// 地図のインスタンスを作成する
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 15 , // ズーム値
center: new google.maps.LatLng( 35.681177, 139.766751 ) , // 中心の位置座標
} ) ;

// ポリラインのインスタンスを作成する
var polyline = new google.maps.Polyline( {
map: map ,
path: [
new google.maps.LatLng( 35.681177, 139.766751 ) ,
new google.maps.LatLng( 35.581177, 139.666751 ) ,
] ,
} ) ;

// 地図のビューポートを修正する
var latLngBounds = new google.maps.LatLng( 35.681177, 139.766751 ) ;

polyline.getPath().forEach( function ( latLng ) {
latLngBounds.extend( latLng ) ;
} ) ;

map.fitBounds( latLngBounds ) ;

ポリラインを設置するにはPolylineOptionsクラスを利用します。引数は、オプションとなるオブジェクトのみです。

JavaScript

var polyline = new google.maps.Polyline( PolylineOptions )

番号	引数	説明
第1引数	PolylineOptions	ポリラインのオプションを表すオブジェクト。

PolylineOptions

// ポリラインのオプションを設定する (引数に指定)
var PolylineOptions = {
map: map , // 設置する地図
path: [ // 線が結ぶ位置座標 (任意の数)
new google.maps.LatLng( 35.681177, 139.766751 ) ,
new google.maps.LatLng( 35.581177, 139.666751 ) ,
] ,
} ;

// 地図のインスタンスを作成する
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 15 , // ズーム値
center: new google.maps.LatLng( 35.681177, 139.766751 ) , // 中心の位置座標
} ) ;

// ポリゴンのインスタンスを作成する
var polygon = new google.maps.Polygon( {
map: map ,
paths: [
new google.maps.LatLng( 35.681177, 139.766751 ) ,
new google.maps.LatLng( 35.581177, 139.666751 ) ,
new google.maps.LatLng( 35.481177, 139.566751 ) ,
new google.maps.LatLng( 35.381177, 139.466751 ) ,
] ,
} ) ;

// 地図のビューポートを修正する
var latLngBounds = new google.maps.LatLng( 35.681177, 139.766751 ) ;

polygon.getPaths().forEach( function ( latLngs ) {
latLngs.forEach( function ( latLng ) {
latLngBounds.extend( latLng ) ;
} ) ;
} ) ;

map.fitBounds( latLngBounds ) ;

ポリゴンを設置するにはPolygonOptionsクラスを利用します。

JavaScript

var polygon = new google.maps.Polygon( PolygonOptions )

番号	引数	説明
第1引数	PolygonOptions	ポリゴンのオプションを表すオブジェクト。

PolygonOptions

// ポリゴンのオプションを設定する (引数に指定)
var PolygonOptions = {
map: map , // 設置する地図
paths: [ // 多角形の角となる位置座標 (任意の数)
new google.maps.LatLng( 35.681177, 139.766751 ) ,
new google.maps.LatLng( 35.581177, 139.666751 ) ,
new google.maps.LatLng( 35.481177, 139.566751 ) ,
new google.maps.LatLng( 35.381177, 139.466751 ) ,
] ,
} ;

var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 15 , // ズーム値
center: new google.maps.LatLng( 35.681177, 139.766751 ) , // 中心の位置座標
} ) ;

// レクタングルのインスタンスを作成する
var rectangle = new google.maps.Rectangle( {
bounds: new google.maps.LatLngBounds( // 境界
new google.maps.LatLng( 35.681177, 139.766751 ) ,
new google.maps.LatLng( 35.581177, 139.666751 )
) ,
map: map , // 地図
} ) ;

// 地図のビューポートを修正する
map.fitBounds( rectangle.getBounds() ) ;

レクタングルを設置するにはRectangleOptionsクラスを利用します。

JavaScript

var rectangle = new google.maps.Rectangle( RectangleOptions )

番号	引数	説明
第1引数	RectangleOptions	多角形のオプションを表すオブジェクト。

RectangleOptions

// レクタングルのオプションを設定する (引数に指定)
var RectangleOptions = {
map: map , // 設置する地図
bounds: new google.maps.LatLng( 35.681177, 139.766751 )
new google.maps.LatLng( 35.581177, 139.666751 ) ,
new google.maps.LatLng( 35.481177, 139.566751 )
) ,
} ;

// 地図のインスタンスを作成する
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 15 , // ズーム値
center: new google.maps.LatLng( 35.681177, 139.766751 ) , // 中心の位置座標
} ) ;

// 円のインスタンスを作成する
var circle = new google.maps.Circle( {
center: new google.maps.LatLng( 35.681177, 139.766751 ) , // 中心の位置座標
map: map , // 設置する地図
radius: 10000 , // 半径
} ) ;

// 地図のビューポートを修正する
map.fitBounds( circle.getBounds() ) ;

円を設置するにはCircleOptionsクラスを利用します。

JavaScript

var circle = new google.maps.Circle( CircleOptions )

番号	引数	説明
第1引数	CircleOptions	円のオプションを表すオブジェクト。

CircleOptions

// 円のオプションを設定する (引数に指定)
var CircleOptions = {
map: map , // 設置する地図
center: new google.maps.LatLng( 35.681177, 139.766751 ) , // 中心の位置座標
radius: 10000 , // 半径
} ;

// 地図のインスタンスを作成する
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 15 , // ズーム値
center: new google.maps.LatLng( 35.681177, 139.766751 ) , // 中心の位置座標
} ) ;

// LatLngBoundsのインスタンスを作成する
var LatLngBounds = new google.maps.LatLngBounds(
new google.maps.LatLng( 35.681177, 139.766751 ) ,
new google.maps.LatLng( 35.381177, 139.366751 )
) ;

// オーバーレイのインスタンスを作成する
var groundOverlay = new google.maps.GroundOverlay( "./overlay.png", LatLngBounds, {
clickable: false , // クリックの有効、無効
map: map , // 設置する地図
opacity: 0.85 , // 不透明度
} ) ;

// 地図のビューポートを修正する
map.fitBounds( groundOverlay.getBounds() ) ;

オーバーレイを設置するにはGroundOverlayクラスを利用します。

JavaScript

var circle = new google.maps.GroundOverlay( Image, LatLngBounds|LatLngBoundsLiteral, GroundOverlayOptions )

番号	引数	説明
第1引数	Image	画像ファイルのパス。
第2引数	LatLngBounds|LatLngBoundsLiteral	境界を表すLatLngBoundsクラスのインスタンス、またはLatLngBoundsLiteralオブジェクト。
第3引数	GroundOverlayOptions	オーバーレイのオプションを表すGroundOverlayOptionsオブジェクト。

GroundOverlayOptions

// オーバーレイのオプションを設定する (引数に指定)
var GroundOverlayOptions = {
map: map , // 設置する地図
} ;

// キャンパスの要素を取得する
var canvas = document.getElementById( 'map-canvas' ) ;

// ストリートビューのオプションを設定する
var StreetViewPanoramaOptions = {
position: new google.maps.LatLng( 35.681177, 139.766751 ) , // 位置座標
} ;

// ストリートビューのインスタンスを作成する
var map = new google.maps.StreetViewPanorama( canvas, StreetViewPanoramaOptions ) ;

地図を表示するには、StreetViewPanoramaクラスを利用します。第1引数には地図キャンパス(div要素)、第2引数にはオプションとなるオブジェクトを指定します。インスタンスを作成した時点でストリートビューは表示されます。インスタンスだけを作成して表示はしたくない場合は、オプションでvisible(表示状態)にfalseを指定しましょう。

JavaScript

var streetViewPanorama = new google.maps.StreetViewPanorama( canvas , StreetViewPanoramaOptions )

番号	引数	説明
第1引数	canvas	ストリートビューのキャンパスにする要素。
第2引数	StreetViewPanoramaOptions	ストリートビューのオプションを表すオブジェクト。