1"use strict";(self.webpackChunkgeoapify_home=self.webpackChunkgeoapify_home||[]).push([[4729],{1973:function(n,e,t){t.r(e),t.d(e,{default:function(){return L}});var a=t(4506),s=t(8453),o=t(6540);function p(n){const e=Object.assign({p:"p",strong:"strong",a:"a",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",code:"code",span:"span",ul:"ul",li:"li",h3:"h3"},(0,s.RP)(),n.components),{TableOfContent:t,PageList:a,FAQWithStructuredData:p}=e;return p||l("FAQWithStructuredData",!0),a||l("PageList",!0),t||l("TableOfContent",!0),o.createElement(o.Fragment,null,o.createElement(t,{titles:[{label:"Geocoding API overview",id:"brief-overview-of-geoapify-geocoding-api"},{label:"Geocode a single address",id:"geocode-a-single-address"},{label:"Geocode multiple addresses",id:"geocode-multiple-addresses"},{label:"Read and use the geocoding response",id:"read-and-use-the-geocoding-response"},{label:"Conclusion",id:"conclusion"},{label:"Learn more",id:"learn-more"},{label:"FAQ",id:"faq"}]}),"\n",o.createElement(e.p,null,"One of the most common geocoding tasks is getting coordinates for a list of addresses, usually customer or client addresses. This is a common requirement for delivery planning, service coverage checks, route optimization, and map visualization."),"\n",o.createElement(e.p,null,"This is exactly what a ",o.createElement(e.strong,null,"Geocoding API")," is used for. Geocoding converts an address or place name into geographic coordinates such as ",o.createElement(e.strong,null,"latitude")," and ",o.createElement(e.strong,null,"longitude"),", so you can place locations on a map, calculate routes, or analyze service areas. Along with coordinates, the API can also return ",o.createElement(e.strong,null,"parsed")," and ",o.createElement(e.strong,null,"normalized")," address data, which helps validate user input, standardize records, and work with address components in your application."),"\n",o.createElement(e.p,null,"In this tutorial we will look at how to geocode addresses with ",o.createElement(e.a,{href:"/geocoding-api/"},"Geoapify Geocoding API")," in JavaScript. We will cover single-address geocoding with free-form and structured input, and multiple-address geocoding with a ",o.createElement(e.strong,null,"rate-limit-friendly")," request flow."),"\n",o.createElement(e.p,null,"Below are two JavaScript examples that cover the most common geocoding scenarios:"),"\n",o.createElement(e.table,null,o.createElement(e.thead,null,o.createElement(e.tr,null,o.createElement(e.th,null,"Title"),o.createElement(e.th,null,"Description"),o.createElement(e.th,null,"Link"))),o.createElement(e.tbody,null,o.createElement(e.tr,null,o.createElement(e.td,null,"Single address geocoding"),o.createElement(e.td,null,"Geocode one address with free-form or structured input and read the best match from the response."),o.createElement(e.td,null,o.createElement(e.a,{href:"https://codepen.io/editor/team/geoapify/pen/019dbf0d-fbbf-7f67-8675-ad0484b66010",target:"_blank",rel:"nofollow"},"Open CodePen"))),o.createElement(e.tr,null,o.createElement(e.td,null,"Multiple addresses geocoding"),o.createElement(e.td,null,"Geocode a list of addresses, keep input-to-result mapping, and respect API rate limits."),o.createElement(e.td,null,o.createElement(e.a,{href:"https://codepen.io/team/geoapify/pen/MYbgqOO",target:"_blank",rel:"nofollow"},"Open CodePen"))))),"\n",o.createElement("h2",{className:"sticky-anchor",id:"brief-overview-of-geoapify-geocoding-api"},"Geocoding API overview"),"\n",o.createElement(e.p,null,"In this tutorial, we will use the ",o.
1createElement(e.a,{href:"/geocoding-api/"},"Geoapify Geocoding API")," to convert addresses into coordinates. The API accepts both ",o.createElement(e.strong,null,"free-form")," input through the ",o.createElement(e.code,null,"text")," parameter and ",o.createElement(e.strong,null,"structured")," input through separate parameters like ",o.createElement(e.code,null,"name"),", ",o.createElement(e.code,null,"housenumber"),", ",o.createElement(e.code,null,"street"),", ",o.createElement(e.code,null,"postcode"),", ",o.createElement(e.code,null,"city"),", ",o.createElement(e.code,null,"state"),", and ",o.createElement(e.code,null,"country"),"."),"\n",o.createElement(e.p,null,"The request endpoint is:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">https://api.geoapify.com/v1/geocode/search</code></pre></div>'}})),"\n",o.createElement(e.p,null,"The most important request parameters for this tutorial are:"),"\n",o.createElement(e.ul,null,"\n",o.createElement(e.li,null,o.createElement(e.code,null,"text"),": a free-form address string"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"name"),", ",o.createElement(e.code,null,"housenumber"),", ",o.createElement(e.code,null,"street"),", ",o.createElement(e.code,null,"postcode"),", ",o.createElement(e.code,null,"city"),", ",o.createElement(e.code,null,"state"),", ",o.createElement(e.code,null,"country"),": structured address fields"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"apiKey"),": your Geoapify API key. You can register and get a free API key at ",o.createElement(e.a,{href:"https://myprojects.geoapify.com/",target:"_blank",rel:"nofollow"},"Geoapify MyProjects"),". The free plan includes up to 3000 geocoding requests per day."),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"format"),": response format such as ",o.createElement(e.code,null,"json")," or ",o.createElement(e.code,null,"geojson")),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"limit"),": maximum number of results to return"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"filter"),": restrict results to a specific area"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"bias"),": prefer results near a location or within an area"),"\n"),"\n",o.createElement(e.p,null,"The API returns one or more matching results. Each result includes coordinates and normalized address properties, so you can choose the best match and use it in your application."),"\n",o.createElement(e.p,null,"For the full parameter reference, see the ",o.createElement(e.a,{href:"https://apidocs.geoapify.com/docs/geocoding/forward-geocoding/",target:"_blank",rel:"nofollow"},"Forward Geocoding API documentation"),". You can also experiment with requests in the ",o.createElement(e.a,{href:"https://apidocs.geoapify.com/playground/geocoding/",target:"_blank",rel:"nofollow"},"Geoapify Geocoding Playground"),"."),"\n",o.createElement("h2",{className:"sticky-anchor",id:"geocode-a-single-address"},"Geocode a single address"),"\n",o.createElement(e.p,null,"Let's start with the most common case: geocoding a single address in JavaScript. The example below uses ",o.createElement(e.code,null,"fetch()")," and builds the request URL from parameters, which is a clean way to work with free-form input and additional options like ",o.createElement(e.code,null,"format")," and ",o.createElement(e.code,null,"limit"),"."),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`const apiKey = "YOUR_API_KEY";\n\nasync function geocodeSingleAddress(address) {\n const params = new URLSearchParams({\n text: address,\n format: "json",\n limit: "1",\n apiKey\n });\n\n const url = \\`https://api.geoapify.com/v1/geocode/search?\\${params.toString()}\\`;\n const response = await fetch(url);\n const result = await response.json();\n\n return result;\n}\n\ngeocodeSingleAddress("
11600 Amphitheatre Parkway, Mountain View, CA")\n .then(result => console.log(result))\n .catch(error => console.error(error));`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> apiKey <span class="token operator">=</span> <span class="token string">"YOUR_API_KEY"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">geocodeSingleAddress</span><span class="token punctuation">(</span><span class="token parameter">address</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> params <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URLSearchParams</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> address<span class="token punctuation">,</span>\n <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token string">"json"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token string">"1"</span><span class="token punctuation">,</span>\n apiKey\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://api.geoapify.com/v1/geocode/search?</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>params<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> result<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token function">geocodeSingleAddress</span><span class="token punctuation">(</span><span class="token string">
1"1600 Amphitheatre Parkway, Mountain View, CA"</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">result</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}})),"\n",o.createElement(e.p,null,"In this example, we build the request URL with the following parameters:"),"\n",o.createElement(e.ul,null,"\n",o.createElement(e.li,null,o.createElement(e.code,null,"text"),": the free-form address to geocode"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"format=json"),": return the result as a JSON object"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"limit=1"),": return only the best match"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"apiKey"),": authenticate the request"),"\n"),"\n",o.createElement(e.p,null,"You can also build the URL directly as a string:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`const apiKey = "YOUR_API_KEY";\nconst address = "
11600 Amphitheatre Parkway, Mountain View, CA";\n\nconst url = \\`https://api.geoapify.com/v1/geocode/search?text=\\${encodeURIComponent(address)}&format=json&limit=1&apiKey=\\${apiKey}\\`;\n\nfetch(url)\n .then(response => response.json())\n .then(result => console.log(result))\n .catch(error => console.error(error));`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> apiKey <span class="token operator">=</span> <span class="token string">"YOUR_API_KEY"</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> address <span class="token operator">=</span> <span class="token string">
1"1600 Amphitheatre Parkway, Mountain View, CA"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://api.geoapify.com/v1/geocode/search?text=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>address<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&format=json&limit=1&apiKey=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>apiKey<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>\n\n<span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">result</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}})),"\n",o.createElement(e.p,null,"When you use ",o.createElement(e.code,null,"URLSearchParams"),", parameter values are encoded automatically. When you build the URL manually, you should use ",o.createElement(e.code,null,"encodeURIComponent()")," for address values, otherwise spaces, commas, and other special characters may break the request."),"\n",o.createElement(e.p,null,"JavaScript docs: ",o.createElement(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams",target:"_blank",rel:"nofollow"},"URLSearchParams"),", ",o.createElement(e.a,{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent",target:"_blank",rel:"nofollow"},"encodeURIComponent()")),"\n",o.createElement(e.p,null,"If you already have separate address fields, you can send a structured query instead of a free-form ",o.createElement(e.code,null,"text")," value:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`const apiKey = "YOUR_API_KEY";\n\nasync function geocodeStructuredAddress() {\n const params = new URLSearchParams({\n housenumber: "1600",\n street: "Amphitheatre Parkway",\n city: "
1Mountain View",\n state: "CA",\n country: "United States",\n format: "json",\n limit: "1",\n apiKey\n });\n\n const url = \\`https://api.geoapify.com/v1/geocode/search?\\${params.toString()}\\`;\n const response = await fetch(url);\n const result = await response.json();\n\n return result;\n}`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> apiKey <span class="token operator">=</span> <span class="token string">"YOUR_API_KEY"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">geocodeStructuredAddress</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> params <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URLSearchParams</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">housenumber</span><span class="token operator">:</span> <span class="token string">"1600"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">street</span><span class="token operator">:</span> <span class="token string">"Amphitheatre Parkway"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">city</span><span class="token operator">:</span> <span class="token string">
1"Mountain View"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token string">"CA"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">country</span><span class="token operator">:</span> <span class="token string">"United States"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token string">"json"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token string">"1"</span><span class="token punctuation">,</span>\n apiKey\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://api.geoapify.com/v1/geocode/search?</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>params<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> result<span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(e.p,null,"Structured queries are useful when the address is already split into fields, for example from a checkout form or CRM record. Free-form queries work well when users enter the whole address into a single input."),"\n",o.createElement(e.h3,null,"Try the example"),"\n",o.createElement(e.p,null,"Use the live CodePen example below to test single-address geocoding in the browser and inspect the request and response flow."),"\n",o.createElement("div",{className:"width-default"},o.createElement("iframe",{height:"480",style:{width:"100%",border:"1px solid #e5e7eb",borderRadius:"8px"},scrolling:"no",frameBorder:"no",title:"Geoapify Geocoding API: Build, Encode, Send Request",src:"https://codepen.io/editor/team/geoapify/embed/019dbf0d-fbbf-7f67-8675-ad0484b66010?default-tab=result",loading:"lazy"})),"\n",o.createElement(e.p,null,"See the Pen ",o.createElement(e.a,{href:"https://codepen.io/editor/team/geoapify/pen/019dbf0d-fbbf-7f67-8675-ad0484b66010",target:"_blank",rel:"nofollow"},"Geoapify Geocoding API: Build, Encode, Send Request")," on CodePen."),"\n",o.createElement("h2",{className:"sticky-anchor",id:"geocode-multiple-addresses"},"Geocode multiple addresses"),"\n",o.createElement(e.p,null,"Geocoding a list of addresses requires a slightly different approach than geocoding a single address. If you send too many requests at once, you may hit API rate limits and get ",o.createElement(e.code,null,"429 Too Many Requests")," responses. Read more in ",o.createElement(e.a,{href:"/how-to-avoid-429-too-many-requests-with-api-rate-limiting/"},"How to avoid 429 Too Many Requests with API rate limiting"),"."),"\n",o.createElement(e.p,null,"This is why ",o.createElement(e.strong,null,"requests per second (RPS)")," matter. Geoapify's free plan includes up to ",o.createElement(e.strong,null,"5 requests per second")," and ",o.createElement(e.strong,null,"3000 requests per day"),", so when you process multiple addresses you should queue requests and send them in a controlled flow."),"\n",o.createElement(e.p,null,"Here is one way to do that with the ",o.
1createElement(e.a,{href:"https://www.npmjs.com/package/@geoapify/request-rate-limiter",target:"_blank",rel:"nofollow"},o.createElement(e.code,null,"@geoapify/request-rate-limiter"))," package. It helps process a list of requests while staying within the allowed rate limit."),"\n",o.createElement(e.p,null,"Install the package:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`npm install @geoapify/request-rate-limiter`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="bash"><pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> @geoapify/request-rate-limiter</code></pre></div>'}})),"\n",o.createElement(e.p,null,"Then create one request function per address and pass them to the rate limiter:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`// Create one async request function per address.\nconst requestRateLimiter = getRequestRateLimiter();\nconst requests = addresses.map((address) => createGeocodingRequest(address));\n\n// Run the requests through the rate limiter.\nconst geocodingResults = await requestRateLimiter.rateLimitedRequests(\n requests,\n MAX_REQUESTS_PER_INTERVAL,\n RATE_LIMIT_INTERVAL_MS\n);\n\nfunction createGeocodingRequest(address) {\n return async () => {\n try {\n const response = await fetch(buildGeocodingRequestUrl(address));\n\n if (!response.ok) {\n // Preserve the original input together with the error.\n return {\n address,\n error: \\`Request failed with status \\${response.status}\\`,\n };\n }\n\n const data = await response.json();\n // Return the best matching result for this address.\n return {\n address,\n result: data.results && data.results.length ? data.results[0] : null,\n };\n } catch (error) {\n return {\n address,\n error: String(error),\n };\n }\n };\n}`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
1<path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token comment">// Create one async request function per address.</span>\n<span class="token keyword">const</span> requestRateLimiter <span class="token operator">=</span> <span class="token function">getRequestRateLimiter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> requests <span class="token operator">=</span> addresses<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">address</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">createGeocodingRequest</span><span class="token punctuation">(</span>address<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// Run the requests through the rate limiter.</span>\n<span class="token keyword">const</span> geocodingResults <span class="token operator">=</span> <span class="token keyword">await</span> requestRateLimiter<span class="token punctuation">.</span><span class="token function">rateLimitedRequests</span><span class="token punctuation">(</span>\n requests<span class="token punctuation">,</span>\n <span class="token constant">MAX_REQUESTS_PER_INTERVAL</span><span class="token punctuation">,</span>\n <span class="token constant">RATE_LIMIT_INTERVAL_MS</span>\n<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">createGeocodingRequest</span><span class="token punctuation">(</span><span class="token parameter">address</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">try</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token function">buildGeocodingRequestUrl</span><span class="token punctuation">(</span>address<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// Preserve the original input together with the error.</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n address<span class="token punctuation">,</span>\n <span class="token literal-property property">error</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Request failed with status </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
1\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token comment">// Return the best matching result for this address.</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n address<span class="token punctuation">,</span>\n <span class="token literal-property property">result</span><span class="token operator">:</span> data<span class="token punctuation">.</span>results <span class="token operator">&&</span> data<span class="token punctuation">.</span>results<span class="token punctuation">.</span>length <span class="token operator">?</span> data<span class="token punctuation">.</span>results<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n address<span class="token punctuation">,</span>\n <span class="token literal-property property">error</span><span class="token operator">:</span> <span class="token function">String</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(e.p,null,"In this example:"),"\n",o.createElement(e.ul,null,"\n",o.createElement(e.li,null,o.createElement(e.code,null,"requests")," is an array of functions, where each function sends one geocoding request"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"MAX_REQUESTS_PER_INTERVAL")," and ",o.createElement(e.code,null,"RATE_LIMIT_INTERVAL_MS")," control how many requests can run within the time window"),"\n",o.createElement(e.li,null,"each request returns either a ",o.createElement(e.code,null,"result")," or an ",o.createElement(e.code,null,"error"),", while preserving the original input ",o.createElement(e.code,null,"address")),"\n"),"\n",o.createElement(e.p,null,"This pattern makes it easier to geocode address lists safely and keep the mapping between the original input address and the returned result."),"\n",o.createElement(e.h3,null,"Try the example"),"\n",o.createElement(e.p,null,"Use the live CodePen example below to test multiple-address geocoding with rate limiting in the browser."),"\n",o.createElement("div",{className:"width-default"},o.createElement("iframe",{height:"480",style:{width:"100%",border:"1px solid #e5e7eb",borderRadius:"8px"},title:"Geoapify Geocoding API: Multiple Addresses with Rate Limiting",src:"https://codepen.io/team/geoapify/embed/MYbgqOO?default-tab=result",loading:"lazy"})),"\n",o.createElement(e.p,null,"See the Pen ",o.createElement(e.a,{href:"https://codepen.io/team/geoapify/pen/MYbgqOO",target:"_blank",rel:"nofollow"},"Geoapify Geocoding API: Multiple Addresses with Rate Limiting")," on CodePen."),"\n",o.createElement("h2",{className:"sticky-anchor",id:"read-and-use-the-geocoding-response"},"Read and use the geocoding response"),"\n",o.createElement(e.p,null,"Once a request is complete, the next step is to read the returned data. When you use ",o.createElement(e.code,null,"format=json"),", the API returns a ",o.createElement(e.code,null,"results")," array with one or more matches. If you set ",o.createElement(e.code,null,"limit=1"),", the first item in ",o.createElement(e.code,null,"results")," is the best match for the address."),"\n",o.createElement(e.p,null,"Here is an example response:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`{\n "results": [\n {\n "datasource": {\n "sourcename": "openstreetmap",\n "attribution": "© OpenStreetMap contributors",\n "license": "Open Database License",\n "url": "https://www.openstreetmap.org/copyright"\n },\n "country": "United States",\n "country_code": "us",\n "state": "Oregon",\n "county": "Multnomah County",\n "city": "Portland",\n "postcode": "97239",\n "suburb": "Southwest Hills",\n "street": "Southwest Patrick Place",\n "housenumber": "4155",\n "iso3166_2": "US-OR",\n "lon": -122.6990396,\n "lat": 45.4937284,\n "state_code": "OR",\n "result_type": "building",\n "formatted": "4155 Southwest Patrick Place, Portland, OR 97239, United States of America",\n "address_line1": "4155 Southwest Patrick Place",\n "address_line2": "Portland, OR 97239, United States of America",\n "category": "building.residential",\n "timezone": {\n "name": "America/Los_Angeles",\n "offset_STD": "-08:00",\n "offset_STD_seconds": -28800,\n "offset_DST": "-07:00",\n "offset_DST_seconds": -25200,\n "abbreviation_STD": "PST",\n "abbreviation_DST": "PDT"\n },\n "plus_code": "84QVF8V2+F9",\n "plus_code_short": "F8V2+F9, 97239 Portland, United States",\n "rank": {\n "importance": 0.0000753574425878846,\n "popularity": 4.139753383392894,\n "confidence": 1,\n "confidence_city_level": 1,\n "confidence_street_level": 1,\n "confidence_building_level": 1,\n "match_type": "full_match"\n },\n "place_id": "51f9269710bdac5ec0599f8d017e32bf4640f00102f901e755ed1500000000c00203",\n "bbox": {\n "lon1": -122.6991816,\n "lat1": 45.4935932,\n "lon2": -122.6988161,\n "lat2": 45.4938858\n }\n }\n ],\n "query": {\n "text": "4155 Southwest Patrick Place, Portland, OR 97239, United States of America",\n "parsed": {\n "housenumber": "4155",\n "street": "southwest patrick place",\n "postcode": "97239",\n "city": "portland",\n "state": "or",\n "country": "united states of america",\n "expected_type": "building"\n }\n }\n}`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
1<path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n <span class="token property">"results"</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token property">"datasource"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"sourcename"</span><span class="token operator">:</span> <span class="token string">"openstreetmap"</span><span class="token punctuation">,</span>\n <span class="token property">"attribution"</span><span class="token operator">:</span> <span class="token string">"© OpenStreetMap contributors"</span><span class="token punctuation">,</span>\n <span class="token property">"license"</span><span class="token operator">:</span> <span class="token string">"Open Database License"</span><span class="token punctuation">,</span>\n <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://www.openstreetmap.org/copyright"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"country"</span><span class="token operator">:</span> <span class="token string">"United States"</span><span class="token punctuation">,</span>\n <span class="token property">"country_code"</span><span class="token operator">:</span> <span class="token string">"us"</span><span class="token punctuation">,</span>\n <span class="token property">"state"</span><span class="token operator">:</span> <span class="token string">"Oregon"</span><span class="token punctuation">,</span>\n <span class="token property">"county"</span><span class="token operator">:</span> <span class="token string">"Multnomah County"</span><span class="token punctuation">,</span>\n <span class="token property">"city"</span><span class="token operator">:</span> <span class="token string">"Portland"</span><span class="token punctuation">,</span>\n <span class="token property">"postcode"</span><span class="token operator">:</span> <span class="token string">"97239"</span><span class="token punctuation">,</span>\n <span class="token property">"suburb"</span><span class="token operator">:</span> <span class="token string">"Southwest Hills"</span><span class="token punctuation">,</span>\n <span class="token property">"street"</span><span class="token operator">:</span> <span class="token string">"Southwest Patrick Place"</span><span class="token punctuation">,</span>\n <span class="token property">"housenumber"</span><span class="token operator">:</span> <span class="token string">"4155"</span><span class="token punctuation">,</span>\n <span class="token property">"iso3166_2"</span><span class="token operator">:</span> <span class="token string">"US-OR"</span><span class="token punctuation">,</span>\n <span class="token property">"lon"</span><span class="token operator">:</span> <span class="token number">-122.6990396</span><span class="token punctuation">,</span>\n <span class="token property">"lat"</span><span class="token operator">:</span> <span class="token number">45.4937284</span><span class="token punctuation">,</span>\n <span class="token property">"state_code"</span><span class="token operator">:</span> <span class="token string">"OR"</span><span class="token punctuation">,</span>\n <span class="token property">"result_type"</span><span class="token operator">:</span> <span class="token string">"building"</span><span class="token punctuation">,</span>\n <span class="token property">"formatted"</span><span class="token operator">:</span> <span class="token string">"4155 Southwest Patrick Place, Portland, OR 97239, United States of America"</span><span class="token punctuation">,</span>
1\n <span class="token property">"address_line1"</span><span class="token operator">:</span> <span class="token string">"4155 Southwest Patrick Place"</span><span class="token punctuation">,</span>\n <span class="token property">"address_line2"</span><span class="token operator">:</span> <span class="token string">"Portland, OR 97239, United States of America"</span><span class="token punctuation">,</span>\n <span class="token property">"category"</span><span class="token operator">:</span> <span class="token string">"building.residential"</span><span class="token punctuation">,</span>\n <span class="token property">"timezone"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"America/Los_Angeles"</span><span class="token punctuation">,</span>\n <span class="token property">"offset_STD"</span><span class="token operator">:</span> <span class="token string">"-08:00"</span><span class="token punctuation">,</span>\n <span class="token property">"offset_STD_seconds"</span><span class="token operator">:</span> <span class="token number">-28800</span><span class="token punctuation">,</span>\n <span class="token property">"offset_DST"</span><span class="token operator">:</span> <span class="token string">"-07:00"</span><span class="token punctuation">,</span>\n <span class="token property">"offset_DST_seconds"</span><span class="token operator">:</span> <span class="token number">-25200</span><span class="token punctuation">,</span>\n <span class="token property">"abbreviation_STD"</span><span class="token operator">:</span> <span class="token string">"PST"</span><span class="token punctuation">,</span>\n <span class="token property">"abbreviation_DST"</span><span class="token operator">:</span> <span class="token string">"PDT"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"plus_code"</span><span class="token operator">:</span> <span class="token string">"84QVF8V2+F9"</span><span class="token punctuation">,</span>\n <span class="token property">"plus_code_short"</span><span class="token operator">:</span> <span class="token string">"F8V2+F9, 97239 Portland, United States"</span><span class="token punctuation">,</span>\n <span class="token property">"rank"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"importance"</span><span class="token operator">:</span> <span class="token number">0.0000753574425878846</span><span class="token punctuation">,</span>\n <span class="token property">"popularity"</span><span class="token operator">:</span> <span class="token number">4.139753383392894</span><span class="token punctuation">,</span>\n <span class="token property">"confidence"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token property">"confidence_city_level"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token property">"confidence_street_level"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token property">"confidence_building_level"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token property">"match_type"</span><span class="token operator">:</span> <span class="token string">"full_match"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"place_id"</span><span class="token operator">:</span> <span class="token string">"51f9269710bdac5ec0599f8d017e32bf4640f00102f901e755ed1500000000c00203"</span><span class="token punctuation">,</span>
1\n <span class="token property">"bbox"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"lon1"</span><span class="token operator">:</span> <span class="token number">-122.6991816</span><span class="token punctuation">,</span>\n <span class="token property">"lat1"</span><span class="token operator">:</span> <span class="token number">45.4935932</span><span class="token punctuation">,</span>\n <span class="token property">"lon2"</span><span class="token operator">:</span> <span class="token number">-122.6988161</span><span class="token punctuation">,</span>\n <span class="token property">"lat2"</span><span class="token operator">:</span> <span class="token number">45.4938858</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token property">"query"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"4155 Southwest Patrick Place, Portland, OR 97239, United States of America"</span><span class="token punctuation">,</span>\n <span class="token property">"parsed"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"housenumber"</span><span class="token operator">:</span> <span class="token string">"4155"</span><span class="token punctuation">,</span>\n <span class="token property">"street"</span><span class="token operator">:</span> <span class="token string">"southwest patrick place"</span><span class="token punctuation">,</span>\n <span class="token property">"postcode"</span><span class="token operator">:</span> <span class="token string">"97239"</span><span class="token punctuation">,</span>\n <span class="token property">"city"</span><span class="token operator">:</span> <span class="token string">"portland"</span><span class="token punctuation">,</span>\n <span class="token property">"state"</span><span class="token operator">:</span> <span class="token string">"or"</span><span class="token punctuation">,</span>\n <span class="token property">"country"</span><span class="token operator">:</span> <span class="token string">"united states of america"</span><span class="token punctuation">,</span>\n <span class="token property">"expected_type"</span><span class="token operator">:</span> <span class="token string">"building"</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(e.p,null,"The most useful fields are:"),"\n",o.createElement(e.ul,null,"\n",o.createElement(e.li,null,o.createElement(e.code,null,"lat")," and ",o.createElement(e.code,null,"lon"),": the coordinates of the matched location"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"formatted"),": the full normalized address string"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"housenumber"),", ",o.createElement(e.code,null,"street"),", ",o.createElement(e.code,null,"city"),", ",o.createElement(e.code,null,"state"),", ",o.createElement(e.code,null,"postcode"),", ",o.createElement(e.code,null,"country"),": parsed address components"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"result_type"),": what kind of object was found, for example ",o.createElement(e.code,null,"building")),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"rank"),": confidence and match quality information"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"bbox"),": the bounding box of the matched feature"),"\n"),"\n",o.createElement(e.p,null,"The response also includes a ",o.createElement(e.code,null,"query")," object. The ",o.createElement(e.code,null,"query.parsed")," section shows how the API interpreted the input address, which can be useful for debugging or val
1idating user input."),"\n",o.createElement(e.p,null,"To read the best result, access the first item in the ",o.createElement(e.code,null,"results")," array:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`const firstResult = data.results[0];\n\nconsole.log(firstResult.formatted);\nconsole.log(firstResult.lat, firstResult.lon);\nconsole.log(firstResult.result_type);`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> firstResult <span class="token operator">=</span> data<span class="token punctuation">.</span>results<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\nconsole<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>firstResult<span class="token punctuation">.</span>formatted<span class="token punctuation">)</span><span class="token punctuation">;</span>\nconsole<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>firstResult<span class="token punctuation">.</span>lat<span class="token punctuation">,</span> firstResult<span class="token punctuation">.</span>lon<span class="token punctuation">)</span><span class="token punctuation">;</span>\nconsole<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>firstResult<span class="token punctuation">.</span>result_type<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}})),"\n",o.createElement(e.p,null,"Once you have the first result, you can use it in different ways:"),"\n",o.createElement(e.ul,null,"\n",o.createElement(e.li,null,"save ",o.createElement(e.code,null,"lat")," and ",o.createElement(e.code,null,"lon")," to place the address on a map or use it in routing"),"\n",o.createElement(e.li,null,"show ",o.createElement(e.code,null,"formatted"),", ",o.createElement(e.code,null,"address_line1"),", or ",o.createElement(e.code,null,"address_line2")," in the UI"),"\n",o.createElement(e.li,null,"inspect ",o.createElement(e.code,null,"rank.confidence")," and ",o.createElement(e.code,null,"rank.match_type")," to understand match quality"),"\n"),"\n",o.createElement(e.h3,null,"Check match quality"),"\n",o.createElement(e.p,null,"To check match quality, look at the ",o.createElement(e.code,null,"rank")," object. It contains confidence values and information about how closely the returned address matches the input."),"\n",o.createElement(e.p,null,"In the sample response above, the ",o.
1createElement(e.code,null,"rank")," object contains:"),"\n",o.createElement(e.ul,null,"\n",o.createElement(e.li,null,o.createElement(e.code,null,"confidence: 1"),": the API is highly confident that this is the correct result"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,'match_type: "full_match"'),": the input closely matches the returned address"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"confidence_city_level: 1"),": the city-level match is strong"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"confidence_street_level: 1"),": the street-level match is strong"),"\n",o.createElement(e.li,null,o.createElement(e.code,null,"confidence_building_level: 1"),": the building-level match is strong"),"\n"),"\n",o.createElement(e.p,null,"This combination usually means the address was matched very precisely, down to the building level. If these values are lower, or if the ",o.createElement(e.code,null,"match_type")," is less exact, you may want to review the result more carefully before using it in a user-facing workflow."),"\n",o.createElement(e.p,null,"Before reading the first item, it is a good idea to check that the API returned at least one result:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`if (!data.results || !data.results.length) {\n console.log("No geocoding results found");\n} else {\n const firstResult = data.results[0];\n\n console.log(firstResult.formatted);\n console.log(firstResult.lat, firstResult.lon);\n console.log(firstResult.rank?.confidence);\n console.log(firstResult.rank?.match_type);\n}`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>data<span class="token punctuation">.</span>results <span class="token operator">||</span> <span class="token operator">!</span>data<span class="token punctuation">.</span>results<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"No geocoding results found"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> firstResult <span class="token operator">=</span> data<span class="token punctuation">.</span>results<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>firstResult<span class="token punctuation">.</span>formatted<span class="token punctuation">)</span><span class="token punctuation">;</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>firstResult<span class="token punctuation">.</span>lat<span class="token punctuation">,</span> firstResult<span class="token punctuation">.</span>lon<span class="token punctuation">)</span><span class="token punctuation">;</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>firstResult<span class="token punctuation">.</span>rank<span class="token operator">?.</span>confidence<span class="token punctuation">)</span><span class="token punctuation">;</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>firstResult<span class="token punctuation">.</span>rank<span class="token operator">?.</span>match_type<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(e.p,null,"Not every response contains every field. The available properties depen
1d on the input address, the result type, and the underlying data source."),"\n",o.createElement("h2",{className:"sticky-anchor",id:"conclusion"},"Conclusion"),"\n",o.createElement(e.p,null,"In this tutorial, we looked at how to geocode single addresses and lists of addresses in JavaScript with the Geoapify Geocoding API. We also covered how to build request URLs, handle rate limits, and read the returned results so you can use them in your application."),"\n",o.createElement(e.p,null,"Ready to try it? Open the ",o.createElement(e.a,{href:"https://apidocs.geoapify.com/playground/geocoding/",target:"_blank",rel:"nofollow"},"Geoapify Geocoding Playground")," and send your first request."),"\n",o.createElement("h2",{className:"sticky-anchor",id:"learn-more"},"Learn more"),"\n",o.createElement(e.p,null,"Continue with the resources below to explore related geocoding workflows and integration patterns. These guides cover reverse geocoding, batch processing, and additional ways to work with Geoapify in your applications."),"\n",o.createElement("div",{className:"width-default-wider"},o.createElement(a,{keys:["tutorial/reverse-geocoding-javascript-tutorial","solutions/batch-geocoding-requests","tutorial/geocoding-python"]})),"\n",o.createElement("div",{className:"place-delimiter"}),"\n",o.createElement("div",{className:"-mt-20 pt-20",id:"faq"}),"\n",o.createElement(p,{title:"FAQ",questions:[{question:"What is geocoding?",answer:"Geocoding is the process of converting an address or place name into geographic coordinates such as latitude and longitude. These coordinates can then be used in maps, routing, and other location-based workflows."},{question:"What is the difference between free-form and structured geocoding?",answer:"Free-form geocoding sends the whole address as one text string using the <code>text</code> parameter. Structured geocoding sends separate fields such as <code>housenumber</code>, <code>street</code>, <code>city</code>, and <code>postcode</code>, which is useful when your address data is already split into fields."},{question:"How do I geocode a single address in JavaScript?",answer:"You can send a request to the Geoapify Geocoding API with <code>fetch()</code>, either by building the URL with <code>URLSearchParams</code> or by creating the query string manually. In most cases, setting <code>limit=1</code> is enough to get the best matching result."},{question:"How do I geocode multiple addresses without hitting rate limits?",answer:"Queue the requests and send them in a controlled flow instead of firing all of them at once. In this tutorial, we use <a href='https://www.npmjs.com/package/@geoapify/request-rate-limiter' target='_blank' rel='noopener noreferrer'>@geoapify/request-rate-limiter</a> to respect the Geoapify rate limits."},{question:"What does 429 Too Many Requests mean?",answer:"A 429 Too Many Requests response means your application sent more requests than allowed within the current time window. To avoid it, throttle requests, process address lists in batches, or use a rate limiter. Read more in our guide on <a href='/how-to-avoid-429-too-many-requests-with-api-rate-limiting/' target='_blank'>avoiding 429 errors</a>."},{question:"What fields are returned by the Geoapify Geocoding API?",answer:"A typical response includes coordinates like <code>lat</code> and <code>lon</code>, a normalized address in <code>formatted</code>, separate address components such as <code>street</code>, <code>city</code>, and <code>postcode</code>, as well as metadata such as <code>result_type</code>, <code>rank</code>, and <code>bbox</code>."},{question:"How do I get the best geocoding match from the response?",answer:"When you request <code>format=json</code> and use <code>limit=1</code>, the first item in <code>data.results</code> is the best match. You can also inspect <code>rank.confidence</code> and <code>rank.match_type</code> to better understand the quality of the match."},{question:"What should I do if the API returns no results?",answer:"Always check whether <code>data.results</code> exists and contains at least one item before reading <code>data.results[0]</code>. If there are no results, you can ask the user to review the address, try a broader query, or fall back to structured input if available."},{question:"Should I use URLSearchParams or encodeURIComponent() in JavaScript?",answer:"If you build query strings with <code>URLSearchParams</code>, parameter values are encoded automatically. If you construct the URL manually as a string, you should use <code>encodeURIComponent()</code> for address values to avoid issues with spaces, commas, and other special characters."},{question:"How do I get a Geoapify API key and test requests?",answer:"You can create a free API key in <a href='https://myprojects.geoapify.com/' target='_blank' rel='noopener noreferrer'>Geoapify MyProjects</a>. To test and tweak requests before coding, use the <a href='https://apidocs.geoapify.com/playground/geocoding/' target='_blank' rel='noopener noreferrer'>Geoapify Geocoding Playground</a>."}]}))}var c=function(n={}){const{wrapper:e}=Object.assign({},(0,s.RP)(),n.components);return e?o.createElement(e,n,o.createElement(p,n)):p(n)};function l(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}var r=t(4794),i=t(5588),u=t(8154),d=t(1574),m=t(7127),k=t(1543),g=t(3537),h=t(7339),f=t(2992),y=t(3481),w=t(9911),q=t(9856),b=t(529),E=t(8818),v=t(1435),_=t(2389),I=t(118),S=t(2833),A=t(98
116),R=t(3960),H=t(5898);const x={Link:r.Link,SplitSection:y.A,BackgroundPanel:w.A,Card:q.A,Button:b.A,ButtonGroup:E.A,Banner:v.A,HowToStructuredData:_.A,FAQWithStructuredData:I.A,InputCheckbox:S.A,TryGeolocation:A.A,JSONTree:d.d,TableOfContent:R.A,PageList:H.A},P=({data:{post:n,logo:e,siteData:t,postFormattedData:p},children:c,pageContext:{modifiedTime:l}})=>{const r=n.frontmatter.featuredImage?n.frontmatter.featuredImage.childImageSharp.original:{},d=n.frontmatter.twitterImage2x1?n.frontmatter.twitterImage2x1.childImageSharp.original:{},y=n.frontmatter.languages?n.frontmatter.languages.map((n=>g.A.find((e=>e.id===n)))):[],w=y?y.map((n=>n.label)):null,q=h.A.find((e=>e.id===n.frontmatter.group))||{label:"Geoapify"},b=[n.frontmatter.image1x1,n.frontmatter.image4x3,n.frontmatter.image16x9].filter((n=>!!n)).map((n=>n.childImageSharp.original.src)),E=p.frontmatter.featuredImage?p.frontmatter.featuredImage.childImageSharp.gatsbyImageData:null,v="home"===n.frontmatter.slug.split("/").join("")?"https://www.geoapify.com/":`https://www.geoapify.com/${n.frontmatter.slug}/`;return o.createElement(o.Fragment,null,o.createElement(u.m,null,o.createElement("link",{rel:"canonical",href:v,"data-baseprotocol":"https:","data-basehost":"www.geoapify.com"})),o.createElement(k.A,{webpageTitle:n.frontmatter.title_60,webpageDescription:n.frontmatter.description_120,slug:n.frontmatter.slug,imageSrc:r.src,imageWidth:r.width,imageHeight:r.height,imageAlt:n.frontmatter.featuredImageAlt_120,ogType:"article",twitterImageSrc:d.src,twitterTitle:n.frontmatter.twitterTitle_70,twitterImageAlt:n.frontmatter.twitterImageAlt_420,twitterDescription:n.frontmatter.twitterDescription_200,articleSection:"Geo information systems (GIS)",articleTags:["tutorial",q.label].concat((0,a.A)(w)),created:n.frontmatter.date,modified:l}),o.createElement(f.A,{geoapifySlogan:t.siteMetadata.slogan,companyName:t.siteMetadata.company,logoSrc:e.childImageSharp.gatsbyImageData.src,logoWidth:e.childImageSharp.gatsbyImageData.width,logoHeight:e.childImageSharp.gatsbyImageData.height,slug:n.frontmatter.slug,articleName:n.frontmatter.title_60,articleHeadline:n.frontmatter.headline_110,published:n.frontmatter.date,modified:l,images:b}),o.createElement(m.A,null,o.createElement("article",{className:"geoapify-post"},o.createElement("header",{className:"geoapify-post-header"},o.createElement("div",{className:"geoapify-post-meta"},o.createElement("span",null,p.frontmatter.date),o.createElement("span",{className:"mx-1"}," / "),o.createElement("span",null,"by Geoapify"),o.createElement("span",{className:"ml-1"}," / in "),o.createElement("span",null,o.createElement("a",{href:"/tutorials/"},"Tutorials"))),o.createElement("h1",null,n.frontmatter.title),n.frontmatter.subtitle?o.createElement("h2",{className:"text-2xl text-gray-700 mx-2 font-light"},n.frontmatter.subtitle):null,E?o.createElement("div",{className:"geoapify-post-featured-image"},o.createElement(i.G,{image:E,alt:n.frontmatter.featuredImageAlt_120})):null,n.frontmatter.featuredImageAlt_120?o.createElement("div",{className:"text-center mt-2 mb-10 text-sm italic text-gray-700",dangerouslySetInnerHTML:{__html:n.frontmatter.featuredImageAlt_120}}):o.createElement("div",{className:"mb-10"})),o.createElement("section",{className:"geoapify-post-body"},o.createElement(s.xA,{components:x},c))),o.createElement("div",{className:"post-navigation"},o.createElement("div",{className:"post-navigation-buttons flex flex-col md:flex-row"},o.createElement("div",{className:"previous-post"},o.createElement("a",{href:"/tutorials/",rel:"prev"},o.createElement("div",{className:"previous"},o.createElement("span",{className:"chevron lnr lnr-chevron-left"}),o.createElement("div",{className:"title"},o.createElement("span",{className:"meta"},"Back to"),o.createElement("span",{className:"post-title"},"How-tos and Tutorials")))))))))};function L(n){return o.createElement(P,n,o.createElement(c,n))}},2389:function(n,e,t){var a=t(6540),s=t(8154);e.A=({name:n,description:e,supplies:t,tools:o,steps:p})=>{const c={"@context":"https://schema.org","@type":"HowTo",name:n,description:e,steps:p.map((n=>({"@type":"HowToStep",name:n.name,url:n.url,itemListElement:n.items.map((n=>({"@type":"HowToTip",text:n})))})))};return t&&t.length&&(c.supply=t.map((n=>({"@type":"HowToSupply",name:n})))),o&&o.length&&(c.tools=o.map((n=>({"@type":"HowToTool",name:n})))),a.createElement(s.m,null,a.createElement("script",{type:"application/ld+json"},JSON.stringify(c)))}},2992:function(n,e,t){var a=t(6540),s=t(8154);e.A=({companyName:n,geoapifySlogan:e,logoSrc:t,logoWidth:o,logoHeight:p,slug:c,articleName:l,articleHeadline:r,published:i,modified:u,images:d})=>{const m={"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.geoapify.com/#organization",name:n,url:"https://www.geoapify.com/",email:"[email protected]",brand:"Geoapify Location Platform",sameAs:["https://www.facebook.com/pg/Geoapify","https://www.linkedin.com/company/geoapify","https://twitter.com/Geoapify"],logo:{"@type":"ImageObject","@id":"https://www.geoapify.com/#logo",url:t,width:o,height:p,caption:n}
1,slogan:e,image:{"@id":"https://www.geoapify.com/#logo"}}]},k={"@type":"Article","@id":`https://www.geoapify.com/${c}/#article`,mainEntityOfPage:`https://www.geoapify.com/${c}/`,name:l,headline:r,inLanguage:"en-US",publisher:{"@id":"https://www.geoapify.com/#organization"},author:{"@id":"https://www.geoapify.com/#organization"},datePublished:i,dateModified:u};return d&&(k.image=d),m["@graph"].push(k),a.createElement(s.m,null,a.createElement("script",{type:"application/ld+json"},JSON.stringify(m)))}},3537:function(n,e){e.A=[{id:"javascript",label:"JavaScript"},{id:"angular",label:"Angular"},{id:"react",label:"React JS"},{id:"java",label:"Java"},{id:"c#",label:"C#"},{id:"r",label:"R language"},{id:"python",label:"Python"},{id:"nocode",label:"No code"}]},7339:function(n,e){e.A=[{id:"maps",label:"Maps"},{id:"geocoding",label:"Geocoding & Geolocation"},{id:"routing",label:"Routes & Optimization"},{id:"isoline",label:"Isochrones & isodistances"},{id:"places",label:"Places & Details"}]},9816:function(n,e,t){var a=t(6540);e.A=()=>{const{0:n,1:e}=(0,a.useState)(0),t=n=>{e(n)},s=n=>{let e;switch(n.code){case n.PERMISSION_DENIED:e="User denied the request for Geolocation.";break;case n.POSITION_UNAVAILABLE:e="Location information is unavailable.";break;case n.TIMEOUT:e="The request to get user location timed out.";break;case n.UNKNOWN_ERROR:default:e="An unknown error occurred."}t(`Error occured: ${e}`)},o=n=>{t(`Your geolocation: latitude: ${n.coords.latitude}, longitude: ${n.coords.longitude}`)};return a.createElement(a.Fragment,null,a.createElement("button",{onClick:()=>{const n={maximumAge:1e3,timeout:2e3,enableHighAccuracy:!0};navigator.geolocation?navigator.geolocation.getCurrentPosition(o,s,n):t("Geolocation is not supported by this browser.")},className:"border-solid border-2 border-indigo-300 rounded p-3 text-gray-800",type:"button"},"Try Geolocation API"),n?a.createElement("div",{className:"mt-2 text-indigo-700"},n):"")}}}]); 2//# sourceMappingURL=component---src-template-tutorial-post-js-content-file-path-src-tutorials-geocoding-javascript-index-mdx-fc06088661184b4bd590.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.