私は Google Store Locator を使用しており、同じページに結果を表示する成功例をセットアップしました (マップの上または左側に検索バーがある標準的なセットアップ)。私はPHP/MySQLの例を使用しており、そこの指示に従いました:
https://developers.google.com/maps/articles/phpsqlsearch_v3
正常に動作しますが、今はそれを 2 つのページに分割したいと考えています。基本的に、最初のページには検索フォームがあり、2 番目のページには結果が表示されます。PHP変数として既存のJavascriptに渡されるGET変数を使用することを計画しています。
この記事を見て、私と似たようなことをしている人を見ましたが、ソース コードへのリンクがなく、JS ファイル名が異なるため、古いバージョンのストア ロケーターを使用していた可能性があります。それは良いスタートですが、それは私が使用しようとしてきたのと同じアプローチです（この時点では失敗しました）：
ここに私の例を設定しました：
http://miller-media.com/sites/newmaptest/results-test.php?zip_code=94546&radius=200
元の Javascript を見ると、そのページで動作するすべての関数が表示されます (そのページのソース コードでも確認できます)。基本的に、誰かが元のページの送信ボタンをクリックしたときに呼び出される関数を変更する必要があります。今回は新しいページ上にあるため、代わりにページの読み込み時にこれらの関数を実行する必要があります。クリック時に実行される元の関数は次のようになります (ボディ要素には属性として onload="load()" があるため、ここからすべてが開始されます)。
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none"){
google.maps.event.trigger(markers[markerNum], 'click');
}
};
document.onload = searchLocations();
}
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
console.log('test');
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'test.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createOption(name, distance, i);
createMarker(latlng, name, address);
bounds.extend(latlng);
}
map.fitBounds(bounds);
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
明らかに、編集する必要がある行は、誰かがフォームを送信したときに、Javascript を使用してページ自体から値を引き出す行です。この行を変更しました：
var address = document.getElementById("addressInput").value;
に
var address = <?php echo $zip_code; ?>;
GET変数から変数を宣言した後。そして、この行を変更しました：
var radius = document.getElementById('radiusSelect').value;
に
var radius = <?php echo $radius; ?>;
その変数を宣言した後。ソースコードを見てみると問題なく動いているように見えます。次に、コードのさまざまな部分でコンソールに出力してデバッグしようとしましたが、コードがハングアップする場所は次の行にあるようです。
geocoder.geocode({address: address}, function(results, status) {
機能を実行しません。この行の前にコンソールに印刷すると、問題なく印刷されません。そのため、何らかの理由でその機能が機能していません。「ジオコーダー」をコンソールの前に書き込むと、次のように返されます。
Yg {geocode: function}
これがハングアップする原因を突き止めれば、デバッグをうまく行うことができると思います。geocode() 関数が実行されない理由について何か考えはありますか? ありがとう！