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);//成功と失敗を判断
[エラー情報]
検索ボックスに入力してエンターを押すと公式サイトのサンプル上ではちゃんと動作するのですが、
私の場合は何も起きず、開発ツールのコンソールにも何も表示されていませんでした。
まだ回答がついていません
会員登録して回答してみよう