質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2512閲覧

Maps javascript API のGoogleMap導入後の検索ボックス作成について

java_programmer

総合スコア31

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2021/11/01 01:56

編集2021/11/02 04:33

googleが提供しているgoogleMapを埋め込んだサイトを作成したいと思い、MapsjavascriptAPIの埋め込みと、現在位置の取得ボタンは実装できました。
そして検索ボックスを作成して場所を入力するとそこを表示する機能を追加したいと思いました。
やり方は https://www.out48.com/archives/1870/ この記事を参考にしました。
この記事の中に https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=ja#maps_places_searchbox-html 公式のページがあってそのjavascriptとhtmlの書き方を実際に試してみると検索ボックスに文字を入力してエンターを押しても何も起こりませんでした。

どこが間違っているのか全く分からない状態です。どなたかわかる方がいればよろしくお願いいたします。

[javascriptファイル]

javascript

1function initAutocomplete() { 2 const map = new google.maps.Map(document.getElementById("map"), { 3 center: { lat: -33.8688, lng: 151.2195 }, 4 zoom: 13, 5 mapTypeId: "roadmap", 6 }); 7 // Create the search box and link it to the UI element. 8 const input = document.getElementById("pac-input"); 9 const searchBox = new google.maps.places.SearchBox(input); 10 11 map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 12 // Bias the SearchBox results towards current map's viewport. 13 map.addListener("bounds_changed", () => { 14 searchBox.setBounds(map.getBounds()); 15 }); 16 17 let markers = []; 18 19 // Listen for the event fired when the user selects a prediction and retrieve 20 // more details for that place. 21 searchBox.addListener("places_changed", () => { 22 const places = searchBox.getPlaces(); 23 24 if (places.length == 0) { 25 return; 26 } 27 28 // Clear out the old markers. 29 markers.forEach((marker) => { 30 marker.setMap(null); 31 }); 32 markers = []; 33 34 // For each place, get the icon, name and location. 35 const bounds = new google.maps.LatLngBounds(); 36 37 places.forEach((place) => { 38 if (!place.geometry || !place.geometry.location) { 39 console.log("Returned place contains no geometry"); 40 return; 41 } 42 43 const icon = { 44 url: place.icon, 45 size: new google.maps.Size(71, 71), 46 origin: new google.maps.Point(0, 0), 47 anchor: new google.maps.Point(17, 34), 48 scaledSize: new google.maps.Size(25, 25), 49 }; 50 51 // Create a marker for each place. 52 markers.push( 53 new google.maps.Marker({ 54 map, 55 icon, 56 title: place.name, 57 position: place.geometry.location, 58 }) 59 ); 60 if (place.geometry.viewport) { 61 // Only geocodes have viewport. 62 bounds.union(place.geometry.viewport); 63 } else { 64 bounds.extend(place.geometry.location); 65 } 66 }); 67 map.fitBounds(bounds); 68 }); 69}

[htmlファイル]

html

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org" 3 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> 4<head> 5<meta charset="UTF-8"> 6<title>Insert title here</title> 7</head> 8<body> 9 10 <!-- Maps JavaScript API(地図)、Places API(入力場所検索ボックス)のapiキー作成し埋め込み ロード時動作 --> 11 <script 12 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6gVVngdDmxOTy4il-r0utj51VfO0fRqw&libraries=places&callback=initAutocomplete&libraries=places&v=weekly" 13 defer> 14 </script> 15 16 17 <!-- jsファイルアクセス --> 18 <script th:src="@{/js/MapsJavaScriptCurrentLocationSearch.js}"> 19 </script> 20 21 <script th:src="@{/js/MapsJavaScriptGetAPI.js}"> 22 </script> 23 24 <script th:src="@{/js/MapsJavaScriptApiSearchBox.js}"> 25 </script> 26 27 28 29 <p> 30 <button onclick="getMyPlace()">現在位置を取得</button> 31 </p> 32 <div id="result"></div> 33 34 <!-- 検索ボックス機能 --> 35 <input id="pac-input" class="controls" type="text" 36 placeholder="Search Box"> 37 38 <!-- マップ表示 --> 39 <div id="map"></div> 40 41</body> 42</html>

javascript

1function getMyPlace() { 2 var output = document.getElementById("result"); 3 if (!navigator.geolocation){//Geolocation apiがサポートされていない場合 4 output.innerHTML = "<p>Geolocationはあなたのブラウザーでサポートされておりません</p>"; 5 return; 6 } 7 function success(position) { 8 var latitude = position.coords.latitude;//緯度 9 var longitude = position.coords.longitude;//経度 10 output.innerHTML = '<p>緯度 ' + latitude + '° <br>経度 ' + longitude + '°</p>'; 11 // 位置情報 12 var latlng = new google.maps.LatLng( latitude , longitude ) ; 13 // Google Mapsに書き出し 14 var map = new google.maps.Map( document.getElementById( 'map' ) , { 15 zoom: 15 ,// ズーム値 16 center: latlng ,// 中心座標 17 } ) ; 18 // マーカーの新規出力 19 new google.maps.Marker( { 20 map: map , 21 position: latlng , 22 } ) ; 23 }; 24 function error() { 25 //エラーの場合 26 output.innerHTML = "座標位置を取得できません"; 27 }; 28 navigator.geolocation.getCurrentPosition(success, error);//成功と失敗を判断

[エラー情報]
検索ボックスに入力してエンターを押すと公式サイトのサンプル上ではちゃんと動作するのですが、
私の場合は何も起きず、開発ツールのコンソールにも何も表示されていませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy
java_programmer

2021/11/01 03:41

ご丁寧にありがとうございます。 直接画面の画像を載せました。 エラー自体何もでない状態です。
Lhankor_Mhy

2021/11/01 05:28

markdownを使ってソースコードを書いてください。 また、getMyPlace には何が入っていますか?
java_programmer

2021/11/01 06:24

すいません。markdownで上げなおしました。 getMyPlaceの処理が書いてあるhtmlも記述をしました。こちらは正常に動作がしております。
Lhankor_Mhy

2021/11/01 06:27

ああ、なるほど、このボタンは関係がないのですね。 検索ボックスとは、#pac-input のことですか?
Lhankor_Mhy

2021/11/01 06:51

#map が二つあるように見えるのですが、これが原因ということはないですか?
java_programmer

2021/11/01 07:06

はい getMyPlaceは違う機能になります。 検索ボックスはpac-inputになります。 mapが二つあって一つ消したのですが、そのあとに検索ボタンを押してもなぜか日本と打ったりしているのにシドニーに飛んでしまいます。 検索ボタンを押すと何も出なかったエラーが出るようになっていました。 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'ownerDocument') at Q$.Ts (places_impl.js:83) at js?key=AIzaSyAdZSnAW89DpXllrN7Hxb198lIbUAp2Hqg&libraries=places&callback=initMap:21
Lhankor_Mhy

2021/11/01 07:09

initAutocomplete はどこで呼びだしていますか?
java_programmer

2021/11/01 07:14

すいません。 htmlで検索ボタンを作成してそれを押したときに呼び出すようにしました。 テラテイル内のhtmlのファイルに記述しました。 そうしたあともエラー文は変わりませんでした。
Lhankor_Mhy

2021/11/01 07:24

それではイベントを拾えないので動作しないのでは。 ページロード時などで実行するべきのように思います。
java_programmer

2021/11/02 03:40

ありがとうございます。 callbackを公式サイトのように修正しました。 そのあとも機能は動作しない状態です。 コンソール内でapiのapiキーを作成のことが書かれているのですが、Maps JavaScript API とPlaces API(検索ボックスを使用するために使う)の2つで作成してキーの制限も適切にしています。 エラー内容 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'ownerDocument') at Q$.Ts (places_impl.js:83) at js?key=AIzaSyC6gVVngdDmxOTy4il- r0utj51VfO0fRqw&libraries=places&callback=initAutocomplete&libraries=places&v=weekly:21 Q$.Ts @ places_impl.js:83 (anonymous) @ js?key=AIzaSyC6gVVngdDmxOTy4il-r0utj51VfO0fRqw&libraries=places&callback=initAutocomplete&libraries=places&v=weekly:21 Promise.then (async) hr @ js?key=AIzaSyC6gVVngdDmxOTy4il-r0utj51VfO0fRqw&libraries=places&callback=initAutocomplete&libraries=places&v=weekly:21 initAutocomplete @ MapsJavaScriptApiSearchBox.js:13 onclick @ challengeProgrammingTrade:227 js?key=AIzaSyC6gVVngdDmxOTy4il-r0utj51VfO0fRqw&libraries=places&callback=initAutocomplete&libraries=places&v=weekly:82 You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/gmp-get-started Places API error: BillingNotEnabledMapError https://developers.google.com/maps/documentation/javascript/error-messages#billing-not-enabled-map-error _.Le @ js?key=AIzaSyC6gVVngdDmxOTy4il-r0utj51VfO0fRqw&libraries=places&callback=initAutocomplete&libraries=places&v=weekly:82 (anonymous) @ places_impl.js:65 (anonymous) @ places_impl.js:27 e @ places_impl.js:25 c @ common.js:96 (anonymous) @ AutocompletionService.GetQueryPredictions?1s日本&4sja&6m6&1m2&1d-33.89730187304172&2d151.16800158691407&2m2&1d-33.840288607560595&2d151.27099841308595&15e3&21m1&2e1&callback=_xdc_._qtqk7a&key=AIzaSyC6gVVngdDmxOTy4il-r0utj51VfO0fRqw&token=50070:1
Lhankor_Mhy

2021/11/02 03:41

そうしてしまうと、今までのコールバックが動作しないと思いますが……
java_programmer

2021/11/02 03:48

すいません callback=initMap この状態から callback=initAutocomplete&libraries=places&v=weekly 公式のものに変えましたが callback=initMap&initAutocomplete&libraries=places&v=weekly これでもダメでした。 initMapだけの状態から公式サイトのものを追加するにはどうすれば良いでしょうか?
Lhankor_Mhy

2021/11/02 03:54

それはできないと思います。 別のところから呼び出すしかないのでは。
java_programmer

2021/11/02 04:26

ありがとうございます。 前の処理は別に消してもよいので公式サイトのまんまのcalbackで一回やってみてもダメでした。 公式サイトをそのまましてもできないとなると検索ボックスのPlaces APIの許可ができていないなどが考えられますが、それもちゃんと設定しているので謎な状態です。
Lhankor_Mhy

2021/11/02 04:29

#map が二つあるのが原因ということはないですか?
java_programmer

2021/11/02 04:34

すいません。こちらのテラテイル上のコードから一つ消すのを忘れていました。 最新のhtmlにしました。 1つだけでも動作は同じでした。
java_programmer

2021/11/02 05:00

動作チェックをありがとうございます。 となるとapiでしょうか? ちなみにあなた様がapiキーを作成するgoogleのサイトのアカウントは課金アカウントでしょうか?
Lhankor_Mhy

2021/11/02 05:06 編集

いえ、私のアカウントではなくて、Google のサンプルページから JSFiddle のボタンをクリックしてできたキーです。
java_programmer

2021/11/02 05:08

なるほどです。 エラーの中に有料アカウントになれみたいなものもみたので有料じゃないとできないのかとも思ってしまいましたがこのサービスは無料か有料かどちらかがわからない状態です。
Lhankor_Mhy

2021/11/02 05:20

課金設定してないんですか? では、それが原因ではないですか?
java_programmer

2021/11/02 05:36

すいません。その可能性があります。 200ドル分までは毎月無料になるらしいんですけどそれを超えると勝手に支払われるらしくてplace apiの料金表みたいなものが見当たらなくて困っています。
java_programmer

2021/11/02 06:05

ありがとうございます! 一回検索するごとに約4円消費という認識でよろしいでしょうか? 結構高いのですね
java_programmer

2021/11/03 02:03

クレジットを登録すれば行けそうです。 長らく付き合ってくださってありがとうございました。
java_programmer

2021/11/03 02:04

あなた様をベストアンサーに選択したいのですが何でもよいので回答欄に記述してもらえますでしょうか?
Lhankor_Mhy

2021/11/03 12:38

ありがとうございます。ですが、自己解決で処理していただいていいですか?
java_programmer

2021/11/03 13:18

承知いたしました。 自己解決処理完了しました。 改めましてありがとうございました。
guest

回答1

0

自己解決

googleMapAPIの検索機能を利用するには課金アカウントが必要だった。
課金アカウントを利用すれば本来のAPIの機能が利用できた。
Lhankor_Mhyさんの数々の助言が解決への助けになった。

投稿2021/11/03 13:17

java_programmer

総合スコア31

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問