JavaScriptでの実装

締切済

質問者：fujimon_
質問日時：2013/03/15 23:42
回答数：1件

はじめまして。

google maps apiのGeocoderを使って住所を入力するとwebページ上にその住所を中心とした
地図を表示させたいのですがいまいちうまくいきません。

ソースコードは以下の通りです。

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body { height: 100%; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false" …
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.5.0");
</script>
<script type="text/javascript" src="addressmaps.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function() {
var address = $("#address").val(); // input要素の値を取得
drawMap(address); // 地図を生成する
});
});
</script>
<title>指定した住所を中心とする地図</title>
</head>
<body>
<p>
<input id="address" type="text" value="東京都世田谷区新町3丁目" size="50" />
<button id="button">地図を作る</button>
</p>
<div id="map_canvas" style="width:100%; height:90%;"></div>
</body>
</html>

javascript

// geocodeのための、地図を生成するコールバック関数
function createMap(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
//console.log(result);
var myPosition = result[0].geometry.location;
var myOptions = {
zoom : 14,
center : myPosition,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
}

// 住所から位置を取得し、地図を生成する
function drawMap(myAddress) {
// 住所から位置を取得するためのオブジェクト
var geocoder = new google.maps.Geocoder();

// 住所から位置を取得し、その結果を使って地図を生成する
geocoder.geocode( {
address : myAddress
}, createMap); // コールバック関数createMap()は上で定義されている
}

特にエラーはでないのですが地図が表示されません。
詳しい方、ご教授ください

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2013/03/19 20:56

詳しくはありませんが、回答がないみたいなので…

前回のご質問と同様に、ちゃんとセットアップあれれば動作すると思います。
それなので、スクリプトの読込みなどのトラブルがないか、あるいはjavascriptがオフに設定されていないかなどをチェックしてみてください。
あるいは、あまり一般的でないブラウザをお使いになっているとか…（google apiが動作しないとか？）

内容的にはまったく同じですが、jQueryをはずし、内部スクリプトで記した例を…
（コピペで動かない場合は、スクリプトオフやブラウザが特殊とかの可能性大です）

*仕様を少し変えています。
*初期画面でデフォルトの地図を表示し、後は指定された位置を表示するようにしています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
html, body { height: 100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" …
</head>

<body>
<p>
<input id="address" type="text" value="東京都世田谷区新町3丁目" size="50">
<button id="button">地図を作る</button>
</p>
<div id="map_canvas" style="width:100%; height:90%;"></div>

<script type="text/javascript">
(function(){
var myMap = new google.maps.Map(document.getElementById("map_canvas"), {
zoom : 14,
center : new google.maps.LatLng(35.633, 139.647),
mapTypeId : google.maps.MapTypeId.ROADMAP
});

var geocoder = new google.maps.Geocoder();

function drawMap(){
var val = document.getElementById("address").value;
if(val != ""){
geocoder.geocode({address: val}, function(results, status){
if(status == google.maps.GeocoderStatus.OK)
myMap.setCenter(results[0].geometry.location);
else
alert("位置取得に失敗しました。\n(status): " + status);
});
}
}

google.maps.event.addDomListener(document.getElementById("button"), "click", drawMap, false);
})();
</script>
</body>
</html>