jQuery Geocoding Tutorial

Before we dive in to the tutorial ...

This is a tutorial for using the OpenCage Geocoding API in jQuery. You will need to sign up for an OpenCage API key.

Once you've done that we recommend you spend five minutes

Ok, ready?

Using the OpenCage Geocoding API with jQuery

Please note we also have tutorials for javascript and nodejs. If Javascript is your thing you can also find SDKs for ReactJS, TypeScript, GatsbyJS, and various serverless platforms on our SDKs page.

Code example:

<script>
  // load jQuery from a CDN or your server  
  function geocode(query){
    $.ajax({
      url: 'https://api.opencagedata.com/geocode/v1/json',
      method: 'GET',
      data: {
        'key': 'YOUR-API-KEY',
        'q': query,
        'no_annotations': 1
        // see other optional params:
        // https://opencagedata.com/api#forward-opt
      },
      dataType: 'json',
      statusCode: {
        200: function(response){  // success
          console.log(response.results[0].formatted);
        },
        402: function(){
          console.log('hit free trial daily limit');
          console.log('become a customer: https://opencagedata.com/pricing');
        }
        // other possible response codes:
        // https://opencagedata.com/api#codes
      }
    });
  }

  $(document).ready(function(){
    geocode('50.97751,11.32858');
    // console should now show:
    // 'Goethe-Nationalmuseum, Frauenplan 1, 99423 Weimar, Germany'
  });
</script>

Some issues to consider:

Please note that putting your API key in client side javascript means that it is visible to anyone executing that javascript. We recommend you do this only for internal applications.

Please see our detailed guide to protecting your API key(s).

As an added measure of safety subscription customers can define a value for the Access-Control-Allow-Origin header in their account dashboard which will limit AJAX requests to a specific domain. You can find the details in the API documentation.

That being said, one worry that potential clients sometimes raise is that someone will get their key and start using it heavily and they will face a large and unexpected bill. Fear not - that can't happen because of how our pricing works. Subscription customers buy a month in advance, and there is no usage-based charging. If we see an explosion of usage we email you and ask if it is expected and the source is known. If yes, and it will be ongoing, we ask you to move to a higher pricing tier in the future, but this never happens as a surprise. If no, we can help you work out what is going on. Please see all the details of how our pricing works.

Start your free trial

2,500 API requests per day.

No credit card required.