Question

With google maps api (utlizing there new “Places Library”)Im trying to:

1. Display a map with a particular longitude and latitude. Done successfully
2. Display a drop down with all the available store types Google can search for. Done successfully
3. Detect when the drop down selection has been changed and change the “types” value within the setlocationtype() function.
4. Consequently, the map should display all available location types (ie. post offices, gas stations, etc.) based on the drop down list selection.

Stumped on this. I hope i didnt dump too much code. I thought i should explain everything as thoroughly as possible to get the right result.

Thanks in advance

  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 + '&nbsp;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;

Answer 1

I think this link will help. This uses the Fusion Tables API in conjunction with the Maps API
https://developers.google.com/fusiontables/docs/samples/change_query

And if you use fusion tables, I am almost certain that you will have all the tools necessary to complete your project. All the source code is in the link below that implements 3 and 4 for you.

https://developers.google.com/fusiontables/docs/sample_code#FTLayers