Getting MissingKeyMapError while fetching latitude/longitude value using JavaScript

Question

I am getting the following error while trying to fetch the latitude and longitude value from address using JavaScript.

Error:

Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

Here is my code:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div>
     <h3> Enter an adress and press the button</h3>

    <input id="address" type="text" placeholder="Enter address here" />
    <button id="btn">Get LatLong</button>
    <div>
        <p>Latitude:
            <input type="text" id="latitude" readonly />
        </p>
        <p>Longitude:
            <input type="text" id="longitude" readonly />
        </p>
    </div>
</div>
<script>
function getLatitudeLongitude(address,callback) {
    // If adress is not supplied, use default value 'Ferrol, Galicia, Spain'
    address = address || 'Ferrol, Galicia, Spain';
    // Initialize the Geocoder
    geocoder = new google.maps.Geocoder();
    if (geocoder) {
        geocoder.geocode({
            'address': address
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                callback(results[0]);
            }
        });
    }
}
document.getElementById('btn').click=function(){
    var address = document.getElementById('address').value;
    getLatitudeLongitude(address,function(result){
         console.log('result',result);
         document.getElementById('latitude').value = result.geometry.location.lat();
         document.getElementById('longitude').value = result.geometry.location.lng();
    });
}
</script>

I am getting those error in console. Here I am running the code in localhost.

score 2 · Accepted Answer · answered Jun 30 '16 at 08:13

Your code works when not running on localhost.

Googling a bit I found this here (and official announcement http://googlegeodevelopers.blogspot.com.au/2016/06/building-for-scale-updates-to-google.html )

If you are using the Google Maps API on localhost or your domain was not active prior to June 22nd, 2016, it will require a key going forward. To fix this problem, please see the Google Maps APIs documentation to get a key and add it to your application: https://developers.google.com/maps/documentation/javascript/get-api-key

function getLatitudeLongitude(address, callback) {
  // If adress is not supplied, use default value 'Ferrol, Galicia, Spain'
  address = address || 'Ferrol, Galicia, Spain';
  // Initialize the Geocoder
  geocoder = new google.maps.Geocoder();
  if (geocoder) {
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        callback(results[0]);
      }
    });
  }
};

function getLatLon() {
  var address = document.getElementById('address').value;
  getLatitudeLongitude(address, function(result) {
    //console.log('result',result);
    document.getElementById('latitude').value = result.geometry.location.lat();
    document.getElementById('longitude').value = result.geometry.location.lng();
  });
}

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div>
  <h3> Enter an adress and press the button</h3>

  <input id="address" type="text" placeholder="Enter address here" />
  <button id="btn" onclick="getLatLon();">Get LatLong</button>
  <div>
    <p>Latitude:
      <input type="text" id="latitude" readonly />
    </p>
    <p>Longitude:
      <input type="text" id="longitude" readonly />
    </p>
  </div>
</div>

@ user2314737 : Error is not coming while i am using rathre than local host but the result is not coming. — satya, Jun 30 '16 at 08:48
@satya I changed your code a bit too because the "click" event was not firing. It works in my snippet — user2314737, Jun 30 '16 at 08:52

Getting MissingKeyMapError while fetching latitude/longitude value using JavaScript

1 Answers1