Google mapが表示されない

下記のサイトを参考にサイドバー付の地図を作成しました。
http://googlemaps.googlermania.com/google_maps_a …
アップロードする前はいつでも問題なく表示されるのですが、アップロードすると表示されたりされなかったりします。
色々調べていると
http://soudan1.biglobe.ne.jp/qa5278821.html
『無料サービスの方では、連続してジオコーディングできない仕様に なっています。レスポンスのステータスに620が返っているはずです。』
のような情報はあるのですが、プログラミングはほぼ初心者で自分で作成できなく私の場合、どのように対応したらよいのか分かりません。

ご指導よろしくお願い致します。

No.1 回答者： CyberCypher 回答日時： 2013/01/29 14:56

マーカーが表示されないのでしょうか？

GoogleMap自体が表示されないのでしょうか？
どちらにしても参考になさってるサイトの情報だけなら別に制限はかかりません。
何かリクエストを送信しているのでは？
位置情報サービス、ルートリクエスト、高度取得などなど
コードを見なければ何が原因かわかりませんので悪しからず
JavaScriptのエラーは出ていませんか？
コンソールは確認しましたか？
FireFoxやChromeならCtrl+Shift+Jでコンソールが開きますよ
今言えることは
１．リクエストの送信制限を突破していないか調べる
２．JavaScriptがエラーを出していないか調べる
３．マーカーのアイコン画像があるか存在を調べる
これくらいでしょうか？

この回答への補足

.jsファイルで下記を作成し

var stationList = [
{"latlng":[35.681382,139.766084],name:"東京駅",link:'<a href="tokyo.html" target="_self"><img src="image1.jpg" style="border-style:none;" align="middle">詳細はこちら</a>'},
{"latlng":[35.630152,139.74044],name:"品川駅",link:'<a href="shinagawa.html" target="_self"><img src="image2.jpg" style="border-style:none;" align="middle">詳細はこちら</a>'},
{"latlng":[35.507456,139.617585],name:"新横浜駅",link:'<a href="shinyokohama.html" target="_self"><img src="image3.jpg" style="border-style:none;" align="middle">詳細はこちら</a>'},
{"latlng":[35.25642,139.154904],name:"小田原駅",link:'<a href="odawara.html" target="_self"><img src="image4.jpg" style="border-style:none;" align="middle">詳細はこちら</a>'},
{"latlng":[35.103217,139.07776],name:"熱海駅",link:'<a href="atami.html" target="_self"><img src="image5.jpg" style="border-style:none;" align="middle">詳細はこちら</a>'},
{"latlng":[35.127152,138.910627],name:"三島駅",link:'<a href="mishima.html" target="_self"><img src="image6.jpg" style="border-style:none;" align="middle">詳細はこちら</a>'},
{"latlng":[35.142015,138.663382],name:"新富士駅",link:'<a href="shinfuji.html" target="_self"><img src="image7.jpg" style="border-style:none;" align="middle">詳細はこちら</a>'},
{"latlng":[34.97171,138.38884],name:"静岡駅",link:'<a href="shizuoka.html" target="_self"><img src="image8.jpg" style="border-style:none;" align="middle">詳細はこちら</a>'},
{"latlng":[34.769758,138.014928],name:"掛川駅",link:'<a href="kakegawa.html" target="_self"><img src="image9.jpg" style="border-style:none;" align="middle">詳細はこちら</a>'},
{"latlng":[34.703741,137.734442],name:"浜松駅",link:'<a href="hamamatsu.html" target="_self"><img src="image10.jpg" style="border-style:none;" align="middle">詳細はこちら</a>'},
{"latlng":[34.762811,137.381651],name:"豊橋駅",link:'<a href="toyohashi.html" target="_self"><img src="image11.jpg" style="border-style:none;" align="middle">詳細はこちら</a>'},
{"latlng":[34.96897,137.060662],name:"三河安城駅",link:'<a href="mikawaanjo.html" target="_self"><img src="image12.jpg" style="border-style:none;" align="middle">詳細はこちら</a>'}
];
var infoWnd, mapCanvas;
function initialize() {
//地図を表示
var mapDiv = document.getElementById("map_canvas");
mapCanvas = new google.maps.Map(mapDiv);
mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);

