- PR -

Ajaxエラーについて

1|2 次のページへ»
投稿者投稿内容
まさお
常連さん
会議室デビュー日: 2007/11/06
投稿数: 38
投稿日時: 2008-02-15 18:58
お世話になります。

.NET AJAXを利用してGoogle Mapを表示させようとしています。

画面の上部にDropDownList（社員一覧）があり、社員を選択すると、
XMLWebサービスを利用し(.asmx)経度・緯度等の情報を取得し、GoogleMapに表示します。

ところが、肝心なマップが表示されません。

<エラー内容>
'}'がありません。
↓
'GBrowserIsCompatible'は宣言されていません。

DropDownListを選択すると、
'GLatLng'は宣言されていません。
と表示されます。

XMLで緯度・経度情報を呼び出すところはうまくいっていると思うのですが、
肝心なGoogle Map APIのクラスが呼び出せません。
（ちなみにAJAXではないページのGoogleMapは上手く表示することはできました。）

文字コードの問題のなのでじょうか？（UTF-8の指定ができていない)
記述の問題のなのでじょうか？

長くなりましたが、よろしければどなたがご教授願いませんか？

<ソース>
<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>google map</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="manager" runat="server">
<Scripts>
<asp:ScriptReference Path="http://maps.google.com/maps?file=api&amp;v=2&amp;key=APIキー" />
</Scripts>
<Services>
<asp:ServiceReference Path="Scripts.asmx" />
</Services>
</asp:ScriptManager>
<asp:DropDownList ID="list" runat="server" DataSourceID="sds" DataTextField="名前" DataValueField="個人ID"></asp:DropDownList>
<asp:SqlDataSource ID="sds" runat="server" ConnectionString="<%$ ConnectionStrings:MyDB %>" SelectCommand="SELECT 個人ID, 名前 FROM T_社員"></asp:SqlDataSource>
</div>
<asp:Panel ID="pMap" runat="server" Height="400px" Width="500px"></asp:Panel>
<script type="text/javascript">
//<![CDATA[
var map = null;
Sys.Application.add_load(
function(){
if(GBrowserIsCompatible){
map = new GMap2($get('pMap'));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var pt=new GLatLng(35.635199, 139.7676);
map.setCenter(pt,12);
map.setMapType(G_HYBRID_MAP);
}
}
);
Sys.UI.DomEvent.addHandler($get('list'),"change",
function(){
Scripts.GetMapInfo($get('list').value,
function(result){
var pt = new GLatLng(result.AxisY,result.AxisX);
var mark = new GMarker(pt);
map.clearOverlays();
map.addOverlay(mark);
map.setCenter(pt,11);
var sb = new Sys.StringBuilder();
sb.append("<dl><dt><a href='");
sb.append(result.Url);
sb.append("'>");
sb.append(result.Subject);
sb.append("</a></dt><dd>");
sb.append(result.Descript);
sb.append("</dd></dl>");
GEvent.addListener(mark,'click',
function(){
mark.openInfoWindowHtml(sb.toString());
}
);
}
);
}
);
//]]>
</script>
</form>
</body>

</html>


<XML Webサービスクラス(Scripts..asmx)の仕様>
・GetMapInfo(引数:個人ID)メソッドで緯度・経度情報を取得（MapInfoオブジェクトを返す）
・MapInfoクラス
Public Class MapInfo
Public Subject As String
Public Url As String
Public AxisX As String
Public AxisY As String
Public Descript As String
End Class


ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-02-16 01:01
function GBrowserIsCompatible(setBodyClass) {
if (G_INCOMPAT) return false;if (!window.RegExp) return false;
var AGENTS = ["opera","msie","safari","firefox","netscape","mozilla"];
var agent = navigator.userAgent.toLowerCase();
for (var i = 0; i < AGENTS.length; i++) {
var agentStr = AGENTS[i];if (agent.indexOf(agentStr) != -1) {
if (setBodyClass && document.body) {
document.body.className = agentStr;}
var versionExpr = new RegExp(agentStr + "[ \/]?([0-9]+(\.[0-9]+)?)");
var version = 0;if (versionExpr.exec(agent) != null) {
version = parseFloat(RegExp.$1);}
if (agentStr == "opera") return version >= 7;
if (agentStr == "safari") return version >= 125;
if (agentStr == "msie") return (version >= 5.5 &&
agent.indexOf("powerpc") == -1);
if (agentStr == "netscape") return version > 7;
if (agentStr == "firefox") return version >= 0.8;}}
return !!document.getElementById;
}

ということらしいです。

処理後のソースを見て、GBrowserIsCompatible　が存在するか
どうか見てみたらどうでしょう？


<Scripts>
<asp:ScriptReference Path="http://maps.google.com/maps?file=api&amp;v=2&amp;key=APIキー" />
</Scripts>

これは、サーバー側で google API をＧＥＴして貼り付けている
ところだと思うのですが、これがうまく出来ていないので・・・
じゃないかなぁ。

まさお
常連さん
会議室デビュー日: 2007/11/06
投稿数: 38
投稿日時: 2008-02-16 09:38
返信ありがとうございます。

処理後のソースにはGBrowserIsCompatibleは存在します。
試しにGBrowserIsCompatibleの部分をコメントにすると、
「'}'がありません」
↓
「GMap2は宣言されていません。」となりました。

やはりGoogle Map APIがうまく取得できていないようです。

AJAX以外の場合は、
<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY" type="text/javascript" charset="UTF-8"></script>
と記述して、文字コードをUTF-8でしているのですが、
ScriptReferenceでは文字コードの指定はできないのでしょうか？

