niiyz/map.js

## map.js
<!DOCTYPE html>
<html>
<head lang="ja">
<meta charset="UTF-8">
<style>
#myMap {
  width: 500px;
  height: 500px;
}
</style>
</head>
<body>
<div id="myMap"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var latLng = new google.maps.LatLng(36.861751, 136.991468);
  var mapOptions = {
    zoom: 10,
    center: latLng
  };
  var div = document.getElementById("myMap");
  var map = new google.maps.Map(div, mapOptions);
  // マップイベント
  google.maps.event.addListener(map, 'click', function(event) {
    var position = event.latLng;
    var myMarker = new MyMarker(map, position);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

/**
 * マイマーカー
 *
 * @param {google.maps.Map} map
 * @param {google.maps.LatLng} position
 *
 * @constructor
 */
function MyMarker(map, position) {
  this.set('map', map);
  this.set('position', position);

  var marker = new google.maps.Marker({
    draggable: true,
    title: '私の作ったマーカー'
  });

  // マーカーイベント
  var infoWindow; // 吹き出し
  // 右クリック
  google.maps.event.addListener(marker, 'rightclick', function (event) {
    if (infoWindow) {
      return;
    }
    var content = '';
    content += '<div>' + marker.get('position') + '</div>';
    // 吹き出し生成
    infoWindow = new google.maps.InfoWindow({
      content: content,
      position: marker.get('position'),
      pixelOffset: new google.maps.Size(0, -25)
    });
    // バツで閉じた
    google.maps.event.addListener(infoWindow, 'closeclick', function (event) {
      infoWindow = null;
    });
    infoWindow.open(map);
  });
  // ドラッグ完了
  google.maps.event.addListener(marker, 'dragend', function (event) {
    if (infoWindow) {
      // 吹き出し削除
      infoWindow.setMap(null);
      infoWindow = null;
    }
  });

  // バインド
  marker.bindTo('map', this);
  marker.bindTo('position', this);

}
MyMarker.prototype = new google.maps.MVCObject();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="ja">
	<meta charset="UTF-8">
	<style>
	#myMap {
	width: 500px;
	height: 500px;
	}
	</style>
	</head>
	<body>
	<div id="myMap"></div>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
	<script>
	function initialize() {
	var latLng = new google.maps.LatLng(36.861751, 136.991468);
	var mapOptions = {
	zoom: 10,
	center: latLng
	};
	var div = document.getElementById("myMap");
	var map = new google.maps.Map(div, mapOptions);
	// マップイベント
	google.maps.event.addListener(map, 'click', function(event) {
	var position = event.latLng;
	var myMarker = new MyMarker(map, position);
	});
	}
	google.maps.event.addDomListener(window, 'load', initialize);

	/**
	* マイマーカー
	*
	* @param {google.maps.Map} map
	* @param {google.maps.LatLng} position
	*
	* @constructor
	*/
	function MyMarker(map, position) {
	this.set('map', map);
	this.set('position', position);

	var marker = new google.maps.Marker({
	draggable: true,
	title: '私の作ったマーカー'
	});

	// マーカーイベント
	var infoWindow; // 吹き出し
	// 右クリック
	google.maps.event.addListener(marker, 'rightclick', function (event) {
	if (infoWindow) {
	return;
	}
	var content = '';
	content += '<div>' + marker.get('position') + '</div>';
	// 吹き出し生成
	infoWindow = new google.maps.InfoWindow({
	content: content,
	position: marker.get('position'),
	pixelOffset: new google.maps.Size(0, -25)
	});
	// バツで閉じた
	google.maps.event.addListener(infoWindow, 'closeclick', function (event) {
	infoWindow = null;
	});
	infoWindow.open(map);
	});
	// ドラッグ完了
	google.maps.event.addListener(marker, 'dragend', function (event) {
	if (infoWindow) {
	// 吹き出し削除
	infoWindow.setMap(null);
	infoWindow = null;
	}
	});

	// バインド
	marker.bindTo('map', this);
	marker.bindTo('position', this);

	}
	MyMarker.prototype = new google.maps.MVCObject();
	</script>
	</body>
	</html>