2012-09-25 43 views
1

嗨下面的代碼給出了地方搜索,但它顯示我想在下面的代碼infobox..the通過DR.Molle谷歌的地方阿比PlaceDetails

http://jsfiddle.net/doktormolle/C5ZtK/

isprovided地方的完整細節唯一名稱 下面

是提取placedetails的代碼,但不能讓它工作

var request = { reference: place.reference }; 
    service.getDetails(request, function(details, status) { 
     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(details.name + "<br />" + details.formatted_address +"<br />" + details.website + "<br />" + details.rating + "<br />" + details.formatted_phone_number); 
     infowindow.open(map, this); 
     }); 
    }); 
    } 

我檢查了開發者頁面,但不能從中獲得太多的任何幫助將不勝感激

+0

檢查出[地方搜索示例](HTTPS ://google-developers.appspot.com/maps/documentation/javascript/examples/place-search)和[properties](https:// develope由PlaceResult對象返回的rs.google.com/maps/documentation/javascript/places#place_search_results)。您應該可以修改示例以適合您的需求。 –

回答

0

實施例是可以獲得地點的詳細信息爲被點擊的標記:

http://www.geocodezip.com/v3_GoogleEx_place-search_starbucks3.html

代碼片斷:

var geocoder = null; 
 
var map; 
 
var service; 
 
var infowindow; 
 
var gmarkers = []; 
 
var bounds = null; 
 

 
function initialize() { 
 
    geocoder = new google.maps.Geocoder(); 
 
    var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316); 
 

 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    center: pyrmont, 
 
    zoom: 15 
 
    }); 
 
    geocoder.geocode({ 
 
    'address': "Seattle, WA" 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     var point = results[0].geometry.location; 
 
     bounds = results[0].geometry.viewport; 
 
     var rectangle = new google.maps.Rectangle({ 
 
     bounds: bounds, 
 
     fillColor: "#FF0000", 
 
     fillOpacity: 0.4, 
 
     strokeColor: "#0000FF", 
 
     strokeWeigth: 2, 
 
     strokeOpacity: 0.9, 
 
     map: map 
 
     }); 
 
     map.fitBounds(bounds); 
 
     var request = { 
 
     bounds: bounds, 
 
     name: "starbucks", 
 
     types: ['establishment'] 
 
     }; 
 
     infowindow = new google.maps.InfoWindow(); 
 
     service = new google.maps.places.PlacesService(map); 
 
     service.search(request, callback); 
 

 
    } else { 
 
     alert("Geocode was not successful for the following reason: " + status); 
 
    } 
 
    }); 
 

 
} 
 

 
function callback(results, status) { 
 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
 
    for (var i = 0; i < results.length; i++) { 
 
     createMarker(results[i]); 
 
    } 
 
    } 
 
} 
 

 
function createMarker(place) { 
 
    var placeLoc = place.geometry.location; 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: place.geometry.location 
 
    }); 
 
    var request = { 
 
    reference: place.reference 
 
    }; 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    service.getDetails(request, function(place, status) { 
 
     if (status == google.maps.places.PlacesServiceStatus.OK) { 
 
     var contentStr = '<h5>' + place.name + '</h5><p>' + place.formatted_address; 
 
     if (!!place.formatted_phone_number) contentStr += '<br>' + place.formatted_phone_number; 
 
     if (!!place.website) contentStr += '<br><a target="_blank" href="' + place.website + '">' + place.website + '</a>'; 
 
     contentStr += '<br>' + place.types + '</p>'; 
 
     infowindow.setContent(contentStr); 
 
     infowindow.open(map, marker); 
 
     } 
 
    }); 
 

 
    }); 
 
    gmarkers.push(marker); 
 
    var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],\"click\");'>" + place.name + "</a><br>"; 
 
    document.getElementById('side_bar').innerHTML += side_bar_html; 
 
} 
 

 
function openInfoWindow(id) { 
 
    return true; 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);
#map { 
 
    height: 400px; 
 
    width: 600px; 
 
    border: 1px solid #333; 
 
    margin-top: 0.6em; 
 
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<table border="1"> 
 
    <tr> 
 
    <td> 
 
     <div id="map"></div> 
 
    </td> 
 
    <td> 
 
     <div id="side_bar"></div> 
 
    </td> 
 
    </tr> 
 
</table>