Googleプレイスマーカーにinfoboxを追加

Question

GoogleがGoogleプレイスを使用して検索ボックスを作成する方法を示していますが、クリックハンドラーを追加せずに関連情報のある情報ボックスを提供する理由についてはっきりとは分かりません。私はそれを働かせることができませんでした。誰かが私がそれをどうやってやるべきかについてアドバイスをしていますか？私はちょうど見たことがないオンラインでどこかで書き込みがありますか？

Answer 1

documentationのサンプルコードを使用して、場所ごとに情報ウィンドウを表示するためにいくつかのものを追加しました。

コードスニペット：：次のサンプルを確認してください

function initAutocomplete() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     center: {lat: -33.8688, lng: 151.2195}, 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    // Create the search box and link it to the UI element. 
 
    var input = document.getElementById('pac-input'); 
 
    var 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', function() { 
 
     searchBox.setBounds(map.getBounds()); 
 
    }); 
 
    
 
    var infowindow = new google.maps.InfoWindow({ 
 
    }); 
 

 
    var markers = []; 
 
    // [START region_getplaces] 
 
    // Listen for the event fired when the user selects a prediction and retrieve 
 
    // more details for that place. 
 
    searchBox.addListener('places_changed', function() { 
 
     var places = searchBox.getPlaces(); 
 

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

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

 
     // For each place, get the icon, name and location. 
 
     var bounds = new google.maps.LatLngBounds(); 
 
     places.forEach(function(place) { 
 
      var 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. 
 
      var marker = new google.maps.Marker({ 
 
       map: map, 
 
       icon: icon, 
 
       title: place.name, 
 
       position: place.geometry.location 
 
      }); 
 

 
      markers.push(marker); 
 
    
 
      //Add info window click events here 
 
      (function(marker, place){ 
 
       marker.addListener('click', function() { 
 
        var content = "<h1>"+place.name+"</h1>"; 
 
        content += "<p>"+place.formatted_address+"</p>"; 
 
        if (place.formatted_phone_number) { 
 
         content += "<p>Phone:&nbsp;"+place.formatted_phone_number+"</p>"; 
 
        } 
 
        infowindow.setContent(content);    
 
        infowindow.open(map, marker); 
 
       }); 
 
      })(marker, place); 
 

 
      if (place.geometry.viewport) { 
 
       // Only geocodes have viewport. 
 
       bounds.union(place.geometry.viewport); 
 
      } else { 
 
       bounds.extend(place.geometry.location); 
 
      } 
 
     }); 
 
     map.fitBounds(bounds); 
 
    }); 
 
    // [END region_getplaces] 
 
}

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    #map { 
 
    height: 100%; 
 
    } 
 
.controls { 
 
    margin-top: 10px; 
 
    border: 1px solid transparent; 
 
    border-radius: 2px 0 0 2px; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    height: 32px; 
 
    outline: none; 
 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
 
} 
 

 
#pac-input { 
 
    background-color: #fff; 
 
    font-family: Roboto; 
 
    font-size: 15px; 
 
    font-weight: 300; 
 
    margin-left: 12px; 
 
    padding: 0 11px 0 13px; 
 
    text-overflow: ellipsis; 
 
    width: 300px; 
 
} 
 

 
#pac-input:focus { 
 
    border-color: #4d90fe; 
 
} 
 

 
.pac-container { 
 
    font-family: Roboto; 
 
} 
 

 
#type-selector { 
 
    color: #fff; 
 
    background-color: #4d90fe; 
 
    padding: 5px 11px 0px 11px; 
 
} 
 

 
#type-selector label { 
 
    font-family: Roboto; 
 
    font-size: 13px; 
 
    font-weight: 300; 
 
}

<input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
 
<div id="map"></div> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&v=3&libraries=places&callback=initAutocomplete"></script>

をあなたにもjsbinにこの例を見ることができます：http://jsbin.com/gozabuc/edit?html,output

はそれが役に立てば幸い！