40303


こんにちは、初質問です。よろしくお願いします。

日経ソフトウェア2018年1月号のサンプルプログラムを落として、APIキーだけ書き換えました。  
しかし、JSONの中身が表示されるだけでマップが表示されません。

APIキーの問題かと思いましたが、他のサイトから引っ張ってきたコードにAPIキーを入れるとちゃんとマップが表示されました。GCPの方でもGoogle
Maps JavaScript APIが有効になっています。

どなたかご教示ください。

[code]

    <!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>
    
[/code]


CC BY-SA 3.0
2017-12-15T06:20:35.460
40298
2017-12-15T09:52:45.043
2017-12-15T06:56:24.580
19110
25732
question
javascript html5
googlemapが表示されない。


`style="height:500%; width:100%;"`ではブロック要素に幅、高さが出ないので、ブロック要素の幅か高さ
または、両方に％では無く大きさを指定してください。（多分`500px`では無いでしょうか？）

[code]

    <div id="map" style="height:500px; width:100%;"></div>
    
[/code]


CC BY-SA 3.0
2017-12-15T09:06:50.177
40303
2017-12-15T09:52:45.043
2017-12-15T09:52:45.043
22793
22793
40298
answer