//情報ウィンドウの作成
infoWnd = new google.maps.InfoWindow();

//地図上にマーカーを配置していく
var bounds = new google.maps.LatLngBounds();
var station, i, latlng;
for (i in stationList) {
//マーカーを作成
station = stationList[i];
latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1], station.latlng[2]);
bounds.extend(latlng);
var marker = createMarker(
mapCanvas, latlng, station.name, station.link
);

//サイドバーのボタンを作成
createMarkerButton(marker);
}
//マーカーが全て収まるように地図の中心とズームを調整して表示
mapCanvas.fitBounds(bounds);
}
function createMarker(map, latlng, title, link) {
//マーカーを作成
var marker = new google.maps.Marker({
position : latlng,
map : map,
title : title,
content : link
});

//マーカーがクリックされたら、情報ウィンドウを表示
google.maps.event.addListener(marker, "click", function(){
infoWnd.setContent("<strong>" + title + "</title>" +"<br>" + link);
infoWnd.open(map, marker);
});
return marker;
}
function createMarkerButton(marker) {
//サイドバーにマーカ一覧を作る
var ul = document.getElementById("marker_list");
var li = document.createElement("li");
var title = marker.getTitle();
li.innerHTML = title;
ul.appendChild(li);

//サイドバーがクリックされたら、マーカーを擬似クリック
google.maps.event.addDomListener(li, "click", function(){
google.maps.event.trigger(marker, "click");
});
}
google.maps.event.addDomListener(window, "load", initialize);

本体には、
<div id="map_canvas"></div>
<ul id="marker_list"></ul>
で表示させています。

現在はマップ表示部分が灰色で何も表示されていません。たまにちゃんと表示されることがあります。
以前はいつもちゃんと表示されていました。

サイトにアップしたものではなく、パソコン上の.htmlファイルを開くといつもきれいに表示されます。

ご指導よろしくお願い致します。

補足日時：2013/01/29 22:59

No.2 回答者： CyberCypher 回答日時： 2013/01/30 09:47

関数「createMarker」内

infoWnd.setContent("<strong>" + title + "</title>" +"<br>" + link);

<strong>で強調するにしても閉じタグが無い上に<title>の開始タグも無いです
他は見た感じ問題なさそうに見えます。
JSのコンソールには何も表示されていないのでしょうか？
あと連想配列のラベルは「"」で括るか括らないか統一した方が見た目は良いです。
(「latlng」だけ括ってるのに意味があるのか分かりませんが……)

この回答への補足

ご回答ありがとうございます。

infoWnd.setContent("<strong>" + title + "</title>" +"<br>" + link);
はstrongとtitleのうち間違いのようですね。JAVAがよく分からないので、紹介サイトから何も考えずにコピーしていました（恥）

教えていただいた通りchromeでコンソールをやってみました。
『Uncaught TypeError: Cannot read property 'latlng' of undefined 』
とのエラーが出ていました。

しかしどう対応していいのか分かりません。再度ご指導よろしくお願い致します。

補足日時：2013/01/30 17:32

No.3 回答者： CyberCypher 回答日時： 2013/01/31 16:28

値が定義されていないため取得できないといわれてますね

エラーが発生すると右端から該当コードへ移動する事ができます
何処でエラーを吐かれているかはわかりませんが
latlngの値が無いものと思われます。上手く取得できていないのでは？
このlatlngが変数のlatlngなのか連想配列のラベルなのか
どちらにしろ「alert」なりで吐き出すか、Consoleに直接変数名を入力する事で中身が覗けます
「stationList」か「latlng」を入力して値を確かめましょう。
個人的にはlatlngを纏めず"lat：35.000"、"lng:139.000"で分けた方が良いのかな？？
と思います。(2次元配列なのか3次元配列なのかややこしいので)

