郵便番号から得られた住所を元に地図上にマーカー表示を行おうと思っています。
住所からGoogleAPIを利用して、緯度経度情報を取得、地図の更新を行う予定です。
現在、緯度経度情報の取得には成功しているのですが、地図の更新は下記のエラーで実行できません。
Test.js:19TypeError: undefined is not an object (evaluating 'map.setCenter')
どのようにすれば解決できますでしょうか。
実行環境は、Safari、Chrome。ともにローカルで実行しています。
#test.js
javascript
1var map; 2var geocoder; 3var marker; 4function initialize() { 5 var latlng = new google.maps.LatLng(35,135); 6 var opts = { 7 zoom: 15, 8 center: latlng, 9 mapTypeId: google.maps.MapTypeId.ROADMAP 10 }; 11 var map = new google.maps.Map(document.getElementById("map_canvas"), opts); 12} 13 14function SearchMap(address) { 15 var geocoder = new google.maps.Geocoder(); 16 geocoder.geocode( { 'address': address, 'language': 'ja'}, function(results, status) { 17 if (status == google.maps.GeocoderStatus.OK) { 18 alert(results[0].geometry.location); 19 map.setCenter(results[0].geometry.location); 20 } else { 21 console.log('Geocode was not successful for the following reason: ' + status); 22 } 23 }); 24} 25 26function Address(){ 27 var button = document.getElementById("button"); 28 var address1 = UserInput.region.value; 29 var address2 = UserInput.locality.value; 30 var address3 = UserInput.streetaddress.value; 31 var address = address1 + address2 + address3; 32 33 SearchMap(address); 34}
#Test.html
html
1<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3<html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <meta name="robots" content="noindex,nofollow,noarchive" /> 7 <title>地図検索</title> 8 9 <script src="test.js" type="text/javascript"></script> 10 <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key="API_KEY"&sensor=false"></script> 11 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 12 <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> 13 14 <script type="text/javascript"> 15 16 </script> 17 18 </head> 19 20 <body onload="initialize()"> 21 <p>郵便番号を入力してください。</p> 22 <form name="UserInput" class="h-adr"> 23 <span class="p-country-name" style="display:none;">Japan</span> 24 〒<input type="text" class="p-postal-code" size="3" maxlength="3"> 25 -<input type="text" class="p-postal-code" size="4" maxlength="4"> 26 <input name="region" type="text" class="p-region"> 27 <input name="locality" type="text" class="p-locality"> 28 <input name="streetaddress" type="text" class="p-street-address"> 29 30 <input type="button" value="地図検索" onclick="Address()" id="button"> 31 <!-- <button onclick="Address()">地図検索</button> --> 32 </form> 33 34 <p>検索結果</p> 35 <div id="map_canvas" style="width:500px; height:300px"></div> 36 </body> 37</html>
回答1件
あなたの回答
tips
プレビュー