Untitled

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Cloud Vision API Sample App</title>
<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=xxx',
        data: JSON.stringify(data),
        contentType: 'application/json'
    }).fail(function(jqXHR, textStatus, errorThrown) {
        $('#results').text('ERRORS: ' + textStatus + ' ' + errorThrown);
    }).done(display);
}

function display(data) {
    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 type="text/javascript" src="http://maps.google.com/maps/api/js?key=xxx"></script>
</head>

<body>
<h1>Cloud Vision API Sample App</h1>
<div style="display: flex;">
    <img id="test_image">
    <div id="map" style="height:500%; width:100%;"></div>
</div>
<form id="fileForm" action="#">
    <input type="file" id="fileField">
    <br>
    <input type="submit" value="Submit">
</form>
<code style="white-space:pre" id="results"></code>
</body>

</html>