かるあ
ぬし
会議室デビュー日: 2003/11/16
投稿数: 1190
お住まい・勤務地: センガワ→ムサシノ
投稿日時: 2008-02-17 21:35
試そうと思ったんだけれど、VisualStudioでうまく実行できないので。。。
とりあえず吐き出されたHTMLを確認することをお勧めします。
あとは Sys.Application.add_load じゃなくて pageLoad でやったらどうなりますか？
_________________
かるあ のメモ と スニペット
まさお
常連さん
会議室デビュー日: 2007/11/06
投稿数: 38
投稿日時: 2008-02-18 10:08
引用:

かるあさんの書き込み (2008-02-17 21:35) より:
あとは Sys.Application.add_load じゃなくて pageLoad でやったらどうなりますか？


pageLoadでやってもエラー内容は変わりませんでした。

引用:

かるあさんの書き込み (2008-02-17 21:35) より:
とりあえず吐き出されたHTMLを確認することをお勧めします。


HTMLを確認しましたが、'}'が足りないってことはありませんでした。

<以下 HTML>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1"><title>
ScriptManagerコントロール
</title><link href="App_Themes/MyAjax/StyleSheet.css" type="text/css" rel="stylesheet" /></head>
<body>
<form name="form1" method="post" action="Scripts.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value=省略 />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>


<script src="/XXX/WebResource.axd?d=省略" type="text/javascript"></script>

<script src="/XXX/ScriptResource.axd?d=省略" type="text/javascript"></script>
<script src="/XXX/ScriptResource.axd?d=省略" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=API_KEY" type="text/javascript"></script>
<script src="Scripts.asmx/jsdebug" type="text/javascript"></script>
<div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('manager', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>

<select name="list" id="list">
<option value="1">山田太郎</option>
<option value="2">田中次郎</option>
…省略


</select>

</div>
<div id="pMap" style="height:400px;width:500px;">

</div>
<script type="text/javascript" charset="UTF-8">
//<![CDATA[
var map = null;
Sys.Application.add_load(
function(){
if(GBrowserIsCompatible){
map = new GMap2($get('pMap'));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var pt=new GLatLng(35.635199, 139.7676);
map.setCenter(pt,12);
map.setMapType(G_HYBRID_MAP);
}
}
);
Sys.UI.DomEvent.addHandler($get('list'),"change",
function(){
Scripts.GetMapInfo($get('list').value,
function(result){
var pt = new GLatLng(result.AxisY,result.AxisX);
var mark = new GMarker(pt);
map.clearOverlays();
map.addOverlay(mark);
map.setCenter(pt,11);
var sb = new Sys.StringBuilder();
sb.append("<dl><dt><a href='");
sb.append(result.Url);
sb.append("'>");
sb.append(result.Subject);
sb.append("</a></dt><dd>");
sb.append(result.Descript);
sb.append("</dd></dl>");
GEvent.addListener(mark,'click',
function(){
mark.openInfoWindowHtml(sb.toString());
}
);
}
);
}
);
//]]>
</script>

<div>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value=省略 />
</div>

<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>
</form>
</body>

</html>

まさお
常連さん
会議室デビュー日: 2007/11/06
投稿数: 38
投稿日時: 2008-02-18 19:07
自己レスです。

どうやらScriptReferenceクラスが上手くいってないみたいです。

PathプロパティのGoogleのアドレスのライセンスキーを適当な文字にしても、
エラーがかわりませんでした。

やはり、APIを読み込んでないみたいです。。。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-02-19 00:55
http://maps.google.com/maps?file=api&v=2&key=APIキー

ＡＰＩキーが何モンかわからんのですが、上記をアドレスバーに打ち込むと
ソースのダウンロードダイアログが出てきます。デスクトップに新規保存し
テキストエディタで覗くと、GLoad のＡｄｄなんちゃらＭｅｓｓａｇｅ
メソッドの中で「サーバーが・・・」どーたらこーたらってエラーメッセージ
ぽいのが確認できました。

で、次に、www.google.com/ で、メニューの「地図」をクリックして、
最初に出てくるページのソースを見て、GLoad の中身を覗くと、上記とは
まったく異なるメッセージが確認できました。

で、

http://maps.google.com/maps?file=api
だけ打ち、中身をＧｌｏａｄで検索すると、
function GLoad() {
　　GAddMessages({160: '\x3cH1\x3eサーバー
　　　エラー\x3c/H1\x3e一時的なエラーにより、
　　　リクエストを処理できませんでした。
　　　\x3cp\x3e数分してから再度試してください。
　　　\x3c/p\x3e',
...続く


こんな内容でした。

&amp; は大丈夫？

コレ。


次に、ScriptReference に、charset="utf-8" なるタグ追加するとどーなります？

でちと疑問なんですが、ScriptReferenceにする理由は？
インテリセンスやらコードアシストが有効になるからでしょうか？

正常なAPIキーでAPIソース取得できたら、それをローカルに保存しておいて、
ASPX ファイル内に、直接

<Script src="xxx/google/api.js" type="text/javascript" charset="utf-8"></script>
ってうっちゃえばいいんじゃないかな？




[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-02-19 01:00 ]
かるあ
ぬし
会議室デビュー日: 2003/11/16
投稿数: 1190
お住まい・勤務地: センガワ→ムサシノ
投稿日時: 2008-02-19 08:21
まだ試せてないんだけれど、
Google の API キーって登録時のドメインと同じじゃないと動作しないですよね。
たとえば ASP.NET の開発サーバだとだめなんじゃないかな？
ポート指定で開発サーバを起動してあげるか、IISにホストしてあげればいいけれど。
_________________
かるあ のメモ と スニペット
1|2 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）