Google Maps JavaScript API V3を使って地図を表示する

  • Hatena Bookmark:
  • Twitter:
Google Maps JavaScript API V3を使って地図を表示する

Webサイトの「交通アクセス」ページなんかで事業所やお店の位置をGoogle Mapに表示する際に、マーカーやマーカーウィンドウをオリジナルに変更したい場合に作成したJavaScriptの記述…自分コピペ用。

地図内に1つのマーカー、1つのウィンドウを表示する仕様。

ページ内の見出し一覧

JavaScriptの記述と関数の実行方法

JavaScriptの記述

var getGmap = function ( _elmtId, _mapMarker, _zoom, _iconSrc, _centerPnt ) {
	if( !_elmtId ||
	(!(_mapMarker instanceof Array)) || 
	(_centerPnt && !(_centerPnt instanceof Array)))	return;
	//変数
	var elmtId = _elmtId;
	var zoom = (_zoom)? _zoom : 8;
	var image = _iconSrc;
	var lat = _mapMarker[0];
	var lng = _mapMarker[1];
	var cLat = (_centerPnt)? _centerPnt[0] : lat;
	var cLng = (_centerPnt)? _centerPnt[1] : lng;
	
	//地図オプション
	var mapLatLng = new google.maps.LatLng(cLat, cLng);
	var mapOptions = {
		zoom: zoom,
		center: mapLatLng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    //地図描画
    var map = new google.maps.Map(document.getElementById(elmtId), mapOptions);
	
	//マーカー配置
	var marker = new google.maps.Marker({
		map:map,
		//animation: google.maps.Animation.DROP,
		position: new google.maps.LatLng(lat, lng),
		icon: image,
	});
	//ウィンドウの設定
	var infowindow = new google.maps.InfoWindow({
        content:  winContent()
    });
    //ウィンドウ表示イベントの登録
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    })
    //ウィンドウの内容
    function winContent(){
    	var html = '';
    	//↓ウィンドウに挿入するHTMLを記述
    	html += '<strong>東京タワー</strong><br />';
    	html += '<p>テキストテキストテキストテキスト</p>';
    	//↑ウィンドウに挿入するHTMLを記述
    	return html;
    };
}

関数の実行方法

getGmap(
	'表示エレメントのID',
	 [マーカーの緯度, マーカーの経度], 
	拡大値,
	'マーカーの画像', 
	[地図中央の緯度, 地図中央の経度], 
);
表示エレメントのID[文字列]
Google Mapを表示するエレメントのIDの名前を入力(必須)。
マーカーの緯度・マーカーの経度[数字]
地図に表示したいマーカーの位置をGeocoding – 住所から緯度経度を検索等から調べて入力(必須)。
拡大値[数字]
Google Mapのズーム値。デフォルトは8。値の分だけ表示地図が拡大する。
マーカーの画像[文字列]
JavaScriptを実行するHTMLからの相対パスか、絶対パスで指定。
地図中央の緯度・地図中央の経度[数字]
図に表示したいマーカーの位置をGeocoding – 住所から緯度経度を検索等から調べて入力。

表示するGoogle Mapのサイズ

表示エレメントのCSSで調整する

#表示エレメントのID {
	width: 500px;
	height: 500px;
}

使用例1:マーカーの位置を指定する

表示エレメントID「map1」に、東京タワーを中央にし、マーキングした地図を表示する。

getGmap('map1', [35.658609, 139.745447], 15);

デモを別ウィンドウで確認する

使用例2:マーカーの画像を指定する

表示エレメントID「map2」に、東京タワーを中央にし、マーキングした地図を表示し、自前で用意した東京タワーアイコンを表示する。

getGmap('map2',[35.658609, 139.745447], 17, 'tower.png');

デモを別ウィンドウで確認する

以下コードを付け加える事で、表示の際にアイコンを弾ませることもできる。

animation: google.maps.Animation.DROP

弾むアイコンのデモを別ウィンドウで確認する

使用例3:地図の中央を変更する

表示エレメントID「map3」に、東京タワーにマーキングし、地図の中心を東京プリンスホテルにした地図を表示し、自前で用意した東京タワーアイコンを表示する。

getGmap('map3',[35.658609, 139.745447], 16, 'tower.png', [35.659075, 139.748088]);

デモを別ウィンドウで確認する

Post Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Return to page top