前提・実現したいこと
WebサイトにGooglemapを掲載し、検索地点の詳細情報を載せたいです。
Google Maps Platformのサンプルを参考に、検索した地点をマップ上に表示させています。
以下の情報を参考にphotos[]やiconを表示させたいのですが、
既存のJSにどう組み込んだらいいのかわかりません。
https://developers.google.com/maps/documentation/javascript/places#place_details
該当のソースコード
Javascript
1function initAutocomplete() { 2 const map = new google.maps.Map(document.getElementById("map"), { 3 center: {lat: 35.681382, lng:139.76608399999998}, 4 zoom: 15, 5 mapTypeId: "roadmap", 6 }); 7 8 marker = new google.maps.Marker({ 9 position: {lat: 35.681382, lng:139.76608399999998}, 10 map: map 11 }); 12 13 14 const input = document.getElementById("pac-input"); 15 const searchBox = new google.maps.places.SearchBox(input); 16 17 map.addListener("bounds_changed", () => { 18 searchBox.setBounds(map.getBounds()); 19 }); 20 let markers = []; 21 22 searchBox.addListener("places_changed", () => { 23 const places = searchBox.getPlaces(); 24 25 if (places.length == 0) { 26 return; 27 } 28 markers.forEach((marker) => { 29 marker.setMap(null); 30 }); 31 markers = []; 32 const bounds = new google.maps.LatLngBounds(); 33 const request = { 34 placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4", 35 fields: ["name", "formatted_address", "place_id", "geometry"], 36 }; 37 38 places.forEach((place) => { 39 if (!place.geometry) { 40 console.log("返された場所にはジオメトリが含まれていません。"); 41 return; 42 } 43 44 const icon = { 45 url: place.icon, 46 size: new google.maps.Size(71, 71), 47 origin: new google.maps.Point(0, 0), 48 anchor: new google.maps.Point(17, 34), 49 scaledSize: new google.maps.Size(25, 25), 50 }; 51 markers.push( 52 new google.maps.Marker({ 53 map, 54 icon, 55 title: place.name, 56 position: place.geometry.location, 57 }) 58 ); 59 60 if (place.geometry.viewport) { 61 bounds.union(place.geometry.viewport); 62 } else { 63 bounds.extend(place.geometry.location); 64 } 65 }); 66 map.fitBounds(bounds); 67 }); 68 69} 70 71window.initAutocomplete = initAutocomplete;
補足情報
Geocoding API, Maps JavaScript API, Places APIを有効化済み
あなたの回答
tips
プレビュー