kazmura11/MFCGoogleMapApp.htm

## MFCGoogleMapApp.htm
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script type="text/javascript"
                src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <title></title>
        <script type="text/javascript">
            var map;

            function initialize() {
                // 東京都庁の座標
                var y = 35.689634;
                var x = 139.692101;
                var latlng = new google.maps.LatLng(y, x);
                var opts = {
                    zoom: 14,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("gmap"), opts);
                document.getElementById("cur_y").innerHTML = y;
                document.getElementById("cur_x").innerHTML = x;
                google.maps.event.addListener(map, 'click', myListener);
            }

            function movePos() {
                var y = document.getElementById("y").value;
                var x = document.getElementById("x").value;
                var pos = new google.maps.LatLng(y, x);
                document.getElementById("cur_y").innerHTML = y;
                document.getElementById("cur_x").innerHTML = x;
                map.panTo(pos);
            }

            function myListener(event) {
                document.getElementById("cur_y").innerHTML = event.latLng.lat();
                document.getElementById("cur_x").innerHTML = event.latLng.lng();
            }

        </script>
        <style type="text/css">
            * {
                font-family:
                    "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
                    "メイリオ", Meiryo,
                    sans-serif;
                font-size: 12px;
            }
            td {
                text-align: center;
            }
            .size_l {
                text-align: center;
                width: 160px;
                height: 20px;
            }
        </style>
    </head>
    <body id="CMFGoogleMapAppDlg" onload="initialize()">
        <table>
            <colgroup>
                <col width="15%" />
                <col width="35%" />
                <col width="15%" />
                <col width="35%" />
            </colgroup>
            <tbody>
                <tr>
                    <th>
                        現在緯度
                    </th>
                    <td>
                        <div class="size_l" id="cur_y"></div>
                    </td>
                    <th>
                        現在経度
                    </th>
                    <td>
                        <div class="size_l" id="cur_x"></div>
                    </td>
                </tr>
                <tr>
                    <th>
                        移動先緯度
                    </th>
                    <td>
                        <input class="size_l" id="y" type="text" />
                    </td>
                    <th>
                        移動先経度
                    </th>
                    <td>
                        <input class="size_l" id="x" type="text" />
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <input type="button" value="緯度経度の場所に移動" onclick="movePos()">
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <div id="gmap" style="width:500px; height:300px"></div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<title></title>
	<script type="text/javascript">
	var map;

	function initialize() {
	// 東京都庁の座標
	var y = 35.689634;
	var x = 139.692101;
	var latlng = new google.maps.LatLng(y, x);
	var opts = {
	zoom: 14,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("gmap"), opts);
	document.getElementById("cur_y").innerHTML = y;
	document.getElementById("cur_x").innerHTML = x;
	google.maps.event.addListener(map, 'click', myListener);
	}

	function movePos() {
	var y = document.getElementById("y").value;
	var x = document.getElementById("x").value;
	var pos = new google.maps.LatLng(y, x);
	document.getElementById("cur_y").innerHTML = y;
	document.getElementById("cur_x").innerHTML = x;
	map.panTo(pos);
	}

	function myListener(event) {
	document.getElementById("cur_y").innerHTML = event.latLng.lat();
	document.getElementById("cur_x").innerHTML = event.latLng.lng();
	}

	</script>
	<style type="text/css">
	* {
	font-family:
	"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
	"メイリオ", Meiryo,
	sans-serif;
	font-size: 12px;
	}
	td {
	text-align: center;
	}
	.size_l {
	text-align: center;
	width: 160px;
	height: 20px;
	}
	</style>
	</head>
	<body id="CMFGoogleMapAppDlg" onload="initialize()">
	<table>
	<colgroup>
	<col width="15%" />
	<col width="35%" />
	<col width="15%" />
	<col width="35%" />
	</colgroup>
	<tbody>
	<tr>
	<th>
	現在緯度
	</th>
	<td>
	<div class="size_l" id="cur_y"></div>
	</td>
	<th>
	現在経度
	</th>
	<td>
	<div class="size_l" id="cur_x"></div>
	</td>
	</tr>
	<tr>
	<th>
	移動先緯度
	</th>
	<td>
	<input class="size_l" id="y" type="text" />
	</td>
	<th>
	移動先経度
	</th>
	<td>
	<input class="size_l" id="x" type="text" />
	</td>
	</tr>
	<tr>
	<td colspan="4">
	<input type="button" value="緯度経度の場所に移動" onclick="movePos()">
	</td>
	</tr>
	<tr>
	<td colspan="4">
	<div id="gmap" style="width:500px; height:300px"></div>
	</td>
	</tr>
	</tbody>
	</table>
	</body>
	</html>