Get State Center coordinates from Geocoder API

Question

I can get the City coordinates using the GeoCoder API and input that into my GMaps API so that it centers on that address/coords. I'd like to just pass in the state name to the API and get the center coordinates for that state if possible. I havn't seen any options under address params in the GeoCoder API to only pass in a state name. Any ideas?

Current Implementation works with centering on City:

  function getStateBounds ( state ) {
    var geocoder = new google.maps.Geocoder();
    var latlong;

    geocoder.geocode( { 'latLng': new google.maps.LatLng(latitude, longitude)}, function(results, status)
    {
        if ( status === google.maps.GeocoderStatus.OK )
        {
          latlong = (results[0].geometry.location);
          var lat = latlong.lat();
          var long = latlong.lng();

          // Wasn't working setting inside this method :|
          $scope.setStateCoordsScope( lat, long );
        } else {
          alert( "Geocode was not successful for the following reason: " + status );
        }
    });
  }

latitude and longitude variables are for City only, but I have access to the State string as well.

EDIT: If I only pass in state string, it will do a wrong lookup with states that have matching city names, e.g. Washington.

Why the down vote? It's an entirely valid question. – Christopher Marshall Apr 08 '16 at 20:09 — Christopher Marshall, Apr 08 '16 at 20:09

geocodezip · Accepted Answer · 2020-08-18T19:05:52.387

Passing "State of "+addressStr into the google.maps.Geocoder as the address to be geocoded works for me: example

code snippet:

var map = null;
var geocoder = null;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var myOptions = {
    zoom: 2,
    center: new google.maps.LatLng(47.288828765662416, 7.945261001586914),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  findAddress("United States");
}

function findAddress(address) {
  var addressStr = document.getElementById("stateselect").value;
  if (!address && (addressStr != ''))
    address = "State of " + addressStr;
  else
    address = addressStr;
  if ((address != '') && geocoder) {
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          if (results && results[0] && results[0].geometry && results[0].geometry.viewport)
            map.fitBounds(results[0].geometry.viewport);
        } else {
          alert("No results found");
        }
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<h2>Zoom to State with Select List (Google Maps API)</h2>
<div id="TOPNAV">
  <select id="stateselect" name="countryselect" class="textfeld" onclick="findAddress();return false" onchange="findAddress();return false" onfocus="">
    <option value=''>Select a State....</option>
    <option value="Alabama">Alabama</option>
    <option value="Alaska">Alaska</option>
    <option value="Arizona">Arizona</option>
    <option value="Arkansas">Arkansas</option>
    <option value="California">California</option>
    <option value="Colorado">Colorado</option>
    <option value="Connecticut">Connecticut</option>
    <option value="Delaware">Delaware</option>
    <option value="Florida">Florida</option>
    <option value="Georgia">Georgia</option>
    <option value="Hawaii">Hawaii</option>
    <option value="Idaho">Idaho</option>
    <option value="Illinois">Illinois</option>
    <option value="Indiana">Indiana</option>
    <option value="Iowa">Iowa</option>
    <option value="Kansas">Kansas</option>
    <option value="Kentucky">Kentucky</option>
    <option value="Louisiana">Louisiana</option>
    <option value="Maine">Maine</option>
    <option value="Maryland">Maryland</option>
    <option value="Massachusetts">Massachusetts</option>
    <option value="Michigan">Michigan</option>
    <option value="Minnesota">Minnesota</option>
    <option value="Mississippi">Mississippi</option>
    <option value="Missouri">Missouri</option>
    <option value="Montana">Montana</option>
    <option value="Nebraska">Nebraska</option>
    <option value="Nevada">Nevada</option>
    <option value="New Hampshire">New Hampshire</option>
    <option value="New Jersey">New Jersey</option>
    <option value="New Mexico">New Mexico</option>
    <option value="New York">New York</option>
    <option value="North Carolina">North Carolina</option>
    <option value="North Dakota">North Dakota</option>
    <option value="Ohio">Ohio</option>
    <option value="Oklahoma">Oklahoma</option>
    <option value="Oregon">Oregon</option>
    <option value="Pennsylvania">Pennsylvania</option>
    <option value="Rhode Island">Rhode Island</option>
    <option value="South Carolina">South Carolina</option>
    <option value="South Dakota">South Dakota</option>
    <option value="Tennessee">Tennessee</option>
    <option value="Texas">Texas</option>
    <option value="Utah">Utah</option>
    <option value="Vermont">Vermont</option>
    <option value="Virginia">Virginia</option>
    <option value="Washington">Washington</option>
    <option value="West Virginia">West Virginia</option>
    <option value="Wisconsin">Wisconsin</option>
    <option value="Wyoming">Wyoming</option>
  </select>
</div>
<div id="map_canvas"></div>

Get State Center coordinates from Geocoder API

1 Answers1