{"id":2851,"date":"2019-08-06T15:21:05","date_gmt":"2019-08-06T15:21:05","guid":{"rendered":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-stores-to-the-map\/"},"modified":"2021-11-30T21:12:46","modified_gmt":"2021-11-30T21:12:46","slug":"wordpress-plugins-and-tomtom-adding-stores-to-the-map","status":"publish","type":"post","link":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-stores-to-the-map\/","title":{"rendered":"WordPress Plugins and TomTom: Adding Stores to the Map"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2851\" class=\"elementor elementor-2851\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9fa0170 elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"9fa0170\" 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-25ca21e1\" data-id=\"25ca21e1\" 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-7fbe1b9 elementor-widget elementor-widget-text-editor\" data-id=\"7fbe1b9\" 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 the previous\u00a0<a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%C2%A0\">two articles in this series,<\/a>\u00a0we&#8217;ve been creating a WordPress Plugin that uses the TomTom Maps APIs to display a map of storefront locations on a business website.<\/p><p>We started creating a WordPress Plugin that makes adding the Maps API to any WordPress-based website quick and easy. So far, we&#8217;ve built the basic Plugin elements that allow the Plugin to appear in the WordPress administrator interface and the admin panel interface of the Plugin. At this point the map appears in the admin panel.<\/p><p>In this article we&#8217;ll:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">Set up the database to save store location data.<\/li><li style=\"font-size: 16px;\">Add an interface to enable administrators to create the list of store locations<\/li><li style=\"font-size: 16px;\">Convert store addresses to coordinates by using the Geocoding endpoint of the TomTom Search API.<\/li><li style=\"font-size: 16px;\">Add markers for store locations in the administrator map.<\/li><\/ul><h2>Creating a Store Database<\/h2><p>We have a map, but no data to display on it. For this example, we&#8217;ll save store location data in (and retrieve it from) a local SQL database. This is a common option for WordPress sites.<\/p><p>First, we need to set up the database table. The following command runs a\u00a0<code>ttlocator_install()<\/code>\u00a0function when a user activates the Plugin:<\/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-11e1dc3 elementor-widget elementor-widget-code-highlight\" data-id=\"11e1dc3\" 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>register_activation_hook(__FILE__, 'ttlocator_install');<\/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-171d168 elementor-widget elementor-widget-text-editor\" data-id=\"171d168\" 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\u00a0<code style=\"font-size: 16px;\">ttlocator_install()<\/code>\u00a0itself creates the database table, but only if one does not already exist:<\/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-eb1f243 elementor-widget elementor-widget-code-highlight\" data-id=\"eb1f243\" 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_install() { \r\n\r\n        global $wpdb; \r\n\r\n        $table_name = $wpdb->prefix . \"tomtom_locator_locations\"; \r\n\r\n        $charset_collate = $wpdb->get_charset_collate(); \r\n\r\n \r\n        $sql = \"CREATE TABLE $table_name ( \r\n\r\n          id mediumint(9) NOT NULL AUTO_INCREMENT, \r\n\r\n          name text, \r\n\r\n          address text, \r\n\r\n          city text, \r\n\r\n          state tinytext, \r\n\r\n          country text, \r\n\r\n          postcode tinytext, \r\n\r\n          latitude decimal(10,6), \r\n\r\n          longitude decimal(10,6), \r\n\r\n          PRIMARY KEY(id) \r\n\r\n        ) $charset_collate;\"; \r\n\r\n\r\n        require_once(ABSPATH . \"wp-admin\/includes\/upgrade.php\"); \r\n\r\n        dbDelta( $sql ); \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-ec36c7c elementor-widget elementor-widget-text-editor\" data-id=\"ec36c7c\" 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 table includes fields for data that the user will enter: the store name, address (including city, state, country and postcode). The database provides a store ID and a primary key.<\/p><p>The Maps API uses latitude and longitude coordinates to display points of interest on a map. We&#8217;ve included latitude and longitude fields in the database, but we won&#8217;t make the user find this data on their own. Instead, we&#8217;ll add a feature that uses the address and the TomTom Search API to find the latitude and longitude automatically.<\/p><h2>Adding Stores to the Map<\/h2><p>Earlier, you may have noticed a call to\u00a0<code>ttlocator_add_store_html().<\/code>\u00a0This function generates HTML that will be used to add new store locations:<\/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-695b1f0 elementor-widget elementor-widget-code-highlight\" data-id=\"695b1f0\" 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-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>  <div class=\"ttlocator-add-store-page\"> \r\n\r\n       <h2>Add Store<\/h2> \r\n\r\n       \r\n<p> \r\n\r\n           Start by adding a store name and address, then click &#39;Lookup&#39; to see the new store on the map. \r\n\r\n           A street address plus the city and state\/province is usually enough. \r\n\r\n       <\/p> \r\n\r\n       \r\n<p> \r\n\r\n           If you&#39;re happy with the address marker that pops up on the map, click &#39;Save&#39;. \r\n\r\n           If not, add more detail to the address and then click &#39;Lookup&#39; again to refine your search. \r\n\r\n       <\/p> \r\n\r\n       \r\n<div class=\"ttlocator-row\"> \r\n\r\n           <div class=\"ttlocator-field-label\"> \r\n\r\n               <label for=\"store-name\">Store Name<\/label> \r\n\r\n           <\/div> \r\n\r\n           \r\n<div class=\"ttlocator-text-field\"> \r\n\r\n               <input name=\"store-name\" style=\"width: 100%\" type=\"text\" \/> \r\n\r\n           <\/div> \r\n\r\n       <\/div> \r\n\r\n       \r\n<div class=\"ttlocator-row\"> \r\n\r\n           <div class=\"ttlocator-field-label\"> \r\n\r\n               <label for=\"store-address\">Store Address<\/label> \r\n\r\n           <\/div> \r\n\r\n           \r\n<div class=\"ttlocator-text-field\"> \r\n\r\n               <input name=\"store-address\" style=\"width: 100%\" type=\"text\" \/> \r\n\r\n           <\/div> \r\n\r\n           \r\n<div class=\"ttlocator-field-button\"> \r\n\r\n               <button class=\"button button-primary ttlocator-lookup-button\"> \r\n\r\n                   Lookup \r\n\r\n               <\/button> \r\n\r\n           <\/div> \r\n\r\n       <\/div> \r\n\r\n       \r\n<div class=\"ttlocator-row ttlocator-lookup-message-area\"> \r\n\r\n           <p id=\"ttlocator-store-lookup-messages\"> <\/p> \r\n\r\n       <\/div> \r\n\r\n       \r\n<div class=\"ttlocator-row\"> \r\n\r\n           <button class=\"button ttlocator-add-store-cancel\">Cancel<\/button> \r\n\r\n           \r\n<div class=\"ttlocator-add-store-save\"><button class=\"button button-primary\">Save<\/button><\/div> \r\n\r\n       <\/div> \r\n\r\n   <\/div><\/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-0c45354 elementor-widget elementor-widget-text-editor\" data-id=\"0c45354\" 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\u2019s nothing fancy here, it just generates HTML elements that we will interact with via\u00a0<a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a>. The user will enter a store name and address, and then click \u201cLookup\u201d to call the TomTom Search API to find information about the address.<\/p><p>If the address is found, it will be shown on the map. If the users like what they see, they\u2019ll be given an opportunity to add the store to their map database.<\/p><h2>Getting Coordinates with the Search API<\/h2><p>Let\u2019s focus on the Lookup button\u2019s click handler, because that\u2019s where the magic happens:<\/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-b8b3aca elementor-widget elementor-widget-code-highlight\" data-id=\"b8b3aca\" 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-lookup-button').click(function() { \r\n\r\n   var query = jQuery(\"input[name='store-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-bccfca0 elementor-widget elementor-widget-text-editor\" data-id=\"bccfca0\" 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 start by getting the value of the\u00a0<code>store-address<\/code>\u00a0input. We\u2019re going to use the address entered here as the query we send to the TomTom Fuzzy Search API. The Fuzzy Search API is able to find addresses even if your user is imprecise about the data they enter. For example, entering \u201c1 Yonge St, Toronto\u201d as a fuzzy search query will result in the correct address being found, even though you didn\u2019t provide a province, country, or post code. As you can see in the call above, we use the TomTom Fuzzy Search API to create the search, pass it our TomTom API key, give it our query, tell it to begin the search, and pass it a callback that will be called then they query is complete.<\/p><p>The\u00a0<code>locateCallback()<\/code>\u00a0function is quite large, so let\u2019s quickly walk through it:<\/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-ca8319b elementor-widget elementor-widget-code-highlight\" data-id=\"ca8319b\" 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   jQuery('#ttlocator-store-lookup-messages').text(''); \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       jQuery('.ttlocator-add-store-save').show(); \r\n\r\n       var topResult = filteredResult[0]; \r\n\r\n       var address = topResult.address; \r\n\r\n       var newStoreName = jQuery('input[name=\"store-name\"]').val(); \r\n\r\n       \/\/ save new store address info so we can add it to database \r\n\r\n       \/\/ after user confirms it is correct. \r\n\r\n       newStoreAddress = { \r\n\r\n           streetAddress: address.streetNumber + \" \" + address.streetName, \r\n\r\n           city: address.municipality.split(\",\")[0], \r\n\r\n           state: address.countrySubdivision, \r\n\r\n           postCode: address.extendedPostalCode || address.postalCode, \r\n\r\n           country: address.country, \r\n\r\n           lat: topResult.position.lat, \r\n\r\n           lon: topResult.position.lon \r\n\r\n       }; \r\n\r\n \r\n\r\n       var location = [topResult.position.lat, topResult.position.lon]; \r\n\r\n       map.setView(location, 15); \r\n\r\n       var marker = tomtom.L.marker(location).addTo(map); \r\n\r\n       marker.bindPopup(\"\" + newStoreName + \"\r\n\" + address.freeformAddress) \r\n\r\n           .openPopup(); \r\n\r\n       newMarker = marker; \r\n\r\n   } else { \r\n\r\n       jQuery('#ttlocator-store-lookup-messages').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-67e649b elementor-widget elementor-widget-text-editor\" data-id=\"67e649b\" 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 start by filtering the results returned by the TomTom Fuzzy Search API to remove all results other than those with type \u201cPoint Address\u201d \u2014 with Fuzzy Search there will sometimes be multiple search results for a given address. One of them, with type \u201cPoint Address\u201d, will contain highly accurate information about the address itself. Other results may be about businesses or other POIs (Points of Interest) that reside at the address.<\/p><p>Since we only need the address information, we filter the results to remove everything else. If we find an address, we open a popup on the map so the user can ensure that the new location appears in the correct place.<\/p><p>If we don\u2019t find an address, we inform the user so they can try a different address or add more information about the address they entered.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48233558006_ea6af6bc75.jpg\" alt=\"WordPressV3-1\" \/><\/p><h2>Saving a Store to the Database<\/h2><p>Since we\u2019ve made it possible for a user to look up a store location and save it, we need back-end code to add the store to the database.<\/p><p>We do this in the following function located in\u00a0<code>store-locator.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-8492456 elementor-widget elementor-widget-code-highlight\" data-id=\"8492456\" 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_add_location() { \r\n\r\n   if (!is_admin()) wp_die(); \r\n\r\n   global $wpdb; \r\n\r\n   $table_name = $wpdb->prefix . \"tomtom_locator_locations\"; \r\n\r\n \r\n\r\n   $name = wp_strip_all_tags($_POST[\"name\"]); \r\n\r\n   $address = wp_strip_all_tags($_POST[\"address\"]); \r\n\r\n   $city = wp_strip_all_tags($_POST[\"city\"]); \r\n\r\n   $state = wp_strip_all_tags($_POST[\"state\"]); \r\n\r\n   $country = wp_strip_all_tags($_POST[\"country\"]); \r\n\r\n   $postcode = wp_strip_all_tags($_POST[\"postcode\"]); \r\n\r\n   $latitude = wp_strip_all_tags($_POST[\"latitude\"]); \r\n\r\n   $longitude = wp_strip_all_tags($_POST[\"longitude\"]); \r\n\r\n \r\n\r\n   $success = $wpdb->query($wpdb->prepare(\" \r\n\r\n       INSERT INTO $table_name ( \r\n\r\n         name, \r\n\r\n         address, \r\n\r\n         city, \r\n\r\n         state, \r\n\r\n         country, \r\n\r\n         postcode, \r\n\r\n         latitude, \r\n\r\n         longitude \r\n\r\n       ) \r\n\r\n       VALUES (%s, %s, %s, %s, %s, %s, %f, %f); \r\n\r\n   \", array($name, $address, $city, $state, $country, $postcode, $latitude, $longitude))); \r\n\r\n \r\n\r\n   if(!$success) { \r\n\r\n       status_header(500); \r\n\r\n   } \r\n\r\n \r\n\r\n   wp_die(); \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-d7a7550 elementor-widget elementor-widget-text-editor\" data-id=\"d7a7550\" 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 function is registered to receive AJAX requests. This will let us submit new stores via JavaScript instead of needing to do a form post. Although there\u2019s nothing wrong with doing it the old-fashioned way, receiving store additions via AJAX gives us more flexibility in the way we\u2019ll build our UI.<\/p><p>We start by verifying that the user is an admin and exit immediately if they\u2019re not. Next, we do a little bit of database setup.<\/p><p>Then, we read all of the data that was submitted in the body of the POST request. We use\u00a0<code>wp_strip_all_tags<\/code>\u00a0on every piece of data we read to prevent XSS attacks.<\/p><p>Then, we use a prepared statement to insert the new store location in the database. Finally, if store creation failed, we set an error status code to let the caller know that database insertion failed.<\/p><h2>Rendering Store Markers on the Map<\/h2><p>Now that we\u2019ve created our admin page, added a map to it, and are able to save stores in the database, displaying stores on the map is easy. All we\u2019ll need to do is add a marker to the map for each store. Recall that we\u2019ve already made all of our store locations available to\u00a0<a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a>\u00a0by storing them in the\u00a0<code>storeLocations variable.<\/code><\/p><p>Starting on line 20 of locator.js, you\u2019ll see 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-899548a elementor-widget elementor-widget-code-highlight\" data-id=\"899548a\" 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-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>if(storeLocations.length > 0) { \r\n\r\n   storeLocations.forEach(store => addStoreMarkerToMap(store)); \r\n\r\n   var markerGroup = new tomtom.L.featureGroup(markers); \r\n\r\n   fitMapToMarkerGroup(markerGroup); \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-c754be9 elementor-widget elementor-widget-text-editor\" data-id=\"c754be9\" 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>You\u2019ll notice that it calls a couple of helper functions:\u00a0<code style=\"font-size: 16px;\">addStoreMarkerToMap()<\/code>\u00a0and\u00a0<code style=\"font-size: 16px;\">fitMapToMarkerGroup()<\/code>. I\u2019ll include the code for those below, and then we\u2019ll walk through all of our map marker 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-5702e64 elementor-widget elementor-widget-code-highlight\" data-id=\"5702e64\" 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-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\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   marker.bindPopup(\"\" + store.name + \"\r\n\" + store.address); \r\n\r\n   markers.push(marker); \r\n\r\n} \r\n\r\n \r\n\r\nfunction fitMapToMarkerGroup(markerGroup) { \r\n\r\n   map.fitBounds(markerGroup.getBounds().pad(0.2)); \r\n\r\n   if (map.getZoom() > MAX_ZOOM_ON_LOAD) { \r\n\r\n       map.setZoom(MAX_ZOOM_ON_LOAD); \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-4a77fcd elementor-widget elementor-widget-text-editor\" data-id=\"4a77fcd\" 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>Starting at the beginning of our store addition code, we see that we\u2019re calling\u00a0<code>addStoreMarkerToMap()<\/code>\u00a0on each store in\u00a0<code>storeLocations.<\/code><\/p><p>Looking in\u00a0<code>addStoreMarkerToMap()<\/code>, we see that it only takes us three lines of code to add a marker to our map. We start by creating an array containing our store\u2019s latitude and longitude. This is the coordinate format Leaflet is expecting when you ask it to create a map marker.<\/p><p>Next, we create the marker and add it to the map with the following call:<\/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-123fb39 elementor-widget elementor-widget-code-highlight\" data-id=\"123fb39\" 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-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>var marker = tomtom.L.marker(location).addTo(map); <\/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-5c712b1 elementor-widget elementor-widget-text-editor\" data-id=\"5c712b1\" 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>Then we bind a popup to the marker. The popup is the bubble that map users will see when they click on one of the markers representing a store location. We add the popup by making a call to\u00a0<code>bindPopup()<\/code>on the marker we just created. The only parameter we pass to this function is a string containing the HTML that should appear inside the marker.<\/p><p>Finally, we add the marker to the markers array so it will be available to any other functions that need to work with the markers on our map.<\/p><p>Jumping back to our initial map setup code, we see the following:<\/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-4592993 elementor-widget elementor-widget-code-highlight\" data-id=\"4592993\" 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-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>var markerGroup = new tomtom.L.featureGroup(markers); \r\n\r\nfitMapToMarkerGroup(markerGroup);<\/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-b819984 elementor-widget elementor-widget-text-editor\" data-id=\"b819984\" 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\u2019re starting by creating a Leaflet FeatureGroup. This groups our markers together, which makes it easier for us to perform operations on the map based on the collective characteristics of all our map\u2019s markers.<\/p><p>Finally, we call\u00a0<code>fitMapToMarkerGroup()<\/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-f32de8b elementor-widget elementor-widget-code-highlight\" data-id=\"f32de8b\" 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-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>map.fitBounds(markerGroup.getBounds().pad(0.2));<\/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-631a4ff3 elementor-widget elementor-widget-text-editor\" data-id=\"631a4ff3\" 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;\">As you can see, we make a call to the map\u2019s <\/span><code style=\"color: var( --e-global-color-text ); font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">fitBounds<\/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;\"> method to politely ask it to fit itself to the marker group\u2019s boundaries. We also add a bit of padding to ensure that none of the markers get cut off by the edge of the map.<\/span><br><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48233634037_bc349454d3.jpg\" alt=\"WordPressV3-2\"><\/p>\n<h2>Next Steps<\/h2>\n<p>In this article we created the Plugin features that enable a site administrator to configure the stores map for a website, adding stores to the database and displaying them on the map.<\/p>\n<p>There are alternatives to using a database for your store data that include hardcoding the store data into your Plugin code or saving the data in a separate file. We won&#8217;t cover those options in this series of articles. Note, however, that no matter which way you choose to store the data, you&#8217;ll need to provide both the address information and the latitude and longitude coordinates.<\/p>\n<p>In the next article we&#8217;ll use the same tools to build a user-facing map widget that we can insert into a public web page. This widget will use the same Maps SDK for Web resources and will draw its data from the store database configured through the admin panel.<\/p>\n<p><em>This article was first posted on <a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map\">TomTom&#8217;s Blog<\/a><\/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>In this article we create the Plugin features that enable a site administrator to configure the stores map for a website, adding stores to the database and displaying them on the map.\u00a0\u00a0<\/p>\n","protected":false},"author":3,"featured_media":5349,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[270,325,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: Adding Stores to the 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-adding-stores-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: Adding Stores to the Map &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"In this article we create the Plugin features that enable a site administrator to configure the stores map for a website, adding stores to the database and displaying them on the map.\u00a0\u00a0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-06T15:21:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-30T21:12:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/7.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=\"10 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-stores-map#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-stores-to-the-map\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"WordPress Plugins and TomTom: Adding Stores to the Map\",\"datePublished\":\"2019-08-06T15:21:05+00:00\",\"dateModified\":\"2021-11-30T21:12:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-stores-to-the-map\/\"},\"wordCount\":1430,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/7.png\",\"keywords\":[\"Mapping\",\"SQL\",\"WordPress\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-stores-to-the-map\/\",\"url\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map\",\"name\":\"WordPress Plugins and TomTom: Adding Stores to the 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-adding-stores-map#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/7.png\",\"datePublished\":\"2019-08-06T15:21:05+00:00\",\"dateModified\":\"2021-11-30T21:12:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/7.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/7.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Plugins and TomTom: Adding Stores to the 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: Adding Stores to the 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-adding-stores-map","og_locale":"en_US","og_type":"article","og_title":"WordPress Plugins and TomTom: Adding Stores to the Map &#183; Technical Content Marketing | ContentLab","og_description":"In this article we create the Plugin features that enable a site administrator to configure the stores map for a website, adding stores to the database and displaying them on the map.\u00a0\u00a0","og_url":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2019-08-06T15:21:05+00:00","article_modified_time":"2021-11-30T21:12:46+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/7.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":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map#article","isPartOf":{"@id":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-stores-to-the-map\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"WordPress Plugins and TomTom: Adding Stores to the Map","datePublished":"2019-08-06T15:21:05+00:00","dateModified":"2021-11-30T21:12:46+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-stores-to-the-map\/"},"wordCount":1430,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/7.png","keywords":["Mapping","SQL","WordPress"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-adding-stores-to-the-map\/","url":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map","name":"WordPress Plugins and TomTom: Adding Stores to the 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-adding-stores-map#primaryimage"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/7.png","datePublished":"2019-08-06T15:21:05+00:00","dateModified":"2021-11-30T21:12:46+00:00","breadcrumb":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/7.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/7.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-adding-stores-map#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"WordPress Plugins and TomTom: Adding Stores to the 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\/2019\/08\/7.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2851"}],"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=2851"}],"version-history":[{"count":8,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2851\/revisions"}],"predecessor-version":[{"id":6163,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2851\/revisions\/6163"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/5349"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2851"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}