Googleマップは読み込まれません - チュートリアルの空白画面の変更

-1

私は人々のGoogleマップについて空白のページを作成している記事をたくさん読んでいますが、複数の解決策を試した後、私は迷っています。ここでGoogleマップは読み込まれません - チュートリアルの空白画面の変更

は、以下の私のコードです：

<!DOCTYPE html > 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Go Catch Em All Bakewell!</title> 
<script src="https://maps.googleapis.com/maps/api/js?key=MyKeyIsHere" 
     type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[ 

function customIcon(type) { 
    return "http://moneyontheside.co.uk/icons/" + type + ".png"; 
} 

function load() { 
    alert("load"); 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(53.213613, -1.673780), 
    zoom: 12, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    // Change this depending on the name of your PHP file 
    downloadUrl("createXML.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("name"); 
     var pokeid = markers[i].getAttribute("PokeID"); 
     var type = markers[i].getAttribute("type"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + name + "</b> <br/>" + PokeID; 
     var icon = customIcon(type); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
    } 
    }); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 

function doNothing() {} 

//]]> 

</script> 

</head>

私はデバッグするのに苦労していてすべてのヘルプはこれを高く評価され超える可能性が高い、最初からやり直す必要があります。

質問をより多くのユーザーに適用するには、おそらくどこからデバッグを開始するのかを提案できますか？あなたが見ることができるように、私は "alert（）"と入力して何が起こっているのかを確認しようとしましたが、ポップアップは一度もありませんでした。

ご協力いただきありがとうございます。

出典

2016-07-23 user1104652

なぜPHPファイルが必要ですか？ GETリクエストを実行していますが、これは本当に必要ですか？ Google Polymerに試してみることをおすすめします。それを使って：

<link rel="import" href="components/google-map/google-map.html"> 

<google-map latitude="53.213613" longitude="-1.673780"></google-map>

Hereはその要素のドキュメントです。私はこれがあなたが探しているアプローチではないが、設定とカスタマイズがより簡単であることを知っています。基本的にPolymerは、カスタム要素の作成、スタイルのカプセル化、およびHTMLファイルの他のHTMLファイルへのインポートを可能にする新しい一連の技術であるWeb Components上の構文上の砂糖です。 Polymerのアプローチは一般的に近代的でシンプルであると思います。 Plnkr with Polymerを作成してここに共有すると、それが好きになるでしょう。

出典

2016-07-23 19:56:49

PHPファイルは、MySQLデータベースにデータロードのXMLを作成します。私が使用したアプローチを使用した理由は、チュートリアルでGoogleが推奨するアプローチだったからです。私はこれに間違ったアプローチをしていると思いますか？ – user1104652

ああ、私は...あなたがデータベースを使用していると思う。 Polymerにはそのための方法があると思います。ドキュメントを確認してください。 –

Googleマップは読み込まれません - チュートリアルの空白画面の変更

答えて

関連する問題