jsにライブラリをインポートしたい

前提・実現したいこと

現在、googleMapAPIを利用して、現在地から近いカフェで混んでいないものを検索できるサイトを作成しようとしています。
混んでいるかどうかは、こちらのライブラリを使用して実現しようとしています。

発生している問題・エラーメッセージ

上記のライブラリリンクをクリックしていただくと、How to get startedという項目があるかと思います。

Get a Google Maps API key https://developers.google.com/places/web-service/get-api-key

clone the repository, cd into the populartimes directory and run pip install .

Alternatively install directly from github using pip install --upgrade git+https://github.com/m-wrzr/populartimes

import populartimes and run with populartimes.get(...) or populartimes.get_id(...)

Note: The library is not available via PyPI, so you have to clone/download the repository and install it locally.

この項目のimportして、使用するところで下記エラーメッセージが出力されてしまいました。

serach_result.html:1 Access to script at 'file:///C:/Users/sakur/Desktop/%E3%81%8D%E3%81%A3%E3%81%95%E3%81%93/js/map.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
serach_result.html:62 GET file:///C:/Users/sakur/Desktop/%E3%81%8D%E3%81%A3%E3%81%95%E3%81%93/js/map.js net::ERR_FAILED
serach_result.html:1 Uncaught (in promise) hd {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵    at new hd (https://maps.googleapis.com/m…CUPhTW4&callback=initMap&libraries=places:154:124"}
Promise.then (async)
cj @ js?key=API_KEY&callback=initMap&libraries=places:154
google.maps.Load @ js?key=AIzaSyDW8mVHHJoXkD5kiW0ZjwCjtiEwCUPhTW4&callback=initMap&libraries=places:21
(anonymous) @ js?key=AIzaSyDW8mVHHJoXkD5kiW0ZjwCjtiEwCUPhTW4&callback=initMap&libraries=places:245
(anonymous) @ js?key=AIzaSyDW8mVHHJoXkD5kiW0ZjwCjtiEwCUPhTW4&callback=initMap&libraries=places:245

該当のソースコード

今回実装しているjs及びhtmlファイルです。
importを記載している箇所はjsファイルの一番上になります。(APIキー、htmlのbodyは省略しています)

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <title>きっさこ！-検索結果</title>
8
9    <meta name="viewport" content="width=device-width, initial-scale=1">
10    <meta name="description" content="近くの空いている喫茶店を調べよう！">
11    <meta name="keywords" content="喫茶店,カフェ,珈琲,紅茶,混雑,空いている,GoogleMap,現在地検索,住所検索,距離範囲検索">
12
13    <!-- font Awesome -->
14    <script src="https://kit.fontawesome.com/746ec6d541.js" crossorigin="anonymous"></script>
15    <!-- css -->
16    <link rel="stylesheet" href="../css/search_result_style.css">
17    <!--[if lt IE 9]>
18<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
19<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
20<![endif]-->
21</head>
22
23<body>
24    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places" async
25        defer></script>
26    <script type="module" src="../js/map.js"></script>
27</body>
28
29</html>

JavaScript
1import  * as populartimes from '../populartimes';
2
3let map;
4
5// htmlが読みこまれてからinitMapを実行
6window.onload = function () {
7    initMap();
8};
9
10function initMap() {
11    const target = document.getElementById('gmap');
12    const lat = parseFloat(document.getElementById('lat').textContent);
13    const lng = parseFloat(document.getElementById('lng').textContent);
14    const center = new google.maps.LatLng(lat, lng);
15    const zoom = parseFloat(document.getElementById('zoom').textContent);
16    const shopList = document.getElementById('shoplist');
17
18    //マップを生成して表示
19    map = new google.maps.Map(target, {
20        center: center,
21        zoom: zoom
22    });
23    //情報ウィンドウのインスタンスの生成
24    let infoWindow = new google.maps.InfoWindow();
25
26    // PlaceService のインスタンスの生成(引数に map を指定)
27    let service = new google.maps.places.PlacesService(map);
28
29    if (!navigator.geolocation) {
30        //情報ウィンドウの位置をマップの中心位置に指定
31        infowindow.setPosition(map.getCenter());
32        //情報ウィンドウのコンテンツを設定
33        infowindow.setContent('Geolocation に対応していません。');
34        //情報ウィンドウを表示
35        infowindow.open(map);
36    }
37
38    //ブラウザが対応している場合、position にユーザーの位置情報が入る
39    navigator.geolocation.getCurrentPosition(function (position) {
40        //position から緯度経度（ユーザーの位置）のオブジェクトを作成し変数に代入
41        var pos = {
42            lat: position.coords.latitude,
43            lng: position.coords.longitude
44        };
45
46        //マップの中心位置を指定
47        map.setCenter(pos);
48
49        // 種類(タイプ)やキーワードをもとに施設を検索(プレイス検索)するメソッドnearbySearch()
50        service.nearbySearch({
51            location: pos,
52            radius: 500, //検索する半径
53            type: 'cafe' // タイプで検索。文字列またはその配列で指定
54        }, callback);
55
56        function callback(results, status) {
57            if (status === google.maps.places.PlacesServiceStatus.OK) {
58                for (let i = 0; i < results.length; i++) {
59                    const request = {
60                        placeId: results[i].place_id,
61                        fields: ['name', 'photos', 'geometry', 'opening_hours', 'formatted_phone_number', 'website']
62                    };
63                    service.getDetails(request, function (place, stauts) {
64                        if (stauts === google.maps.places.PlacesServiceStatus.OK) {
65                            createMarker(place);
66                            createTableShopList(place);
67                        }
68                    });
69                }
70            }
71        }
72
73        // マーカーを生成する関数
74        function createMarker(place) {
75            let marker = new google.maps.Marker({
76                map: map,
77                position: place.geometry.location,
78                icon: {
79                    url: 'https://maps.google.com/mapfiles/ms/micons/red-dot.png',
80                    labelOrigin: new google.maps.Point(0, -10)
81                },
82                label: {
83                    color: 'red',
84                    text: place.name,
85                    fontSize: '17',
86                    fontWeight: 'bold',
87                    fontfamily: 'Avenir'
88                },
89                animation: google.maps.Animation.DROP
90            });
91
92            // infoWindowにお店の情報を載せるためにhtmlを生成する
93            const cafe_info = document.createElement('div');
94            cafe_info.classList.add('cafe_info');
95
96            // カフェの画像を挿入
97            if (place.photos !== undefined) {
98                const cafe_img = document.createElement('img');
99                cafe_img.setAttribute('src', place.photos[0].getUrl());
100                cafe_info.appendChild(cafe_img);
101            }
102
103            // カフェの名前を挿入
104            const cafe_name = document.createElement('p');
105            cafe_name.textContent = place.name;
106            cafe_info.appendChild(cafe_name);
107
108            marker.addListener('click', function () {
109                infoWindow.setContent(cafe_info);
110                infoWindow.open(map, this);
111            })
112        }
113
114        // テーブル(ショップリスト)を作成する関数
115        function createTableShopList(shop) {
116            populartimes.get_id()
117
118            const tbodyTrDOM = document.createElement('tr');
119            tbodyTrDOM.innerHTML = `<td>${shop.name}</td>`; // 店名
120            // 営業時間
121            if (shop.opening_hours === undefined) {
122                tbodyTrDOM.innerHTML += `<td></td>`;
123            } else {
124                tbodyTrDOM.innerHTML += `<td>${shop.opening_hours.weekday_text[0]}</td>`;
125            }
126            // 電話番号
127            if (shop.formatted_phone_number === undefined) {
128                tbodyTrDOM.innerHTML += `<td></td>`;
129            } else {
130                tbodyTrDOM.innerHTML += `<td>${shop.formatted_phone_number}</td>`;
131            }
132            // WebSite
133            if (shop.website === undefined) {
134                tbodyTrDOM.innerHTML += `<td></td>`;
135            } else {
136                tbodyTrDOM.innerHTML += `<td>${shop.website}</td>`;
137            }
138            tbodyTrDOM.innerHTML += `<td>混んでいません</td>`;　// 混み具合（後で実装)
139
140            shopList.appendChild(tbodyTrDOM);
141        }
142    });
143}

ファイル構成

開発しているフォルダの構成は以下の通りになります。
htmlファイルはserach_result.html
googleMapapiの実装をしているjsファイルは map.jsになります。

C:\USERS\SAKUR\DESKTOP\きっさこ
│  README.md
│
├─base
│      logo.png
│
├─css
│      index_style.css
│      search_result_style.css
│      style.css
│
├─html
│      index.html
│      serach_result.html
│
├─images
│      bg.jpg
│      bg2.jpg
│      btn_minus.png
│      btn_plus.png
│      kissako2_log.png
│      kissako_log.png
│      logo.png
│      sample1.jpg
│      sample10.jpg
│      sample2.jpg
│      sample3.jpg
│      sample4.jpg
│      sample5.jpg
│      sample6.jpg
│      sample7.jpg
│      sample8.jpg
│      sample9.jpg
│
├─js
│      map.js
│      openclose.js
│      rollimg.js
│      script.js
│      slide_simple_pack.js
│
└─populartimes
    │  .gitignore
    │  .travis.yml
    │  LICENSE.md
    │  README.md
    │  setup.cfg
    │  setup.py
    │
    ├─content
    │      bars_visualization.gif
    │
    ├─populartimes
    │      crawler.py
    │      __init__.py
    │
    └─tests
　　　　　  test_cover_rect_with_cicles.py
           test_get_circle_centers.py
           __init__.py

自分で調べたことや試したこと

MDNのサイトを参考にして、htmlでjsを読み込んでいるソースコードを<script type="text/javascript" src="../js/map.js">から<script type="module" src="../js/map.js"></script>にしてみたり、import populartimesをimport * as populartimes from '../populartimes';にしたのですが、エラーは改善しませんでした。

お手数ですがご助力の程よろしくお願いします！

行動規範の内容に同意します

回答1件

エラーメッセージのとおりで、グローバルスコープからinitMapが見えていません。

type="module"で読み込んだモジュールの中で宣言したものは、window経由などでエクスポートしない限り、モジュールにローカルなものとなってしまいます。

投稿2020/02/10 11:42

編集2020/02/10 11:42

maisumakun

総合スコア146018

mi-ko-cute

2020/02/10 11:54

初心者であまりわからないもので、少し質問してもよろしいでしょうか？「window経由などでエクスポートしない限り、」というのはどういうことを指していますか。 function initMapの前にexportを指定するということでしょうか？

maisumakun

2020/02/10 12:10

window.initMap = initMap;のように、windowのプロパティ≒グローバル変数として公開する、という方法です。

mi-ko-cute

2020/02/10 12:25

なるほど、そういう方法なのですね。実際にmap.jsに`window.initMap = initMap;`を追記しグローバル変数として公開しました。しかし、やはりまだ解決しないようで、同じエラーメッセージが出てしまいました。どうしたらよろしいでしょうか？ --- serach_result.html:1 Access to script at 'file:///C:/Users/sakur/Desktop/%E3%81%8D%E3%81%A3%E3%81%95%E3%81%93/js/map.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. serach_result.html:62 GET file:///C:/Users/sakur/Desktop/%E3%81%8D%E3%81%A3%E3%81%95%E3%81%93/js/map.js net::ERR_FAILED serach_result.html:1 Uncaught (in promise) hd {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new hd (https://maps.googleapis.com/m…CUPhTW4&callback=initMap&libraries=places:154:124"} Promise.then (async) cj @ js?key=AIzaSyDW8mVHHJoXkD5kiW0ZjwCjtiEwCUPhTW4&callback=initMap&libraries=places:154 google.maps.Load @ js?key=AIzaSyDW8mVHHJoXkD5kiW0ZjwCjtiEwCUPhTW4&callback=initMap&libraries=places:21 (anonymous) @ js?key=AIzaSyDW8mVHHJoXkD5kiW0ZjwCjtiEwCUPhTW4&callback=initMap&libraries=places:245 (anonymous) @ js?key=AIzaSyDW8mVHHJoXkD5kiW0ZjwCjtiEwCUPhTW4&callback=initMap&libraries=places:245 serach_result.html:1 A cookie associated with a cross-site resource at http://fontawesome.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032. ---

行動規範の内容に同意します