グーグルマップAPI（そこに新しい「プレイスライブラリ」を利用）で私はしようとしています：
- 特定の経度と緯度の地図を表示します。正常に完了しました
- Googleが検索できるすべての利用可能なストアタイプを含むドロップダウンを表示します。正常に完了しました
- ドロップダウンの選択が変更されたことを検出し、setlocationtype（）関数内の「types」値を変更します。
- したがって、マップには、ドロップダウンリストの選択に基づいて、利用可能なすべての場所の種類（郵便局、ガソリンスタンドなど）が表示されます。
これに困惑した。あまり多くのコードをダンプしなかったといいのですが。正しい結果を得るには、すべてを可能な限り徹底的に説明する必要があると思いました。
前もって感謝します
var map;
var infowindow;
function populateselect(){
var placetype = [];
placetype[0] ="accounting";
placetype[1] ="airport";
placetype[2] ="amusement_park";
placetype[3] ="aquarium";
placetype[4] ="art_gallery";
placetype[5] ="atm";
placetype[6] ="bakery";
placetype[7] ="bank";
placetype[8] ="bar";
placetype[9] ="beauty_salon";
placetype[10] ="bicycle_store";
placetype[11] ="book_store";
placetype[12] ="bowling_alley";
placetype[13] ="bus_station";
placetype[14] ="cafe";
placetype[15] ="campground";
placetype[16] ="car_dealer";
placetype[17] ="car_rental";
placetype[18] ="car_repair";
placetype[19] ="car_wash";
placetype[20] ="casino";
placetype[21] ="cemetery";
placetype[22] ="church";
placetype[23] ="city_hall";
placetype[24] ="clothing_store";
placetype[25] ="convenience_store";
placetype[26] ="courthouse";
placetype[27] ="dentist";
placetype[28] ="department_store";
placetype[29] ="doctor";
placetype[30] ="electrician";
placetype[31] ="electronics_store";
placetype[32] ="embassy";
placetype[33] ="establishment";
placetype[34] ="finance";
placetype[35] ="fire_station";
placetype[36] ="florist";
placetype[37] ="food";
placetype[38] ="funeral_home";
placetype[39] ="furniture_store";
placetype[40] ="gas_station";
placetype[41] ="general_contractor";
placetype[42] ="geocode";
placetype[43] ="grocery_or_supermarket";
placetype[44] ="gym";
placetype[45] ="hair_carev";
placetype[46] ="hardware_store";
placetype[47] ="health";
placetype[48] ="hindu_temple";
placetype[49] ="home_goods_store";
placetype[50] ="hospital";
placetype[51] ="insurance_agency";
placetype[52] ="jewelry_storev";
placetype[53] ="laundry";
placetype[54] ="lawyer";
placetype[55] ="library";
placetype[56] ="liquor_store";
placetype[57] ="local_government_office";
placetype[58] ="locksmith";
placetype[59] ="lodging";
placetype[60] ="meal_delivery";
placetype[61] ="meal_takeaway";
placetype[62] ="mosque";
placetype[63] ="movie_rental";
placetype[64] ="movie_theater";
placetype[65] ="moving_company";
placetype[66] ="museum";
placetype[67] ="night_club";
placetype[68] ="painter";
placetype[69] ="park";
placetype[70] ="parking";
placetype[71] ="pet_store";
placetype[72] ="pharmacy";
placetype[73] ="physiotherapist";
placetype[74] ="place_of_worship";
placetype[75] ="plumber";
placetype[76] ="police";
placetype[77] ="post_office";
placetype[78] ="real_estate_agency";
placetype[79] ="restaurant";
placetype[80] ="roofing_contractor";
placetype[81] ="rv_park";
placetype[82] ="school";
placetype[83] ="shoe_store";
placetype[84] ="shopping_mall";
placetype[85] ="spa";
placetype[86] ="stadium";
placetype[87] ="storage";
placetype[88] ="store";
placetype[89] ="subway_station";
placetype[90] ="synagogue";
placetype[91] ="taxi_stand";
placetype[92] ="train_station";
placetype[93] ="travel_agency";
placetype[94] ="university";
placetype[95] ="veterinary_care";
placetype[96] ="zoo";
var select = document.getElementById("selectPlace");
//var preselected = document.getElementById(playtype["mosque"]);
//preselected.selected = true;
for(var i = 0; i < placetype.length; i++) {
var opt = placetype[i];
var el = document.createElement("option");
el.textContent = opt.replace("_"," ");
el.value = opt;
select.appendChild(el);
}
}
//Create Function that will initialize that map and get things moving
function initialize() {
//Set the Latitude and Longitude coordinates that the map will be centered
//on.
var pyrmont = new google.maps.LatLng(39.0724, -76.7902);
//Create our map and grab the DOM id and populate our map to the DOM id
//specified or passed to the map object. Also we are passing in our map
//options ex. zoom, MapType, etc.
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 10
});
}
function setlocationtype(){
//Set the request options. These options will be passed to the places
//object to we can search for a specific establishment type
//(ie. Store, accountant, hospital, police, etc.
var si = document.getElementById("selectPlace").selectedIndex;
var op = document.getElementById("selectPlace").options;
var pyrmont = new google.maps.LatLng(39.0724, -76.7902);
var request = {
location: pyrmont,
radius: 50000,
types: [op[si].text]
};
//Create an info window that
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
countplaces(results);
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function countplaces(placecount){
var nplaces = placecount.length;
document.getElementById('nplaceholder').innerHTML = nplaces + ' Beauty Salons in Maryland';
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: placeLoc
});
google.maps.event.addListener(marker, 'click', function() {
var placedata = place.rating + "<br>";
placedata = placedata + place.name + "<br>";
placedata = placedata + place.formatted_phone_number+ "<br>";
placedata = placedata + place.formatted_address+ "<br>";
infowindow.setContent(placedata);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function start() {
populateselect();
initialize();
setlocationtype();
}
window.onload = start;