title: Unable to select drop down menu option for google maps input?
body: <p>I am trying to develop a program using Python and Selenium to automate the process of looking up the population within a given radius. I have chosen to use a website that will take a radius and an address. I am able to input the radius and address, however, I need to be able to click on the options in the drop down menu that is powered by google maps so the address is formatted in the correct way for google to find the address and place the radius on the map.</p>
  
  <p>The problem I am running into is that the drop down menu is generated by the browser and I am unable to inspect the element. I am not sure how to get to the element with Python or Javascript using Selenium in order to click on the first drop down menu option. Once the drop down menu option is clicked the radius will generate on the map and I will then be able to proceed to click on the calculate button to find the population within the radius. </p>
  
  <p>TLDR: How can I click on a drop down menu powered by google maps with Python or Javascript in Selenium? The drop down menu is unable to be inspected.</p>
  
  <p>Website: <a href="https://www.freemaptools.com/find-population.htm" rel="nofollow">https://www.freemaptools.com/find-population.htm</a></p>
  
  <p>Python code:</p>
  
  <pre><code>def putInputs(driver,address,radius):
      print "Entering inputs:"
      radius_input = "document.getElementById('radiusinputmi').value = " + radius
      driver.execute_script(radius_input)
      driver.find_element_by_id("radiusinputmi").send_keys(radius)
      driver.find_element_by_id("tb_searchlocation").send_keys(address)
      # i need to click on the drop down menu so the radius shows up!
  </code></pre>
  
  <p>Update:</p>
  
  <p>I have found that the drop down menu shows up at the bottom of the page in the HTML. However, I am still unsure how to select it. I have the following Javascript code to get closer to selecting the desired element.</p>
  
  <p>Javascript:</p>
  
  <pre><code>// address of location to find
  var address = "Indiana University Blooington";
  
  // get input text box
  var location_input = document.getElementById("tb_searchlocation");
  
  // set input text box to the address given
  location_input.value = address;
  
  // get the drop down menu with the available options given input location
  var x = document.getElementsByClassName("pac-container pac-logo")[1];
  
  // make the google maps options drop down visible
  x.setAttribute("style","width: 212px; position: absolute; left: 2px; top: 901px;");
  
  // get the first option from the google maps drop down menu
  var items = x.getElementsByClassName("pac-item");
  
  // HOW CAN I SELECT THE FIRST DROP DOWN MENU??
  // tried:
  // items[0].focus();
  // items[0].select();
  // items[0].click();
  </code></pre>