{"id":2907,"date":"2019-08-27T15:26:52","date_gmt":"2019-08-27T15:26:52","guid":{"rendered":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding\/"},"modified":"2021-11-29T21:25:18","modified_gmt":"2021-11-29T21:25:18","slug":"wordpress-plugins-and-tomtom-adding-routing-and-geocoding","status":"publish","type":"post","link":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding\/","title":{"rendered":"WordPress Plugins and TomTom: Adding Routing and Geocoding"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2907\" class=\"elementor elementor-2907\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ce7ebae elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"ce7ebae\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4bedf957\" data-id=\"4bedf957\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-63ab287 elementor-widget elementor-widget-text-editor\" data-id=\"63ab287\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 30-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>We\u2019ve come a long way. Starting from scratch, we\u2019ve built a store locator\u00a0<a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map\">WordPress Plugin<\/a>\u00a0that creates a database table and allows admins to use a TomTom map to add store locations to the database. Beyond that, we&#8217;ve added a WordPress shortcode that allows us to easily display a map and list of store locations to a WordPress site&#8217;s users.<\/p><p>It&#8217;s now time to add the final touch to our plugin: intelligent routing that helps a site user generate driving directions to guide them from their present location to their chosen store location. Moreover, these won&#8217;t be plain, boring driving directions; instead, they&#8217;ll be smart directions based on current traffic conditions.<\/p><h2>Adding The Routing API<\/h2><p>First, we&#8217;ll need to add\u00a0<a href=\"https:\/\/developer.tomtom.com\/products\/routing-api\">routing API<\/a>\u00a0access to our app. When we created our TomTom API application, we only asked for access to the Maps and Search APIs. Since we&#8217;ll need to use an API we don&#8217;t yet have access too, we&#8217;ll have to modify our application. Fortunately, this is easy to do.<\/p><p>Start by<a href=\"https:\/\/developer.tomtom.com\/user\/login\">\u00a0signing in to your TomTom Developer account.<\/a>\u00a0After signing in, you&#8217;ll end up on your account dashboard:<\/p><p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-5068\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/48382099701_e627d94eb1_o.png\" alt=\"\" width=\"974\" height=\"452\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/48382099701_e627d94eb1_o.png 974w, https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/48382099701_e627d94eb1_o-300x139.png 300w, https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/48382099701_e627d94eb1_o-768x356.png 768w\" sizes=\"(max-width: 974px) 100vw, 974px\" \/><\/p><p>Click on the application you created in the first article of this series. When you do, a new UI panel appears showing your application&#8217;s details. You&#8217;ll see an option that says \u2018Edit &#8220;Application Name&#8221;\u2019. Click it, and you end up on a screen that looks like this:<\/p><p><img decoding=\"async\" class=\"alignnone size-full wp-image-5069\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/48382241967_1f32bda619_o.png\" alt=\"\" width=\"974\" height=\"356\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/48382241967_1f32bda619_o.png 974w, https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/48382241967_1f32bda619_o-300x110.png 300w, https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/48382241967_1f32bda619_o-768x281.png 768w\" sizes=\"(max-width: 974px) 100vw, 974px\" \/><\/p><p>Click the Routing API checkbox, then click the &#8220;Save App&#8221; button. That&#8217;s it for the first step! Your application now has access to TomTom&#8217;s Routing API. You don\u2019t need a new API key, you just added new capabilities to the existing key you\u2019ve been using.<\/p><h2>Determining Start and End Points<\/h2><p>Now that setup is out of the way, let&#8217;s dive into the code that makes this work.<\/p><p>We&#8217;ll start by modifying the popup that appears when a user clicks a store location on the map. Notice that we have added a &#8220;Directions&#8221; link to the popup:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f83660 elementor-widget elementor-widget-text-editor\" data-id=\"9f83660\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>We&#8217;ve also added a click handler that hides the store list and displays a directions panel when the user clicks for directions:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a474b96 elementor-widget elementor-widget-code-highlight\" data-id=\"a474b96\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>function addStoreMarkerToMap(store) { \r\n\r\n   var location = [store.latitude, store.longitude]; \r\n\r\n   var marker = tomtom.L.marker(location).addTo(map); \r\n\r\n   var el = jQuery(\"<div><b>\" + store.name + \"<\/b><br \/>\" + store.address + \"<br \/><\/div>\"); \r\n\r\n   var dir = jQuery(\"<a href='#'>Driving Directions<\/a>\"); \r\n\r\n   dir.click(function(ev) { \r\n\r\n       directionsClickHandler(ev, store); \r\n\r\n   }); \r\n\r\n   el.append(dir); \r\n\r\n   marker.bindPopup(el[0]); \r\n\r\n   markers.push(marker); \r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91ca7a8 elementor-widget elementor-widget-code-highlight\" data-id=\"91ca7a8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>function directionsClickHandler(ev, store) { \r\n\r\n   ev.preventDefault(); \r\n\r\n   selectedStore = store; \r\n\r\n   var addressHtml = \"<div>\"+ store.name + \"<\/div>\" + \"<div>\"+ store.address + \"<\/div>\" + \"<div>\" + store.city + \"<\/div>\"; \r\n\r\n   jQuery(\".ttlocator-driving-directions-destination\").html(addressHtml); \r\n\r\n   jQuery(\".ttlocator-driving-directions-page\").show(); \r\n\r\n   jQuery(\".ttlocator-user-stores-list-page\").hide(); \r\n\r\n   jQuery(\".ttlocator-step-by-step-instructions\").empty(); \r\n\r\n   jQuery(\".ttlocator-user-address\").val(\"\"); \r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1fef05d elementor-widget elementor-widget-text-editor\" data-id=\"1fef05d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>As we see above, the code also does some other housekeeping such as setting up the HTML to display the address of the store we\u2019ll be creating directions to and clearing out any previous directions the user has looked up.<\/p><p>Next, let&#8217;s take a look at the directions panel. The HTML for this panel is generated in PHP, and can be found in\u00a0<code>store-locator-user.php<\/code>:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9279ed elementor-widget elementor-widget-code-highlight\" data-id=\"b9279ed\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>function ttlocator_user_driving_directions_html() { \r\n\r\n   ?> \r\n\r\n   <div class=\"ttlocator-driving-directions-page\"> \r\n\r\n       <div class=\"ttlocator-driving-directions-container\"> \r\n\r\n           <h4>Driving Directions<\/h4> \r\n\r\n           <h5>Driving From<\/h5> \r\n\r\n           <div> \r\n\r\n               <input type=\"radio\" name=\"ttlocator-user-driving-from\" value=\"current\" checked\/> Current Location \r\n\r\n           <\/div> \r\n\r\n           <div> \r\n\r\n               <input type=\"radio\" name=\"ttlocator-user-driving-from\" value=\"enter\"\/> \r\n\r\n               Address: <input type=\"text\" class=\"ttlocator-user-address\" name=\"ttlocation-user-address\" \/> \r\n\r\n           <\/div> \r\n\r\n           <h5>Destination<\/h5> \r\n\r\n           <div class=\"ttlocator-driving-directions-destination\"><\/div> \r\n\r\n           <div class=\"ttlocator-step-by-step-instructions\"><\/div> \r\n\r\n           <button class=\"ttlocator-user-get-directions ttlocator-user-button\">Get Directions<\/button> \r\n\r\n           <button class=\"ttlocator-user-back-to-stores ttlocator-user-button\">Back to Stores<\/button> \r\n\r\n       <\/div> \r\n\r\n   <\/div> \r\n\r\n   <?php \r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1862ea4 elementor-widget elementor-widget-text-editor\" data-id=\"1862ea4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>There&#8217;s nothing complicated here. We display the information about the store location and then ask where they\u2019ll be departing from. We provide a radio input that allows the user to choose whether to use their current location as the starting point or enter an address to use as a starting point. Finally, we have a button the user can click to look up directions.<\/p><p>Here&#8217;s the code that makes the button work:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d81ba4 elementor-widget elementor-widget-code-highlight\" data-id=\"6d81ba4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>jQuery(\".ttlocator-user-get-directions\").click(function(e) { \r\n\r\n  e.preventDefault(); \r\n\r\n   if(jQuery(\"input[name='ttlocator-user-driving-from']:checked\").val() == \"current\") { \r\n\r\n       navigator.geolocation.getCurrentPosition(currentPosition); \r\n\r\n   } else { \r\n\r\n       lookupPosition(); \r\n\r\n   } \r\n\r\n});<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7b35d9 elementor-widget elementor-widget-text-editor\" data-id=\"b7b35d9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Again, nothing too complicated. If the user wants to use their current position, we use the HTML5 Location API to ask the browser for the user&#8217;s location. When called, this API asks the user&#8217;s permission before giving our code access to the user&#8217;s location. We give it a callback, which receives the latitude and longitude from the geolocation API:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7abd26f elementor-widget elementor-widget-code-highlight\" data-id=\"7abd26f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>function currentPosition(position) { \r\n\r\n   var latitude = position.coords.latitude; \r\n\r\n   var longitude = position.coords.longitude; \r\n\r\n   showDirections(latitude,longitude); \r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f35c736 elementor-widget elementor-widget-text-editor\" data-id=\"f35c736\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The callback then calls\u00a0<code>showDirections<\/code>, which gets routing directions from the TomTom Web SDK and displays them. We\u2019ll circle back to\u00a0<code>showDirections<\/code>\u00a0in a moment. First, let\u2019s see what we have to do if a user wants to manually enter a starting address.<\/p><p>If the user doesn&#8217;t want to use geolocation, they can type the address in the text box we provided. In this case, we&#8217;ll have to use the Search API to look up the address, the same way we looked up addresses when adding stores in the admin panel:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13de42a elementor-widget elementor-widget-code-highlight\" data-id=\"13de42a\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>function lookupPosition() { \r\n\r\n   var query = jQuery(\".ttlocator-user-address\").val(); \r\n\r\n   tomtom.fuzzySearch() \r\n\r\n       .key(window.tomtomSdkKey) \r\n\r\n       .query(query) \r\n\r\n       .go() \r\n\r\n       .then(locateCallback) \r\n\r\n       .catch(function(error) { \r\n\r\n           console.log(error); \r\n\r\n       }); \r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ccc20bd elementor-widget elementor-widget-text-editor\" data-id=\"ccc20bd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>This is identical to the code we used to look up address coordinates in the admin side of our plugin. We call the TomTom Fuzzy Search API, give it our SDK key, pass it the user-entered address as the query string, and then pass it a callback named\u00a0<code style=\"font-size: 16px;\">locateCallback<\/code>. The callback is a simplified version of the one we used for the admin panel:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1cf64b elementor-widget elementor-widget-code-highlight\" data-id=\"b1cf64b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>function locateCallback(result) { \r\n\r\n   var filteredResult = result && result.filter(r => r.type === \"Point Address\") || []; \r\n\r\n   if(filteredResult.length > 0) { \r\n\r\n       var topResult = filteredResult[0]; \r\n\r\n       showDirections(topResult.position.lat, topResult.position.lon); \r\n\r\n   } else { \r\n\r\n       jQuery(\".ttlocator-step-by-step-instructions\").text(\"Address not found. Try changing the address or adding more information, such as country and zip\/postal code.\") \r\n\r\n   } \r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-daece17 elementor-widget elementor-widget-text-editor\" data-id=\"daece17\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>We filter the results to extract information about the address the user entered. If we found the address, we use its coordinates to call\u00a0<code>showDirections<\/code>. If we don\u2019t find the address, we show an error message and ask the user to provide more detailed address information.<\/p><h2>Routing Directions<\/h2><p>Once we have starting coordinates, we can use the Routing API to look up driving directions from the user&#8217;s location to their desired store location. Whether we get coordinates via geolocation or the TomTomSearch API, the magic happens in\u00a0<code>showDirections<\/code>:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-55b0ec6 elementor-widget elementor-widget-code-highlight\" data-id=\"55b0ec6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>function showDirections(destLat, destLon) { \r\n\r\n   tomtom.routing({instructionsType: 'text'}) \r\n\r\n       .locations(`${destLat},${destLon}:${selectedStore.latitude},${selectedStore.longitude}`) \r\n\r\n       .go() \r\n\r\n       .then(function(routeGeoJson){ \r\n\r\n          generateRouteHtml(routeGeoJson); \r\n\r\n          currentRoute = tomtom.L.geoJson(routeGeoJson, { \r\n\r\n              style: {color: '#00d7ff', opacity: 0.6, weight: 8} \r\n\r\n          }).addTo(map); \r\n\r\n          map.fitBounds(currentRoute.getBounds(), {padding: [5, 5]}); \r\n\r\n       }); \r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-09c3d01 elementor-widget elementor-widget-text-editor\" data-id=\"09c3d01\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Here, we call tomtom.routing to start our call to the Routing API. We pass it an options object containing a single property:\u00a0<code>instructionsType<\/code>. We do this to ensure we will receive a set of text driving directions we can display to the user.<\/p><p>We call the go method to start the API call, then provide a callback function that will be calling after a route has been generated. The callback receives a GeoJSON object and passes it to\u00a0<code>generateRouteHtml<\/code>. This function doesn\u2019t do anything out of the ordinary. It simply extracts the driving directions that the TomTom Routing API send and builds up HTML to display them:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5597e3 elementor-widget elementor-widget-code-highlight\" data-id=\"a5597e3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>function generateRouteHtml(routeGeoJson) { \r\n\r\n   var guidance = routeGeoJson.features[0].properties.guidance; \r\n\r\n   var resultsContainer = jQuery(\"<div><h5>Directions<\/h5><\/div>\"); \r\n\r\n   guidance.instructionGroups.forEach(function(instructionGroup) { \r\n\r\n       \/\/ Print name of the group \r\n\r\n       var groupEl = tomtom.L.DomUtil.create('p', 'tt-locator-user-directions-group'); \r\n\r\n       groupEl.innerHTML = instructionGroup.groupMessage; \r\n\r\n       resultsContainer.append(groupEl); \r\n\r\n       \/\/ Print steps of the group \r\n\r\n       var stepsEl = tomtom.L.DomUtil.create('p', 'ttlocator-user-directions-step'); \r\n\r\n       stepsEl.innerHTML = formatGroupSteps(guidance.instructions, instructionGroup); \r\n\r\n       resultsContainer.append(stepsEl); \r\n\r\n   }); \r\n\r\n   jQuery(\".ttlocator-step-by-step-instructions\").empty(); \r\n\r\n    jQuery(\".ttlocator-step-by-step-instructions\").append(resultsContainer) \r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ea79a6b elementor-widget elementor-widget-text-editor\" data-id=\"1ea79a6b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><\/p>\n<pre><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">After the call to <\/span><code style=\"color: var( --e-global-color-text ); font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">generateRouteHtml<\/code><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\"> completes, we add a route overlay to the map to display our route, and then fit the bounds of the map to center it on the route.<\/span><br><\/pre>\n<p>That\u2019s really all there is to it! With a bit of <a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a> and a couple of API calls, we\u2019ve successfully added trip routing to our plugin<\/p>\n<h2>Conclusion<\/h2>\n<p>That concludes our whirlwind tour of creating a store locator WordPress Plugin from scratch using the TomTom Developer APIs.<\/p>\n<p>We started with nothing, and with a relatively small amount of code, we&#8217;ve been able to put together a great, usable plugin. If you&#8217;ve downloaded the code and have been following along, you&#8217;ll be able to use it on your WordPress site right away.<\/p>\n<p>We hope this has been a useful introduction to using the TomTom API with WordPress. As you can imagine, a store locator is only one of the many plugins that are possible by combining <a href=\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\">TomTom<\/a> and WordPress. What great plugin are you going to create?<\/p>\n<p><em>This article was first published on <a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding\">TomTom&#8217;s blog<\/a>.<br><\/em><\/p>\n<p><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>We\u2019ve come a long way. Starting from scratch, we\u2019ve built a store locator\u00a0WordPress Plugin\u00a0that creates a database table and allows admins to use a TomTom map to add store locations to the database. Beyond that, we&#8217;ve added a WordPress shortcode that allows us to easily display a map and list of store locations to a [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":5343,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[272,270],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress Plugins and TomTom: Adding Routing and Geocoding &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Plugins and TomTom: Adding Routing and Geocoding &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"We\u2019ve come a long way. Starting from scratch, we\u2019ve built a store locator\u00a0WordPress Plugin\u00a0that creates a database table and allows admins to use a TomTom map to add store locations to the database. Beyond that, we&#8217;ve added a WordPress shortcode that allows us to easily display a map and list of store locations to a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-27T15:26:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-29T21:25:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"WordPress Plugins and TomTom: Adding Routing and Geocoding\",\"datePublished\":\"2019-08-27T15:26:52+00:00\",\"dateModified\":\"2021-11-29T21:25:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding\/\"},\"wordCount\":1101,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/4.png\",\"keywords\":[\"JavaScript\",\"Mapping\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding\/\",\"url\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding\",\"name\":\"WordPress Plugins and TomTom: Adding Routing and Geocoding &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/4.png\",\"datePublished\":\"2019-08-27T15:26:52+00:00\",\"dateModified\":\"2021-11-29T21:25:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/4.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/4.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Plugins and TomTom: Adding Routing and Geocoding\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress Plugins and TomTom: Adding Routing and Geocoding &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding","og_locale":"en_US","og_type":"article","og_title":"WordPress Plugins and TomTom: Adding Routing and Geocoding &#183; Technical Content Marketing | ContentLab","og_description":"We\u2019ve come a long way. Starting from scratch, we\u2019ve built a store locator\u00a0WordPress Plugin\u00a0that creates a database table and allows admins to use a TomTom map to add store locations to the database. Beyond that, we&#8217;ve added a WordPress shortcode that allows us to easily display a map and list of store locations to a [&hellip;]","og_url":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2019-08-27T15:26:52+00:00","article_modified_time":"2021-11-29T21:25:18+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/4.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#article","isPartOf":{"@id":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"WordPress Plugins and TomTom: Adding Routing and Geocoding","datePublished":"2019-08-27T15:26:52+00:00","dateModified":"2021-11-29T21:25:18+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding\/"},"wordCount":1101,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/4.png","keywords":["JavaScript","Mapping"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding\/","url":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding","name":"WordPress Plugins and TomTom: Adding Routing and Geocoding &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#primaryimage"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/4.png","datePublished":"2019-08-27T15:26:52+00:00","dateModified":"2021-11-29T21:25:18+00:00","breadcrumb":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/4.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/4.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-routing-and-geocoding#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"WordPress Plugins and TomTom: Adding Routing and Geocoding"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/4.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2907"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=2907"}],"version-history":[{"count":7,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2907\/revisions"}],"predecessor-version":[{"id":6088,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2907\/revisions\/6088"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/5343"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2907"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}