0

これに関するドキュメントを何度か読んだ後、私は壁に頭をぶつけていました! サイトにマップを表示するための API エラーを回避できないようです。

マップを表示する Web ページから次のエラー メッセージが表示されます。

Google は、このアプリケーションでの Maps API の使用を無効にしました。指定されたキーは有効な Google API キーではないか、このサイトの Google Maps Javascript API v3 に対して承認されていません。このアプリケーションの所有者である場合は、https ://developers.google.com/maps/documentation/javascript/tutorial#Obtaining_Key で有効なキーを取得する方法を確認できます。

私は（数回）自分のアカウントにアクセスし、次のことを行いました。

  1. Maps v3 API サービスを有効にしました
  2. 新しい API キーを生成しました
  3. 許可されたリファラーをキーに追加しました。(www.domain.com と domain.com の両方の URL)

Web ページの先頭に次のスクリプトを追加しました。

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;key=MY_API_KEY_HERE" type="text/JavaScript" language="JavaScript"></script>

また、ページでリンクがクリックされたときに実行される次の JavaScript 関数があります。

alert("viewMap()");
var map = new GMap3(document.getElementById("map_canvas"));
var geocoder = new GClientGeocoder();

var address = "1600 Amphitheatre Parkway, Mountain  View";
alert("Calling getLatLng ...");
geocoder.getLatLng(address, function(point) {
    var latitude = point.y;
    var longitude = point.x;  

    // do something with the lat lng
    alert("Lat:"+latitude+" - Lng:"+longitude);
});

最初のviewMap()アラートが表示された後、「Google により使用が無効になっています...」というエラー メッセージが表示されます。

エラー コンソールにも「GMap3 が定義されていません」と表示されます。

私のやり方の間違いを教えてくれる人はいますか？

4

2 に答える 2

0

いくつかの問題があります。最も深刻な問題は、<script>タグを使用してバージョン 3 API を読み込んでから、 のようなバージョン 2 コードを使用することGClientGeocoderです。どちらGMap3のバージョンにもまったく存在しません。

バージョン 2 マップをバージョン 3 に変換することは、バージョン 3 API をロードするほど簡単ではありません。ゼロから書き直す必要があります (それは SO の範囲外です)。

使用しているリファラーは言いませんが、ワイルドカードの使用を明示する必要があります: www.domain.com/*,domain.com/*

に変更GMap3し、バージョン 2 API をロードすることをお勧めします (関連するタグGMap2でコンソール キーを指定します)。<script>そして、バージョン 3 の書き直しに取り掛かります。

于 2012-07-02T15:00:27.047 に答える
0

おそらく、GMap3 行を次のように変更するだけです。

var myOptions = {zoom: 5,mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);

navigator.geolocationの代わりにを使用した、より完全な例を次に示しGClientGeocoderます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<style>
#map_canvas {width:300px;height:300px;display:block;}
</style>
</head>

<body>
<div id="map_canvas"></div>
<button onclick="begin();">Click</button>
</body>
<script>
function begin(){
    navigator.geolocation.getCurrentPosition(loadmap,noloc);
}

function noloc(){ alert('Since this is a location based tool, please reload and share your location');}

function loadmap(position){

    var myOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
    var latitude=position.coords.latitude;
    var longitude=position.coords.longitude;
        //do something with the lat lng
    var usrll=new google.maps.LatLng(latitude,longitude);
    map.setCenter(usrll);
    var usrmarker = new google.maps.Marker({position: usrll,map: map});

}   
</script>
</html>
于 2012-07-02T14:54:24.787 に答える