{"id":2854,"date":"2019-08-13T17:34:32","date_gmt":"2019-08-13T17:34:32","guid":{"rendered":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-user-facing-map\/"},"modified":"2021-11-30T20:49:18","modified_gmt":"2021-11-30T20:49:18","slug":"wordpress-plugins-and-tomtom-the-user-facing-map","status":"publish","type":"post","link":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-user-facing-map\/","title":{"rendered":"WordPress Plugins and TomTom: The User-Facing Map"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2854\" class=\"elementor elementor-2854\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-13740484 elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"13740484\" 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-539a8019\" data-id=\"539a8019\" 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-01e50e2 elementor-widget elementor-widget-text-editor\" data-id=\"01e50e2\" 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 - 25-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>In this series of articles, we&#8217;re using the TomTom Maps API and Search API to display a map of storefront locations on a business website through an easy to configure WordPress Plugin.<\/p><p>In the previous article we finished building the WordPress admin panel interface of the Plugin. At this point the map appears in the admin panel, we can add store locations to a database of stores, we can fetch the location coordinates of the stores by using the Search API, and we can display the store locations on the admin panel map.<\/p><p>In this article we&#8217;ll:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">Develop the public side of the WordPress Plugin: the map that appears on the website itself.<\/li><li style=\"font-size: 16px;\">Create a WordPress shortcode that lets site administrators embed the Plugin&#8217;s map into any web page.<\/li><li style=\"font-size: 16px;\">Demonstrate using the shortcode, along with some HTML and JavaScript, to embed a map on a page with both the classic WordPress editor and the new Gutenberg editor.<\/li><\/ul><h2>WordPress Shortcodes<\/h2><p>As a security measure, WordPress limits the kinds of HTML and scripting automation that authors are allowed to directly code into a web page. Instead, WordPress provides shortcodes, which operate like macros, allowing you to add files, media, or script-generated content to a page via a simple tag.<\/p><p>WordPress.com offers a variety of\u00a0<a href=\"https:\/\/en.support.wordpress.com\/shortcodes\/\">preconfigured shortcodes.<\/a>\u00a0For example, the<\/p><p>shortcode lets you display an audio file player into a page by simply embedding the shortcode text and specifying the file to play.<\/p><p>In addition to these pre-configured shortcodes, the WordPress\u00a0<a href=\"https:\/\/codex.wordpress.org\/Shortcode_API\">Shortcode API<\/a>\u00a0gives you the ability to create entirely custom shortcodes. We&#8217;re going to use the Shortcode API to create a custom [tomtom-store-locator] shortcode that allows you to embed a map and stores list onto any web page. When the TomTom Stores Map Creator Plugin is activated for the WordPress site, the [tomtom-store-locator] shortcode will display the map and any store locations configured through the admin panel.<\/p><h2>Creating a custom map shortcode<\/h2><p>In the plugin directory, you can find all of the PHP for creating our end-user-facing shortcode in store-locator-user.php.<\/p><p>At the bottom of the file, you\u2019ll see a call to\u00a0<code>WordPress\u2019 add_shortcode()<\/code>\u00a0function:<\/p><p><code>add_shortcode('tomtom-store-locator', 'ttlocator_user_map');<\/code><\/p><p>This defines a shortcode named \u201ctomtom_store_locator\u201d. The second parameter \u2014\u00a0<code>ttlocator-user-map<\/code>\u00a0\u2014 is the name of the function that will be called when WordPress sees our new shortcode referenced in a page or post.<\/p><p>As we can see, our shortcode calls the\u00a0<code>ttlocator_user_map()<\/code>function. Taking a look at that function shows the following 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-002b4a6 elementor-widget elementor-widget-code-highlight\" data-id=\"002b4a6\" 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_map() {\r\n  $plugin_directory = plugin_dir_url(__FILE__);\r\n  $stylesheet = $plugin_directory . \"styles\/styles.css\";\r\n  $locator_js = $plugin_directory . \"scripts\/locator-user.js\";\r\n  $tomtom_sdk_dir = $plugin_directory . \"tomtom-sdk\/\";\r\n  $map_stylesheet = $tomtom_sdk_dir . \"map.css\";\r\n  $tomtom_js = $tomtom_sdk_dir . \"tomtom.min.js\";\r\n  $locations = ttlocator_get_locations();\r\n\r\n  wp_enqueue_script(\"jquery\");\r\n  wp_enqueue_style(\"ttlocator-styles\", $stylesheet);\r\n  wp_enqueue_style(\"ttlocator-tomtom-map-styles\", $map_stylesheet);\r\n  wp_enqueue_script(\"ttlocator-tomtom-sdk\", $tomtom_js);\r\n  wp_enqueue_script(\"ttlocator-locator-page-user-script\",\r\n    $locator_js, array(\"jquery\"), false, true);\r\n  ?>\r\n  <div style=\"width: 100%; text-align:left\">\r\n  <div id=\"map\" style=\"width: 100%; height:500px\"><\/div>\r\n  <script>\r\n    var tomtomSdkKey = '<?php echo esc_attr(get_option(\"tomtom_locator_api_key\")); ?>';\r\n    var tomtomSdkPath = '<?php echo $tomtom_sdk_dir; ?>';\r\n    var storeLocations = <?php echo json_encode($locations); ?>;\r\n  <\/script>\r\n  <h4>Store Locations<\/h4>\r\n  <?php\r\n  ttlocator_user_store_table_html($locations);\r\n  ?>\r\n  <\/div>\r\n<?php\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-72c6c9b elementor-widget elementor-widget-text-editor\" data-id=\"72c6c9b\" 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 probably looks familiar because it is very similar to the code we used to generate the map and store locations on the admin page. The user-facing map page doesn\u2019t need to be as complex, though, so there are a couple of changes:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">Our page doesn\u2019t have a title, because it is going to be added to a WordPress page that already has a title of its own.<\/li><li style=\"font-size: 16px;\">We\u2019re including locator-user.js instead of locator.js. Since our user-facing map won\u2019t need most of the JavaScript the admin page needed, including it all would be inefficient. The JavaScript code we use to add the store markers to our map is identical to the code we used on the admin side of our plugin.<\/li><li style=\"font-size: 16px;\">Instead of calling functions to generate the store list table and a page to add new stores, we only make a single call to\u00a0<code>ttlocator_user_store_table_html()<\/code>.<br \/><br \/><\/li><\/ul><p>Let\u2019s take a look at what the code for\u00a0<code>ttlocator_user_store_table_html()<\/code>\u00a0does:<\/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-5353982 elementor-widget elementor-widget-code-highlight\" data-id=\"5353982\" 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_store_table_html($locations) {\r\n  ?>\r\n  <table id=\"ttlocator-stores-user-table\">\r\n    <thead>\r\n    <tr>\r\n      <th>Name<\/th>\r\n      <th>Address<\/th>\r\n      <th>City<\/th>\r\n      <th>State\/Province<\/th>\r\n      <th>Post\/Zip Code<\/th>\r\n    <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n    <?php foreach($locations as $location): ?>\r\n      <tr>\r\n        <td><?php echo esc_attr($location->name); ?><\/td>\r\n        <td><?php echo esc_attr($location->address); ?><\/td>\r\n        <td><?php echo esc_attr($location->city); ?><\/td>\r\n        <td><?php echo esc_attr($location->state); ?><\/td>\r\n        <td><?php echo esc_attr($location->postcode); ?><\/td>\r\n      <\/tr>\r\n    <?php endforeach; ?>\r\n    <\/tbody>\r\n  <\/table>\r\n  <?php\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-36cd964e elementor-widget elementor-widget-text-editor\" data-id=\"36cd964e\" 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 lang=\"php\"><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;\">Again, this is very similar to the code we used to generate the list of stores on our admin page. The function receives a list of store locations as its only parameter and generates an HTML table to display them.<\/span><br><\/pre>\n<p>Notice that we removed all of the CSS classes that were included on the store table on our admin page. We did this because all of those classes we used on the admin page are part of the WordPress admin styles and are only available on admin pages. Including them here would have no effect.<\/p>\n<p>We do give the table an ID, however. This will make it easy for users of the plugin to add custom CSS to ensure they can style the store list table any way they\u2019d like to. Aside from setting a default text size, we avoid applying any styling of our own to the table. WordPress themes typically apply their own custom styles to tables, so we want to make sure our table is able to adapt to whatever styles might be applied to it.<\/p>\n<p>With so much code in common between the admin-facing and user-facing maps, you might be wondering why we don\u2019t factor the common code out into functions to avoid duplication. The answer is that it was a judgment call based on past Plugin development experience.<\/p>\n<p>While it\u2019s common for the admin and user-facing sides to have much in common initially, as the Plugin grows and is customized, the two sides of the Plugin start to diverge. As a result, effort spent factoring out common code early on is often wasted. To prevent this, we\u2019ve kept the markup generation completely separate between our admin and user pages.<\/p>\n<h2>Using a map shortcode<\/h2>\n<p>Now that we\u2019ve created a shortcode, how do we actually use it?<\/p>\n<p>The answer depends on whether you\u2019re using the classic WordPress editor or the new Gutenberg editor. Fortunately, it\u2019s easy either way.<\/p>\n<p>If you\u2019re using the old editor, just place the [tomtom-store-locator] tag in the text of your page:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48368247802_5ddccbab83_o.png\" alt=\"WordPress1-Img\"><\/p>\n<p>And if you\u2019re using the Gutenberg editor, place the tag inside a paragraph block:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48368274852_53ba5a83c0_o.png\" alt=\"WordPress3\"><\/p>\n<p>The end result will be a page that looks like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48368247667_50c23363bc_o.png\" alt=\"WordPress2-Img\"><\/p>\n<p>The exact appearance of your page will depend on which WordPress theme you are using.<\/p>\n<h2>Next Steps<\/h2>\n<p>We\u2019ve come a long way! Our Plugin now allows us to add stores to a TomTom map and display those locations to users of our WordPress site.<\/p>\n<p>In the final article of this series, we\u2019ll look at how to improve our store locator with some advanced TomTom API features.<\/p>\n<p>First, we\u2019ll learn we can use geolocation to center the map on the user\u2019s location so they can see which stores are near them. We will then use the TomTom Routing API to generate driving directions from the user\u2019s current location to their chosen store location. To finish up our Plugin, we will use the TomTom Traffic API to determine when the user should leave if they want to arrive at the store by a given time.<\/p>\n<p><em>This article was published for the first time on <a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map\">TomTom&#8217;s blog<\/a>.<br><\/em><\/p>\n<p><em><span lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span>If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span> today.<\/span><\/span><\/em><\/p>\n<p><em>&nbsp;<\/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>This article outlines how to get our Plugin to add stores to a TomTom map and display those locations to users of our WordPress site.<\/p>\n","protected":false},"author":3,"featured_media":5259,"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,309],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wordpress Plugins and TomTom: The User-Facing Map &#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-user-facing-map\" \/>\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: The User-Facing Map &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"This article outlines how to get our Plugin to add stores to a TomTom map and display those locations to users of our WordPress site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-13T17:34:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-30T20:49:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/20.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=\"7 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-user-facing-map#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-user-facing-map\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"WordPress Plugins and TomTom: The User-Facing Map\",\"datePublished\":\"2019-08-13T17:34:32+00:00\",\"dateModified\":\"2021-11-30T20:49:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-user-facing-map\/\"},\"wordCount\":1089,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/20.png\",\"keywords\":[\"JavaScript\",\"Mapping\",\"WordPress\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-user-facing-map\/\",\"url\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map\",\"name\":\"Wordpress Plugins and TomTom: The User-Facing Map &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/20.png\",\"datePublished\":\"2019-08-13T17:34:32+00:00\",\"dateModified\":\"2021-11-30T20:49:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/20.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/20.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Plugins and TomTom: The User-Facing Map\"}]},{\"@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: The User-Facing Map &#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-user-facing-map","og_locale":"en_US","og_type":"article","og_title":"Wordpress Plugins and TomTom: The User-Facing Map &#183; Technical Content Marketing | ContentLab","og_description":"This article outlines how to get our Plugin to add stores to a TomTom map and display those locations to users of our WordPress site.","og_url":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2019-08-13T17:34:32+00:00","article_modified_time":"2021-11-30T20:49:18+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/20.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":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map#article","isPartOf":{"@id":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-user-facing-map\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"WordPress Plugins and TomTom: The User-Facing Map","datePublished":"2019-08-13T17:34:32+00:00","dateModified":"2021-11-30T20:49:18+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-user-facing-map\/"},"wordCount":1089,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/20.png","keywords":["JavaScript","Mapping","WordPress"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-user-facing-map\/","url":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map","name":"Wordpress Plugins and TomTom: The User-Facing Map &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map#primaryimage"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/20.png","datePublished":"2019-08-13T17:34:32+00:00","dateModified":"2021-11-30T20:49:18+00:00","breadcrumb":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/20.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/20.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-user-facing-map#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"WordPress Plugins and TomTom: The User-Facing Map"}]},{"@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\/2018\/11\/20.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2854"}],"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=2854"}],"version-history":[{"count":7,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2854\/revisions"}],"predecessor-version":[{"id":6159,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2854\/revisions\/6159"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/5259"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2854"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}