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

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
function initAutocomplete() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -33.8688, lng: 151.2195 },
    zoom: 13,
    mapTypeId: "roadmap",
  });
  // Create the search box and link it to the UI element.
  const input = document.getElementById("pac-input");
  const searchBox = new google.maps.places.SearchBox(input);

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  // Bias the SearchBox results towards current map's viewport.
  map.addListener("bounds_changed", () => {
    searchBox.setBounds(map.getBounds());
  });

  let markers = [];

  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener("places_changed", () => {
    const places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    // Clear out the old markers.
    markers.forEach((marker) => {
      marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name and location.
    const bounds = new google.maps.LatLngBounds();

    places.forEach((place) => {
      if (!place.geometry || !place.geometry.location) {
        console.log("Returned place contains no geometry");
        return;
      }

      const icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25),
      };

      // Create a marker for each place.
      markers.push(
        new google.maps.Marker({
          map,
          icon,
          title: place.name,
          position: place.geometry.location,
        })
      );
      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    map.fitBounds(bounds);
  });
}

[htmlファイル]

html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

			<!-- Maps JavaScript API(地図)、Places API(入力場所検索ボックス)のapiキー作成し埋め込み　ロード時動作 -->
		<script
			src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6gVVngdDmxOTy4il-r0utj51VfO0fRqw&libraries=places&callback=initAutocomplete&libraries=places&v=weekly"
			defer>	
		</script>
		
		
		<!-- jsファイルアクセス -->
		 <script th:src="@{/js/MapsJavaScriptCurrentLocationSearch.js}">
		</script>
		
		<script th:src="@{/js/MapsJavaScriptGetAPI.js}">	
		</script>
		
		<script th:src="@{/js/MapsJavaScriptApiSearchBox.js}">
		</script>

		
		
		<p>
			<button onclick="getMyPlace()">現在位置を取得</button>
		</p>
		<div id="result"></div>
		
		<!-- 検索ボックス機能 -->	
		<input id="pac-input" class="controls" type="text"
				placeholder="Search Box">
		
		<!-- マップ表示 -->
		<div id="map"></div>

</body>
</html>

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

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

Lhankor_Mhy

2021/11/01 03:28

エラーメッセージをご提示ください。また、markdownを使ってソースコードを書いてください。 https://teratail.com/help/question-tips#:~:text=teratail%E3%81%A6%E3%82%99%E3%81%AF%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%88%E3%82%99%E3%82%92%E3%82%B7%E3%83%B3%E3%82%BF%E3%83%83%E3%82%AF%E3%82%B9%E3%83%8F%E3%82%A4%E3%83%A9%E3%82%A4%E3%83%88%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8B%E3%82%99%E3%81%A6%E3%82%99%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82 https://teratail-v2.storage.googleapis.com/assets/img/tour/01.webm?1594714893253494 https://teratail.com/questions/238564

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

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

関連した質問

同じタグがついた質問を見る