Google Maps API: Geocoder: unknown property function:

Question

I'm currently trying to Google Geocoder API to convert an address into Lat/Lng coordinates, however, when using the example on their dev documentation(https://developers.google.com/maps/documentation/javascript/geocoding), I am running into an error of "InvalidValueError: unknown property function"

In my HTML file, I have the call to google map API and a map div, where my map should be rendered. (of course i have other stuff too, but just for the sake of getting straight to the point i will only post the relevant code)

<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap" async defer></script>
<div id="map"></div>

And in my JS file:

window.initMap = function(){
var fromLocation = new google.maps.LatLng(37.09024, -95.712891),
  destLocation = new google.maps.LatLng(37.09024, -95.712891),
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.09024 , lng: -95.712891}, // center of USA
    zoom: 4 // continet level
  }),
  directionService = new google.maps.DirectionsService(),
  directionRender = new google.maps.DirectionsRenderer({
    map: map
  }),
  markerA = new google.maps.Marker({
    position: fromLocation,
    title: "Point A",
    label: "From",
    map:map
  }),
  markerB = new google.maps.Marker({
    position: destLocation,
    title: "Point B",
    label:"Destination",
    map:map
  });
   getLatLng("Los Angeles");
 } // end of initMap

 function getLatLng(address){
   geocoder = new google.maps.Geocoder();
   geocoder.geocode({address: address, function(results,status){
    if(status === 'OK'){
      console.log(results[0].geometry.location);
    }
    else{
      console.log("Geocoding couldn't convert string address to lat/long points");
    }
  }
 });// end of geocoder method.
}

Any idea on how to fix the unknown property function error? Thanks!

geocodezip geocodezip · Accepted Answer · 2016-10-02T14:19:36

You have a typo in the function getLatLng:

geocoder.geocode({
  address: address,

There needs to be a "}" after address: address

function getLatLng(address) {
  geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    address: address},
    function(results, status) {
      if (status === 'OK') {
        console.log(results[0].geometry.location);
      } else {
        console.log("Geocoding couldn't convert string address to lat/long points");
      }
  }); // end of geocoder method.
}

window.initMap = function() {
    var fromLocation = new google.maps.LatLng(37.09024, -95.712891),
      destLocation = new google.maps.LatLng(37.09024, -95.712891),
      map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: 37.09024,
          lng: -95.712891
        }, // center of USA
        zoom: 4 // continet level
      }),
      directionService = new google.maps.DirectionsService(),
      directionRender = new google.maps.DirectionsRenderer({
        map: map
      }),
      markerA = new google.maps.Marker({
        position: fromLocation,
        title: "Point A",
        label: "From",
        map: map
      }),
      markerB = new google.maps.Marker({
        position: destLocation,
        title: "Point B",
        label: "Destination",
        map: map
      });
    getLatLng("Los Angeles");
  } // end of initMap

function getLatLng(address) {
  geocoder = new google.maps.Geocoder();
  geocoder.geocode({
      address: address
    },
    function(results, status) {
      if (status === 'OK') {
        console.log(results[0].geometry.location);
      } else {
        console.log("Geocoding couldn't convert string address to lat/long points");
      }
    }); // end of geocoder method.
}

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

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div id="map"></div>

Google Maps API: Geocoder: unknown property function:

1 Answers