How can I get just city and state from the Google Maps API?

Question

I want to remove the country from the Google API map search.For example I don't want Atlanta,GA,USA but I want something like Atlanta,GA. Is this possible?

Here is my code. The form in Laravel blade:

{!!Form::open(array('url'=>'search','method'=>'get','id'=>'theform')) !!}
{{Form::text('mywhat','',array('placeholder'=>'Search Business or Keywords','class'=>'form-control f1','size'=>'50%','height'=>'auto','id'=>'whatty','autocomplete'=>'off'))}}
{{Form::text('mywhere','',array('placeholder'=>'City State or ZipCode','class'=>'form-control','height'=>'auto','id'=>'location-input','autocomplete'=>'off'))}}
{{Form::submit('Search', array('class'=>'btn btn-warning bbt','id'=>'button'))}}
{!!Form::close() !!}

The JavaScript code:

<script type="text/javascript"> 
   var searchbox=new google.maps.places.SearchBox(document.getElementById('location-input'));
</script>

1) Edit you question and add your code there, not in the comments. 2) This bit of javascript doesn't make much sense out of context. Do you have HTML that goes with this? — WillardSolutions, Feb 14 '18 at 16:56
You should check out Google's API docs on this. They provide a very comprehensive breakdown of what their APIs return. My guess is you can intercept the return before rendering it into your form and customize it first. — Luke, Feb 14 '18 at 21:56
@Luke I've been looking all day and I don't see nothing that talks about getting only the city and state or removing the country on google api. I'm sorry to keep bothering you but i'm just getting really annoyed with this. — , Feb 15 '18 at 03:24
Have you tried this: https://developers.google.com/maps/documentation/javascript/examples/places-queryprediction? — beaver, Feb 15 '18 at 14:55
It's not telling me anything about removing the country. I'm trying to just get the city and state for example Atlanta,GA not Atlanta,GA, USA. — , Feb 15 '18 at 16:16

Nick Timmer · Answer 1 · 2018-12-20T23:44:01.987

I am trying to do the exact same thing... (not show the ', USA' at the end of every city, State entry)

It's funny because I believe it used to work this way out of the box... see this old screenshot in the developer docs here: https://developers.google.com/maps/documentation/javascript/places-autocomplete#map_controls

However if you go to their example it does not work this way: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-hotelsearch

Look you thought that Input field was long enough for any city right? wrong:

Here is my approach using MutationObserver to remove the Country every time! This approach is inspired by this other stackoverflow post: JS: event listener for when element becomes visible?

Update: this now works with IE (I have tested IE, Edge, Firefox, Chrome)

<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete Test</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
    </style>
  </head>

  <body>

    <div id="findhotels">
      Find City State:
    </div>

    <div id="locationField">
      <input id="autocomplete" placeholder="Enter a city" type="text" />
    </div>

    <script>

      var autocomplete;
   var addressEle = document.getElementById('autocomplete');
   var dropdown;
   var times = 0;
   
      function initAutocomplete() {
        
        // Create the autocomplete object and associate it with the UI input control.
        // Restrict the search to the default country, and to place type "cities".
        autocomplete = new google.maps.places.Autocomplete(
            (addressEle), {
              types: ['(cities)'],
              componentRestrictions: {'country': 'us'}
            });
   
        autocomplete.addListener('place_changed', onPlaceChanged);
      }
   
   function initAutoObserver(){
  dropdown = document.querySelector('div.pac-container.pac-logo');
  if( dropdown){
   if(times){ console.log( 'IE sucks... recursive called '+times+' times.' ); }
    //Literally the ONLY listener google gives us is the 'place_changed' Listener
    //So we are having to use a MutationObserver to detect when the dropdown is shown/hidden 
    //When Dropdown changes, remove ', USA'
   var observer = new MutationObserver(function(){
      if(dropdown.style.display !='none' ){
     //console.log('is visible');
     for(var i=0,l=dropdown.children.length; i<l; i++){ 
      var thespan = dropdown.children[i].lastElementChild
      thespan.innerHTML = thespan.innerHTML.replace(', USA','');
     }
      } else {
     //console.log('is hidden');
     //console.log(addressEle.value);
     addressEle.value = addressEle.value.replace(', USA','');
      }
   });
   observer.observe(dropdown,  { attributes: true, childList: true });
  }else {
   //IE seems to take longer to add the dropdown element to the dom:
   times++;
   setTimeout( initAutoObserver, 20);
  }
   }
   window.addEventListener("load", initAutoObserver );

      // When the user selects a city, get the place details for the city
      function onPlaceChanged() {
        var place = autocomplete.getPlace();
        if (place.geometry) {
   //console.log(place);
        } else {
   addressEle.placeholder = 'Enter a city';
        }
      }
   
 //Prevent Numbers (Allow Only Letters) from Being entered into the City, State Field:
    addressEle.addEventListener('input', function (event) {
        this.value = this.value.replace(/[^a-zA-Z -,]/g, "");
    });
 
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvRwR3-fGr8AsnMdzmQVkgCdlWhqUiCG0&libraries=places&callback=initAutocomplete"
        async defer></script>
  </body>
</html>

How can I get just city and state from the Google Maps API?

1 Answers1

Linked