この回答への補足

いつもお世話になっております。図までつけて下さりありがとうございます。実は前回送信後にエラーの場所が見られる事を知ったのですが、投稿後は再投稿できないようで、ご報告できませんでした（泣）
エラーは
latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1], station.latlng[2]);
となっています。上記にコメント頂いた内容が、私の知識のなさで、どのように対応すればいいのか分かりません。ここまで教えて頂いて大変恐縮ですが、もしよければ、どのように修正すればいいのかコードを具体的に書いていただけると大変助かります。

あと、何回か読み込みし直しているとたまに
Uncaught RangeError: Maximum call stack size exceeded
というエラーもです。
エラーは
(function(){'use strict';function ba(a){throw a;}var ca=void 0,k=!0,l=null,m=!1,da=encodeURIComponent,n=window,ea=Infinity,fa=document,p=Math,ga=Array,ha=screen,ia=navigator,ja=Error,ka=String;function la(a,b){return a.onload=b}function ma(a,b){return a.center_changed=b}function na(a,b){return a.version=b}function oa(a,b){return a.width=b}function pa(a,b){return a.extend=b}function ra(a,b){return a.map_changed=b}function sa(a,b){return a.minZoom=b}function ua(a,b){return a.remove=b}

です。でもこのエラーは読み込み直しをかけると無くなります。

またまた、ご指導よろしくお願い致します。

補足日時：2013/02/01 04:05

No.4 回答者： CyberCypher 回答日時： 2013/02/01 16:50

station.latlngの参照先はこれですよね？↓

"latlng":[35.681382,139.766084]

要素は2つしかありません
"latlng":[0要素目[0], 1要素目[1]]
ですから

latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1], station.latlng[2]);
で引数を3つも渡しているのがおかしいです

latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1]);
ですかね
先日、見落としていたので私も人のことを言えませんが……

Uncaught RangeError: Maximum call stack size exceeded
原因は分かりませんが呼び出し回数を超過したみたいです
どこか無限ループに陥っていませんか？
たまに更新連打などでも表示されてしまうので読み込み遅延かもですけれど

No.5 回答者： CyberCypher 回答日時： 2013/02/01 17:17

alert(station.latlng[0]);

をlatlng格納前に配置するか
コンソールへ「stationList」と入力して
値を確認できますので参考までに……
エラーが発生した場合
正しい値がエラー行に到達しているか調べるのも解決の糸口になりますよ。

（画像が粗くなったらすみません）

この回答への補足

お世話になっております。

分からないなりに考えていたら、問題点が分かりちゃんと表示できるようになりました。
for (i in stationList)の部分を

for(var i=0; i>12; i++)
としました。iの終わり値を記入しないと無限ループになってしまって、呼び出しの制限を超えていたのかと勝手に解釈しています。

何はともあれ、よかったです。

色々、ご指導くださりありがとうございました。ご指摘いただいて一部間違っていたソースも修正できよかったです。

とりあえず、ご報告までに記入させていただきました。

補足日時：2013/02/03 00:12

No.6 回答者： CyberCypher 回答日時： 2013/02/01 17:33

たびたびすみません

画像アップロードでエンコード失敗したので……

参考URL：http://ux.getuploader.com/file_is_mine/download/ …

この回答への補足

いつもお世話になっております。

全く違うサイトにアップしてみたら、表示されました（泣）
という事は、ソース自体に問題があるのではなく、表示制限を超えているという事でしょうか？

もしそうだとすれば、googleに使用料を払えば、表示できるのだとは思いますが、
使用料を払うことなく対策できる方法があればご指導いただけないでしょうか？

ソースの書き方を変更すればよいのであれば、変更して対応したいと思っています。

また、変更する場合は、どこをどう変えればよいのか具体的にソースを書いていただけると大変助かります。

補足日時：2013/02/01 21:20