ksomemo · May 5, 2012 12:25
diff --git a/googleMaps.html b/googleMaps.html
 <!DOCTYPE>
 <html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Google Maps</title>
    <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <style type="text/css">
      #map {
        width:  100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Google Maps</h1>

    <div id="info_window_content">情報ウィンドウのコンテンツ用</div>

    <form id="geo_search">
      住所検索：
      <input type="text"   id="geo_search_word" name="geo_search_word" value="" />
      <input type="submit" id="geo_search_btn"  name="geo_search_btn"  value="検索" />
    </form>

    <div id="lat_lng">
      緯度：<input type="text" id="lat" name="lat" value="" />
      経度：<input type="text" id="lng" name="lng" value="" />
      緯度経度取得対応：<span id="latlng_enable"></span>
      <input type="button" id="latlng_get" name="latlng_get" value="現在位置の緯度経度を表示" />
    </div>

    <div>
      <input type="radio" id="map_type_id_0" name="map_type_id" value="0" />
      <label for="map_type_id_0">HYBRID</label>
      <input type="radio" id="map_type_id_1" name="map_type_id" value="1" checked="checked" />
      <label for="map_type_id_1">ROADMAP</label>
      <input type="radio" id="map_type_id_2" name="map_type_id" value="2" />
      <label for="map_type_id_2">SATELLITE</label>
      <input type="radio" id="map_type_id_3" name="map_type_id" value="3" />
      <label for="map_type_id_3">TARRAIN</label>
    </div>

    <div>
      <input type="checkbox" id="navi_control" name="navi_control" value="1" />
      <label for="map_type_id_0">ナビゲーション</label>
    </div>

    <div id="map"></div>

  </body>
  <script type="text/javascript">
    $(function() {
      // APIリファレンス(https://developers.google.com/maps/documentation/javascript/reference?hl=ja)
      var latlng,
          options,
          map,
          geocoder;

      // マーカーの表示
      var marker = function() {
        new google.maps.Marker({
          position: map.getCenter(),
          map:      map
        });
      };

      // 現在地の取得
      if (navigator.geolocation) {
        $('#latlng_enable').text('している');
        $('#latlng_get').fadeIn();
      } else {
        $('#latlng_enable').text('していない');
      }

      // 初期化処理
      var init = function() {
        latlng = new google.maps.LatLng(35.69, 139.70);
        options = {
          zoom:              15,
          center:            latlng,
          navigationControl: false,
          mapTypeId:         google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'), options);

        geocoder = new google.maps.Geocoder();
        marker();
      };
      init();

      // 現在位置の取得
      $('#latlng_get').live('click', function() {
        navigator.geolocation.getCurrentPosition(function(position) {
          console.log(position);
          map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));

        }, function(err) {
          console.log(err.code);
          console.log(err.message);
        });
      });

      var map_type_id_list = [
        google.maps.MapTypeId.HYBRID,
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE,
        google.maps.MapTypeId.TERRAIN
      ];

      // geocodingで住所を経度緯度に変換
      $('#geo_search').submit(function() {
        geocoder.geocode({
          address: $('#geo_search_word').val()
        }, function(result, status) {
           if (status == google.maps.GeocoderStatus.OK) {
             map.panTo(result[0].geometry.location);
             latlng = result[0].geometry.location;
             dispLatlng();
             marker();

           } else {
             alert('error');
           }
        });

        return false;
      });

      // クリックした場所にマーカーを表示
      google.maps.event.addListener(map, 'click', function(event) {
        var added_marker = new google.maps.Marker({
          position:  event.latLng,
          draggable: true,
          title:     "marker's title'",
          icon:      new google.maps.MarkerImage('images/marker/my_marker.png'),
          map:       map
        });

        // クリックした場所の住所を情報ウィンドウに表示
        geocoder.geocode({
          latLng: event.latLng
        }, function(result, status) {
           if (status == google.maps.GeocoderStatus.OK) {
             var info_window_at_clicked = new google.maps.InfoWindow({
               content: result[0].formatted_address
             });
             info_window_at_clicked.open(map, added_marker);

           } else {
             alert('error');
           }
        });

        // 追加したマーカークリック時の動作
        google.maps.event.addListener(added_marker, 'click', function() {
          var added_info_window = new google.maps.InfoWindow({
            content:  '<strong>Added is ' + new Date() + '.</storong>' ,
            position: event.latLng
          });
          added_info_window.open(map);
        });
      });

      // 情報ウィンドウの表示
      var info_window = new google.maps.InfoWindow({
        // NG content:  $('#info_window_content'),
        content:  document.getElementById('info_window_content'),
        position: map.getCenter()
      });
      info_window.open(map);

      // 緯度経度を表示
      var dispLatlng = function() {
        $('#lat').val(latlng.lat());
        $('#lng').val(latlng.lng());
      };
      dispLatlng();

      $('map_type_id').click(function() {
        ;
      });

      // ナビゲーションの表示切替
      $('#navi_control').click(function() {
        options.navigationControl = $(this).is(':checked');
        map = new google.maps.Map(document.getElementById('map'), options);
        marker();
      });

    });

  </script>
 </html>
	<!DOCTYPE>
	<html lang="ja">
	<head>
	<meta charset="UTF-8" />
	<title>Google Maps</title>
	<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<style type="text/css">
	#map {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<h1>Google Maps</h1>

	<div id="info_window_content">情報ウィンドウのコンテンツ用</div>

	<form id="geo_search">
	住所検索：
	<input type="text" id="geo_search_word" name="geo_search_word" value="" />
	<input type="submit" id="geo_search_btn" name="geo_search_btn" value="検索" />
	</form>

	<div id="lat_lng">
	緯度：<input type="text" id="lat" name="lat" value="" />
	経度：<input type="text" id="lng" name="lng" value="" />
	緯度経度取得対応：<span id="latlng_enable"></span>
	<input type="button" id="latlng_get" name="latlng_get" value="現在位置の緯度経度を表示" />
	</div>

	<div>
	<input type="radio" id="map_type_id_0" name="map_type_id" value="0" />
	<label for="map_type_id_0">HYBRID</label>
	<input type="radio" id="map_type_id_1" name="map_type_id" value="1" checked="checked" />
	<label for="map_type_id_1">ROADMAP</label>
	<input type="radio" id="map_type_id_2" name="map_type_id" value="2" />
	<label for="map_type_id_2">SATELLITE</label>
	<input type="radio" id="map_type_id_3" name="map_type_id" value="3" />
	<label for="map_type_id_3">TARRAIN</label>
	</div>

	<div>
	<input type="checkbox" id="navi_control" name="navi_control" value="1" />
	<label for="map_type_id_0">ナビゲーション</label>
	</div>

	<div id="map"></div>

	</body>
	<script type="text/javascript">
	$(function() {
	// APIリファレンス(https://developers.google.com/maps/documentation/javascript/reference?hl=ja)
	var latlng,
	options,
	map,
	geocoder;

	// マーカーの表示
	var marker = function() {
	new google.maps.Marker({
	position: map.getCenter(),
	map: map
	});
	};

	// 現在地の取得
	if (navigator.geolocation) {
	$('#latlng_enable').text('している');
	$('#latlng_get').fadeIn();
	} else {
	$('#latlng_enable').text('していない');
	}

	// 初期化処理
	var init = function() {
	latlng = new google.maps.LatLng(35.69, 139.70);
	options = {
	zoom: 15,
	center: latlng,
	navigationControl: false,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById('map'), options);

	geocoder = new google.maps.Geocoder();
	marker();
	};
	init();

	// 現在位置の取得
	$('#latlng_get').live('click', function() {
	navigator.geolocation.getCurrentPosition(function(position) {
	console.log(position);
	map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));

	}, function(err) {
	console.log(err.code);
	console.log(err.message);
	});
	});

	var map_type_id_list = [
	google.maps.MapTypeId.HYBRID,
	google.maps.MapTypeId.ROADMAP,
	google.maps.MapTypeId.SATELLITE,
	google.maps.MapTypeId.TERRAIN
	];

	// geocodingで住所を経度緯度に変換
	$('#geo_search').submit(function() {
	geocoder.geocode({
	address: $('#geo_search_word').val()
	}, function(result, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	map.panTo(result[0].geometry.location);
	latlng = result[0].geometry.location;
	dispLatlng();
	marker();

	} else {
	alert('error');
	}
	});

	return false;
	});

	// クリックした場所にマーカーを表示
	google.maps.event.addListener(map, 'click', function(event) {
	var added_marker = new google.maps.Marker({
	position: event.latLng,
	draggable: true,
	title: "marker's title'",
	icon: new google.maps.MarkerImage('images/marker/my_marker.png'),
	map: map
	});

	// クリックした場所の住所を情報ウィンドウに表示
	geocoder.geocode({
	latLng: event.latLng
	}, function(result, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	var info_window_at_clicked = new google.maps.InfoWindow({
	content: result[0].formatted_address
	});
	info_window_at_clicked.open(map, added_marker);

	} else {
	alert('error');
	}
	});

	// 追加したマーカークリック時の動作
	google.maps.event.addListener(added_marker, 'click', function() {
	var added_info_window = new google.maps.InfoWindow({
	content: '<strong>Added is ' + new Date() + '.</storong>' ,
	position: event.latLng
	});
	added_info_window.open(map);
	});
	});

	// 情報ウィンドウの表示
	var info_window = new google.maps.InfoWindow({
	// NG content: $('#info_window_content'),
	content: document.getElementById('info_window_content'),
	position: map.getCenter()
	});
	info_window.open(map);

	// 緯度経度を表示
	var dispLatlng = function() {
	$('#lat').val(latlng.lat());
	$('#lng').val(latlng.lng());
	};
	dispLatlng();

	$('map_type_id').click(function() {
	;
	});

	// ナビゲーションの表示切替
	$('#navi_control').click(function() {
	options.navigationControl = $(this).is(':checked');
	map = new google.maps.Map(document.getElementById('map'), options);
	marker();
	});

	});

	</script>
	</html>