GoogleMapの表示、マーカーの設置、緯度・経度の取得の備忘録

GoogleMapの表示、マーカーの設置、緯度・経度の取得の備忘録です。

googlemap-options

デモではオプションのON,OFFの状態を切り替えるのにチェックボックスの表示を置き換えてくれる以下のプラグインを使用しました。


やってること

  • GoogleMapの表示
  • クリックした位置にマーカーを設置
  • クリックした位置の緯度・経度を取得
  • 再描画ボタンクリック時に各種オプションの値を元にマップを再描画

デモは以下↓

GoogleMapの表示設定色々、クリックした位置の緯度・軽度を取得など
http://etc.imo-tikuwa.com/googlemap-options/

再描画ボタンを押すとマーカーの位置の緯度・経度を元にセンタリングします。
ボタンの表示位置を変えるオプションもあるようでしたが、今回は使いませんでした。

以下JavaScriptのソースです。

var $mapContainer = $("#googlemap-view")[0] ? $("#googlemap-view") : null;
var googlemap;
var marker;

$(function(){

	if ($mapContainer){

		// マップ初期化
		_initMap();
		
		// 再描画ボタンクリック時の処理
		$(".redraw").on("click", function(){

			// オプションをセット
			googlemap.setOptions(_getOptions());

			// マーカーをセット
			_putMarker(googlemap.getCenter());

			// マーカーのある場所を中心にセット
			googlemap.setCenter(marker.getPosition());
		});
	}

	// チェックボックスをスイッチっぽくするプラグイン
	$(".checkboxOptions").bootstrapSwitch();
});

/**
 * マップを描画する
 */
function _initMap() {

	// マップを表示
	googlemap = new google.maps.Map(document.getElementById("googlemap-view"), _getOptions());

	// 画面中央にマーカーをセット
	_putMarker(googlemap.getCenter());

	// 地図クリック時のイベントを追加
	google.maps.event.addListener(googlemap, "click", function(event) {
		_putMarker(event.latLng);
	});

	// 地図拡大縮小時のイベントを追加
	google.maps.event.addListener(googlemap, "zoom_changed", function() {
		$(".zoomLevel").val(googlemap.getZoom());
	});
}

/**
 * オプションを設定する
 */
function _getOptions() {
	var lat = $(".latitude").val() ? eval($(".latitude").val()) : eval(35.658599);
	var lon = $(".longitude").val() ? eval($(".longitude").val()) : eval(139.745443);
	var options = {
			zoom: parseInt($(".zoomLevel").val()),
			center: new google.maps.LatLng(lat, lon),
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			disableDoubleClickZoom: true,
			disableDefaultUI : $(".disableDefaultUI").bootstrapSwitch('state'),
			mapTypeControl : $(".mapTypeControl").bootstrapSwitch('state'),
			streetViewControl : $(".streetViewControl").bootstrapSwitch('state'),
			zoomControl : $(".zoomControl").bootstrapSwitch('state'),
			scaleControl: $(".scaleControl").bootstrapSwitch('state'),
			scrollwheel: $(".scrollwheel").bootstrapSwitch('state'),
			};
	return options;
}

/**
 * マーカーを設置する
 */
function _putMarker(position) {

	// 既存のマーカーを削除
	if (marker) {
		marker.setMap(null);
	}

	// マップにマーカーをセット
	marker = new google.maps.Marker({
		position: position, 
		map: googlemap,
	});

	// 緯度・経度をセット
	$(".latitude").val(position.lat());
	$(".longitude").val(position.lng());
}

大体はソース中に書いてあるコメントの通りです。
_getOptionsメソッドでオプションオブジェクトを返します。
_putMarkerメソッドはGoogleMapのLatLngクラスのオブジェクトを引数にマーカーを設置します。
メソッド内で緯度と経度のテキストボックスにクリックした位置の座標を反映しています。

以上です。

スポンサーリンク
GoogleAdsense



GoogleAdsense



シェアする