61行目のjavascriptの変数を117行目のPHPの部分に渡したいです。

###前提・実現したいこと
背景画像（ゴールデンブリッジなど外国で有名な所の画像しか出来ません）から場所を特定して、その場所の名前から検索エンジンで詳細を調べたい。

画像から場所を特定できる機能と検索エンジンをつなげて
画像検索すると
###詳細
今はコメントにしてますが、61行目に画像を選択すると場所を表示するようにallet分で表示するのがあります。
###発生している問題・エラーメッセージ
画像で場所を特定する機能と検索エンジンが別々になっている。
###検索エンジンはソースコードの下のほうにあるPHPで行っています。

###ソースコード

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>imagemap</title> <link rel="stylesheet" type="text/css" href="css/main.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script>
$(function() {
    $("#fileField").change(function() {
        readFile(this);
    });
    $('#fileForm').on('submit', upload);
});

function readFile(input) {
    if (input.files && input.files[0]) {
        var file = input.files[0];
        var reader = new FileReader();
        reader.onload = function(event) {
            $('#test_image').attr('src', event.target.result);
        }
        reader.readAsDataURL(file);
    }
}

function upload(event) {
    event.preventDefault();
    var file = $("#fileField")[0].files[0];
    var reader = new FileReader();
    reader.onloadend = uploadToCloudVision;
    reader.readAsDataURL(file);
}

function uploadToCloudVision(event) {
    var content = event.target.result;
    var data = {
        requests: [{
            image: {
                content: content.replace('data:image/jpeg;base64,', '')
            },
            features: [{
                type: "LANDMARK_DETECTION"
            }]
        }]
    };

    $('#results').text('Loading');
    $.post({
        url: 'https://vision.googleapis.com/v1/images:annotate?key=AIzaSyCM1Ut6GsAGt24tH4xYTRzGGz8gortWfLY',
        data: JSON.stringify(data),
        contentType: 'application/json'
    }).fail(function(jqXHR, textStatus, errorThrown) {
        $('#results').text('ERRORS: ' + textStatus + ' ' + errorThrown);
    }).done(display);
}

function display(data) {

// alert( data.responses[0].landmarkAnnotations[0].description );
if (jQuery.isEmptyObject(data.responses[0])) {
$('#results').text("Location Not Found.");
} else {
initMap(Object.values(data.responses[0].landmarkAnnotations[0].locations[0].latLng));
var contents = JSON.stringify(data, null, 4);
$('#results').text(contents);
}
}

function initMap(latLng) {
    var latLng = { lat: latLng[0], lng: latLng[1] };
    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 15,
        center: latLng
    });
    var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });
}
</script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyCM1Ut6GsAGt24tH4xYTRzGGz8gortWfLY" type="text/javascript"></script>
<script src="http://wikipedia.simpleapi.net/api" type="text/html"></script>

</head> <body> <h1 class="entrytitle">imagemap</h1> <h3>imagemapとは、画像から場所を特定して、詳細を表示するwebサイトです。</h3> <h2>使用手順</h2> <ol> <li>『ファイルを選択』を押して、場所を探したい自分の画像を選択します。</li> <li>『検索』を押します。</li> <li>GoogleMap上にその場所を表示します</li> </ol> <div style="display: flex;"> <img id="test_image" style="height:500px;width: 50%;margin: 3px;"> <div id="map" style="height:500px;width: 50%;"></div> </div> <form id="fileForm" action="#"> <input type="file" id="fileField"> <br> <input type="submit" value="検索"> <form action="php/sample.php"> </form> </form> <form method="GET" action=""> <input type="text" name="keyword" size="40" value="" /> <input type="submit" value="検索" /> </form>

<br>

<?php if (isset($_GET['keyword'])) { $keyword = urlencode($_GET['keyword']); $url = "http://wikipedia.simpleapi.net/api?keyword=".$keyword."&output=xml"; $xml = simplexml_load_file($url); if ($xml) { echo $xml->result->body; } else { echo "simplexml_load_fileでエラー"; } <script> function display(data) function initMap(latLng) </script> } ?> </body> </html>

Tomak

2017/12/20 11:07

「発生している問題・エラーメッセージ」画像で場所を特定する機能と検索エンジンが別々になっている。←これは不具合なのでしょうか？　どのような不具合なのか明確にしてほしいです。例えば、「○○のPHPコードを実行すると△△というエラーメッセージが表示されるが、修正方法がわからない」などのようにしてほしいです。