google maps APIのジオコーディング
google maps APIで2箇所の住所を入力し、ジオコーディングし、マーカーを表示させ、２箇所のマーカーの中間点が画面の中心になるように表示させたいのですが、なかなか地図の中心を移動できません。どのようにすればうまくできるでしょうか？
//HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> ジオコーディング</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
</head>
<body onload="initialize()">
<div>
地点１<input id="start" type="textbox" size="50"><br>
地点２<input id="goal" type="textbox" size="50">
<input type="button" value="地図表示" onclick="codeAddress()">
</div>
<div id="map_canvas" style="height:80%"></div>
<br>地点１
<div id="geocoder_info" style="height:10%"></div>
地点２
<div id="geocoder_info2" style="height:10%"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script src="geocode.js"></script>
</body>
</html>
//javascript geocode.js
var map;
var geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(35.699338,139.705146);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map($("#map_canvas").get(0), myOptions);
}
function codeAddress() {
var address = document.getElementById("start").value;
var info = document.getElementById("geocoder_info");
geocoder.geocode( {'address': address},function(results, status) {
info.innerHTML = results[0].formatted_address + "<br>" + results[0].geometry.location;
if (status == google.maps.GeocoderStatus.OK) {
Slat = results[0].geometry.location.lat();
Slng = results[0].geometry.location.lng();
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("次の理由でジオコーディングに失敗しました: " + status);
}
});
var address2 = document.getElementById("goal").value;
var info2 = document.getElementById("geocoder_info2");
geocoder.geocode( { 'address': address2},function(results2, status2) {
info2.innerHTML = results2[0].formatted_address + "<br>" + results2[0].geometry.location;
if (status2 == google.maps.GeocoderStatus.OK) {
Glat = results2[0].geometry.location.lat();
Glng = results2[0].geometry.location.lng();
var marker2 = new google.maps.Marker({
map: map,
position: results2[0].geometry.location
});
} else {
alert("次の理由でジオコーディングに失敗しました: " + status);
}
});
latCenter = ((results[0].geometry.location.lat()) + (results2[0].geometry.location.lat()))/2;
lngCenter = ((results[0].geometry.location.lng()) + (results2[0].geometry.location.lng()))/2;
map.setCenter(latCenter,lngCenter);
}
お礼
taketan_mydns_jp さん ありがとうございます。 試してみます。