概要

Google map apiを使って、住所とその場所に対するレビューを同時に表示するページを作ろうとしています。

地図は指定した場所が表示されましたが、レビューの方が空白になってしまい、表示されません。

参考にしたサイト

今のコード

HTML
1
2<!DOCTYPE html>
3
4<html lang="ja">
5
6<head>
7    <!-- Required meta tags -->
8    <meta charset="utf-8" />
9    <meta name="viewport" content="width=device-width, ßinitial-scale=1, shrink-to-fit=no" />
10    <meta http-equiv="x-ua-compatible" content="ie=edge" />
11
12    <!-- googlemapとreview -->
13    <script type="text/javascript" src="/static/googlemap/js/map.js"></script>
14    <link rel="stylesheet" href="/static/googlemap/css/map.css">
15
16
17    <title>Mapとレビュー</title>
18    <meta name="description" content="" />
19</head>
20
21<body>
22    <div class="container">
23        <div class="row">
24            <h5 class="card-title">Access</h5>
25            <p class="card-text">〒150-0001&nbsp;<div id="address">
26                    東京都東京都渋谷区神宮前 6-12-18</div>
27            </p>
28            <div id="map" class="z-depth-1-half map-container"></div>
29        </div>
30
31        <div class="row">
32            <h5 class="card-title">Reviews</h5>
33            <div><strong>Googleによる平均スコア：</strong> <span id="rating"></span></div>
34            <hr />
35
36            <div class="reviews">
37                <ul class="review-list"></ul>
38            </div>
39            <script
40                src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXX&callback=initMap&libraries=places"
41                async defer></script>
42        </div>
43    </div>
44
45<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
46
47</body>
48
49</html>
50

javascript
1(map.js)
2var map, service;
3
4function initMap() {
5    var target = document.getElementById('map');
6    var address = document.getElementById('address').textContent;
7    var geocoder = new google.maps.Geocoder();
8
9    geocoder.geocode({ address: address }, function (results, status) {
10        if (status === 'OK' && results[0]) {
11
12            console.log(results[0].geometry.location);
13
14            var map = new google.maps.Map(target, {
15                center: results[0].geometry.location,
16                zoom: 18
17            });
18
19            var marker = new google.maps.Marker({
20                position: results[0].geometry.location,
21                map: map,
22                animation: google.maps.Animation.DROP,
23                place: {
24                    place_id: results[0].place_id,
25                    location: results[0].geometry.location
26                }
27            });
28
29        } else {
30            alert('住所が正しくないか存在しません。');
31            target.style.display = 'none';
32        }
33    });
34
35}
36
37function searchResult(results, status) {
38    if (status == google.maps.places.PlacesServiceStatus.OK) {
39        // show first result on map and request for details
40        var place = results[0];
41        var marker = new google.maps.Marker({
42            position: place.geometry.location,
43            map: map,
44            title: place.name
45        });
46        var infowindow = new google.maps.InfoWindow({
47            content: place.name
48        });
49        infowindow.open(map, marker);
50
51        service.getDetails({ placeId: place.place_id }, function (place, status) {
52            if (status == google.maps.places.PlacesServiceStatus.OK) {
53                let rating = document.querySelector('#rating');
54                let reviewEl = document.querySelector('.review-list');
55
56                rating.innerHTML = place.rating;
57
58                for (let review of place.reviews) {
59                    let li = document.createElement('li');
60                    li.innerHTML = `<div>Author: ${review.author_name}</div>
61                          <em>${review.text}</em>
62                          <div>Rating: ${review.rating} star(s)</div>`;
63                    reviewEl.appendChild(li);
64                }
65            }
66        });
67    }
68}