googlemapのAPIを使って住所検索した結果から緯度、経度を取り出したいです。

解決課題
googlemapのgeocoder apiを使って検索した場所の表示と緯度、経度を取得し
その後、ヒュべニの公式を使い２点間の距離を測るプログラムを作成したいのですが
緯度、経度をそれぞれのdiv要素に取得したいのですがその部分で詰まってしまいました。
コードはgoogleapiのgeocoderページのサンプルコードを参考として改変しています。

実行環境:googleChrome

プログラムのコード

<!DOCTYPE html>
<html>
<head>
    <title>Geocoding service</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 500px;
            width: 50%;
        }
        #floating-panel {
            position: absolute;
            top: 0px;
            left: 50%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            font-family: 'Roboto','sans-serif';
            line-height: 30px;
            padding-left: 10px;
		}
		#addressExplain {
			position: relative;
			top : 0px;
			left: 0px;
			font-size: 'sans-serif';


        }

    </style>
</head>
<body>
<div id="floating-panel">
	<p id="addressExplain">住所を入力</p>
    <input id="address" type="textbox" value="東京">
    <input id="submit" type="button" value="Geocode">
</div>
<div id="mySchool">
	<p>産技短の緯度</p>
	<input id="shonaiCitLatitude" type="text" value="38.876127" disabled="true">
	<p>経度は</p>
	<input id="shonaiCitLongitude" type="text" value="139.834633" disabled="true">
</div>
<div id="searchPlace">
	<p>検索地の緯度</p>
	<input id="searchPlaseLatitude" type="text" value="">
	<p>経度は</p>
	<input id="searchPlaceLongitude" type="text" value="">	
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
    function initMap() 
    {
        var myLatLng = {lat: 35.658581, lng: 139.745433};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            center: myLatLng
        });
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map
        });
        var geocoder = new google.maps.Geocoder();

        document.getElementById('submit').addEventListener('click', function() {
            geocodeAddress(geocoder, map);
        });
    }

    function geocodeAddress(geocoder, resultsMap) 
    {
        var address = document.getElementById('address').value;
        var latitude = document.getElementById('searchPlaseLatitude').value;
		var longitude = document.getElementById('searchPlaceLongitude').value;
		geocoder.geocode({'address': address}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) { 
                resultsMap.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: resultsMap,
                    position: results[0].geometry.location
                });
			// blockに緯度を渡す
			latitude = geocoder.geocode.results[0].geometry.location.lat;
			// blockに経度を渡す
			longitude = geocoder.geocode.results[0].geometry.location.lng;

            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
    initMap();
</script>
</body>
</html>

エラー

geocoderSample.html:93 Uncaught TypeError: Cannot read property '0' of undefined
    at geocoderSample.html:93
    at geocoder.js:5
    at geocoder.js:3
    at YU (geocoder.js:2)
    at Zm.<anonymous> (geocoder.js:3)
    at common.js:55
    at nn.f (common.js:14)
    at Zm.j (common.js:55)
    at Object.c [as _dbvt6f] (common.js:48)
    at GeocodeService.Search?4s東京&7sUS&9sja&callback=_xdc_._dbvt6f&token=99712:1

退会済みユーザー

2018/01/28 04:39

エラーの再現方法を提示してください。

Kuri9898

2018/01/28 11:09

修正しましたのでご確認下さい

退会済みユーザー

2018/01/28 12:32

何を修正したと言うのですか？

Kuri9898

2018/02/01 05:34

エラーの再現方法を記述し、投稿ボタンを押したはずなのですが修正されていませんでした。問題は自身で解決出来ました。わざわざ配慮してくださったのにすみませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<title>Geocoding service</title>
5		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6		<meta charset="utf-8">
7		<style>
8			html, body {
9				height: 100%;
10				margin: 0;
11				padding: 0;
12			}
13			#map {
14				height: 500px;
15				width: 50%;
16			}
17			#floating-panel {
18				position: absolute;
19				top: 0px;
20				left: 50%;
21				z-index: 5;
22				background-color: #fff;
23				padding: 5px;
24				border: 1px solid #999;
25				text-align: center;
26				font-family: 'Roboto','sans-serif';
27				line-height: 30px;
28				padding-left: 10px;
29			}
30			#addressExplain {
31				position: relative;
32				top : 0px;
33				left: 0px;
34				/*
35				font-size: 'sans-serif';
36				*/
37			}
38
39		</style>
40	</head>
41	<body>
42		<div id="floating-panel">
43			<p id="addressExplain">住所を入力</p>
44			<input id="address" type="textbox" value="東京">
45			<input id="submit" type="button" value="Geocode">
46		</div>
47		<div id="mySchool">
48			<p>産技短の緯度</p>
49			<input id="shonaiCitLatitude" type="text" value="38.876127" disabled="true">
50			<p>経度は</p>
51			<input id="shonaiCitLongitude" type="text" value="139.834633" disabled="true">
52		</div>
53		<div id="searchPlace">
54			<p>検索地の緯度</p>
55			<input id="searchPlaseLatitude" type="text" value="">
56			<p>経度は</p>
57			<input id="searchPlaceLongitude" type="text" value="">
58		</div>
59		<div id="map"></div>
60		<script src="https://maps.googleapis.com/maps/api/js"></script>
61		<script>
62			function initMap()
63			{
64				var myLatLng = {lat: 35.658581, lng: 139.745433};
65				var map = new google.maps.Map(document.getElementById('map'), {
66					zoom: 15,
67					center: myLatLng
68				});
69				var marker = new google.maps.Marker({
70					position: myLatLng,
71					map: map
72				});
73				var geocoder = new google.maps.Geocoder();
74
75				document.getElementById('submit').addEventListener('click', function () {
76					geocodeAddress(geocoder, map);
77				});
78			}
79
80			function geocodeAddress(geocoder, resultsMap)
81			{
82				var address = document.getElementById('address').value;
83				var latitude = document.getElementById('searchPlaseLatitude').value;
84				var longitude = document.getElementById('searchPlaceLongitude').value;
85				geocoder.geocode({'address': address}, function (results, status) {
86					if (status === google.maps.GeocoderStatus.OK) {
87						resultsMap.setCenter(results[0].geometry.location);
88						var marker = new google.maps.Marker({
89							map: resultsMap,
90							position: results[0].geometry.location
91						});
92						// blockに緯度を渡す
93						latitude = results[0].geometry.location.lat();
94						document.getElementById('searchPlaseLatitude').value = latitude;
95						// blockに経度を渡す
96						longitude = results[0].geometry.location.lng();
97						document.getElementById('searchPlaceLongitude').value = longitude;
98					} else {
99						alert('Geocode was not successful for the following reason: ' + status);
100					}
101				});
102			}
103			initMap();
104		</script>
105	</body>
106</html>