title: How to get the city name and state/province from marker on google maps
body: <p>searched the forum for a few days and i still can't get my head around it...</p>
  
  <p>all i can find on this site is the option to get the full formatted adress from a marker.. 
  (Like this: 228 Barbary Coast Trail, San Francisco, California 94102, United States)</p>
  
  <p>I'm developing an application that requires only </p>
  
  <ul>
  <li>A city or village name </li>
  <li>A State/province or area name</li>
  <li>The country name</li>
  </ul>
  
  <p>(The other stuff is not needed because the rest is run through lat/lon coordinates).</p>
  
  <p>On login i want them to </p>
  
  <ul>
  <li>Set there coordinates via a marker on google map 
  (onclick and only 1 marker, the second click for a marker would remove the first marker, not sure if i will be using the sensor or not....) </li>
  </ul>
  
  <p>The values of the marker updated in a hidden text field of a form Lat/Lon and city/state/Country </p>
  
  <p>All is working but i cannot get the city name etc to appear in the textboxes... (unhidden the textboxes in this example)</p>
  
  <p>Here is the code i got so far...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
      #map_canvas {height:600px;width:800px}
  &lt;/style&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"&gt;    &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      var map;
      var markersArray = [];
  
      function initMap()
      {
          var latlng = new google.maps.LatLng(48.850258199721495, 2.373046875);
          var myOptions = {
              zoom: 10,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
          // add a click event handler to the map object
          google.maps.event.addListener(map, "click", function(event)
          {
              // place a marker
              placeMarker(event.latLng);
  
              // display the lat/lng in your form's lat/lng fields
              document.getElementById("latFld").value = event.latLng.lat();
              document.getElementById("lngFld").value = event.latLng.lng();
  
  
          });
      }
      function placeMarker(location) {
          // first remove all markers if there are any
          deleteOverlays();
  
          var marker = new google.maps.Marker({
              position: location, 
              map: map
          });
  
          // add marker in markers array
          markersArray.push(marker);
  
          //map.setCenter(location);
      }
  
      // Deletes all markers in the array by removing references to them
      function deleteOverlays() {
          if (markersArray) {
              for (i in markersArray) {
                  markersArray[i].setMap(null);
              }
          markersArray.length = 0;
          }
      }
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="initMap()"&gt;
  &lt;div id="map_canvas"&gt;&lt;/div&gt;
  &lt;input type="text" id="latFld"&gt;
  &lt;input type="text" id="lngFld"&gt;
  &lt;input type="text" id="City"&gt;
  &lt;input type="text" id="Area"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Should be easy but...."i think i twisted my brains on this one...."</p>