{"id":3987,"date":"2016-07-22T11:25:20","date_gmt":"2016-07-22T11:25:20","guid":{"rendered":"http:\/\/www.pmpazure.co.uk\/blog\/?p=3987"},"modified":"2016-07-22T11:25:21","modified_gmt":"2016-07-22T11:25:21","slug":"how-to-add-an-interactive-travel-map-to-your-website","status":"publish","type":"post","link":"https:\/\/www.promotemyplace.com\/blog\/how-to-add-an-interactive-travel-map-to-your-website","title":{"rendered":"How to Add an Interactive Travel Map to Your Website"},"content":{"rendered":"<p>The main purpose of your holiday rental website is to inform potential guests and encourage them to make a booking.<\/p>\n<p>In order to do that, you need to make it as informative, engaging and enticing as possible.<\/p>\n<p>But how do you go about doing that?<\/p>\n<p>One visual way, which has the benefit of being informative, engaging <em>and<\/em> enticing, is to embed an interactive travel map on your website.<\/p>\n<p>This allows you to display your property\u2019s location against nearby attractions, the best restaurants and bars, and anything else you think is relevant to your potential guests. <em>And<\/em> photos can even be added for greater engagement.<\/p>\n<p>With the places to see already plotted, directions are just a click away. Making it even easier for your potential guests to get an idea of where the property is in relation to everything else.<\/p>\n<p><strong>So here\u2019s how you can add an interactive travel map to your holiday let website \u2026<\/strong><\/p>\n<p>1. Make sure you\u2019re logged into your Google account. If you don\u2019t have an account, you can create one <a href=\"https:\/\/accounts.google.com\/signup\">here<\/a>.<\/p>\n<p>2. Once logged in, go to <a href=\"https:\/\/www.google.com\/maps\/d\/u\/0\/\">Google My Maps<\/a>.<\/p>\n<p>3. Click the <strong>CREATE A NEW MAP<\/strong> button to get started<\/p>\n<p>4. Enter a map title and description along with adding the location to the search field:<\/p>\n<p><a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/1-4\" rel=\"attachment wp-att-4024\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4024\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/1-1-e1469185232515.png\" alt=\"1\" width=\"600\" height=\"270\" \/><\/a><\/p>\n<p>5. Now you\u2019re ready to start pinpointing attractions.<\/p>\n<p><strong>NB:<\/strong> There may be a tendancy to want to go overboard, particularly if your holiday rental is in a location with an abundance of things to do.<\/p>\n<p>But remember, this is your \u2018sales\u2019 site.<\/p>\n<p>So only include information that will <em>entice<\/em> those visitors to make an enquiry. Don\u2019t overwhelm them.<\/p>\n<p>Think of the top <em>attractions<\/em> for your primary audience.<\/p>\n<p>For example, if you\u2019re targeting families, include the best options for kids, and kid-friendly restaurants.<\/p>\n<p>6. Start by typing the name of the first attraction into the search field provided. Once you start typing, suggestions will appear.<\/p>\n<p>Select yours from the list, or continue typing until it is the only result.<\/p>\n<p><a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/2-2\" rel=\"attachment wp-att-4030\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4030\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/2.png\" alt=\"2\" width=\"568\" height=\"246\" srcset=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/2.png 568w, https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/2-300x130.png 300w\" sizes=\"(max-width: 568px) 100vw, 568px\" \/><\/a><\/p>\n<p>Then click <strong>Add to map<\/strong> for it to be added to your map.<\/p>\n<p><a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/3-2\" rel=\"attachment wp-att-4031\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4031\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/3.png\" alt=\"3\" width=\"566\" height=\"252\" srcset=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/3.png 566w, https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/3-300x134.png 300w\" sizes=\"(max-width: 566px) 100vw, 566px\" \/><\/a><\/p>\n<p>7. Repeat this process for all the attractions, restaurants, local amenities, etc. you want your map to display.<\/p>\n<p>Until eventually your map will have lots of attractions pin pointed.<\/p>\n<p><a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/4-2\" rel=\"attachment wp-att-4032\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4032\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/4-e1469185811532.png\" alt=\"4\" width=\"600\" height=\"332\" \/><\/a><\/p>\n<p>8. Now comes the fun part &#8211; making it clear what each pinpoint is.<\/p>\n<p>So rather than have them all the same colour and icon, why not customise each one to be relevant to that point of interest, presenting it in more obviously.<\/p>\n<p>Start with your own property and make sure it stands out from all the attractions, so your website visitors get a better understanding of the distances.<\/p>\n<p>Hover over your property until a paint pot icon appears and then click it:<\/p>\n<p><a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/attachment\/5\" rel=\"attachment wp-att-4033\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4033\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/5.png\" alt=\"5\" width=\"479\" height=\"228\" srcset=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/5.png 479w, https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/5-300x143.png 300w\" sizes=\"(max-width: 479px) 100vw, 479px\" \/><\/a><\/p>\n<p>Now you can either choose a colour for better stand out or an icon to represent your property \u2013 for example, here we chose a house.<\/p>\n<p>When opting for icons for the rest of your pinpoints, there are plenty of categories to select from. So take a few minutes to find the most suitable icon before saving.<\/p>\n<p><a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/attachment\/7\" rel=\"attachment wp-att-4034\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4034\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/7-e1469185889337.png\" alt=\"7\" width=\"600\" height=\"229\" \/><\/a><\/p>\n<p>9. Once you\u2019ve done that for all your points of interest, the different types of attractions will be more obvious to your website visitors.<\/p>\n<p><a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/attachment\/8\" rel=\"attachment wp-att-4035\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4035\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/8-e1469185955772.png\" alt=\"8\" width=\"600\" height=\"313\" \/><\/a><\/p>\n<p>And remember we mentioned being able to embed photos too?<\/p>\n<p>What better way to showcase your local area than by including quality photos of attraction on your interative map.<\/p>\n<p>To do this, simply click on the attraction you want to display a photo, select the camera icon and either enter the URL of the photo or do a Google search, and save one.<\/p>\n<p><a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/attachment\/10\" rel=\"attachment wp-att-4036\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4036\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/10-e1469186096948.png\" alt=\"10\" width=\"600\" height=\"349\" \/><\/a><\/p>\n<p>10. When you\u2019re finished, click the<strong> Preview<\/strong> button to show how your map will display to your website visitors, and have a play around. Zoom in and click on each icon. Anything you\u2019re not happy with, just go back and change it.<\/p>\n<p><a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/attachment\/11\" rel=\"attachment wp-att-4037\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4037\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/11.png\" alt=\"11\" width=\"290\" height=\"446\" srcset=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/11.png 290w, https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/11-195x300.png 195w\" sizes=\"(max-width: 290px) 100vw, 290px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/attachment\/12\" rel=\"attachment wp-att-4038\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4038\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/12-e1469186214368.png\" alt=\"12\" width=\"600\" height=\"279\" \/><\/a><br \/>\nBut of course that\u2019s not all.<\/p>\n<p>11. Now you\u2019ve got your map setup, you need to embed it on your website.<\/p>\n<p>First, you need to ensure your map is public. Do this by clicking the <strong>Share<\/strong> button and selecting <strong>Public on the web<\/strong><\/p>\n<p><a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/attachment\/13\" rel=\"attachment wp-att-4039\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4039\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/13.png\" alt=\"13\" width=\"310\" height=\"293\" srcset=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/13.png 310w, https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/13-300x284.png 300w\" sizes=\"(max-width: 310px) 100vw, 310px\" \/><\/a> <a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/attachment\/14\" rel=\"attachment wp-att-4040\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4040\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/14.png\" alt=\"14\" width=\"418\" height=\"449\" srcset=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/14.png 418w, https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/14-279x300.png 279w\" sizes=\"(max-width: 418px) 100vw, 418px\" \/><\/a><\/p>\n<p>Once public sharing is saved, head up to the menu icon and select <strong>Embed on my site<\/strong><\/p>\n<p><a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/attachment\/15\" rel=\"attachment wp-att-4041\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4041\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/15.png\" alt=\"15\" width=\"490\" height=\"235\" srcset=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/15.png 490w, https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/15-300x144.png 300w\" sizes=\"(max-width: 490px) 100vw, 490px\" \/><\/a><\/p>\n<p>Copy the code that appears in the pop up box,\u00a0 go to your website, find the page that you want the map displayed on and simply paste the code.<\/p>\n<p>Of course how you do this final stage will depend on the content management system you\u2019re using. For example, with PromoteMyPlace websites, you can easily embed 3rd party code using the <strong>Insert HTML Snippet<\/strong> functionality.<\/p>\n<p>Once the code has been embedded, preview your website to see how it looks.<\/p>\n<p><a href=\"https:\/\/wrpmp-euw-wpblog.azurewebsites.net\/how-to-add-an-interactive-travel-map-to-your-website\/attachment\/17\" rel=\"attachment wp-att-4042\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4042\" src=\"https:\/\/wrpmpwebdata002.blob.core.windows.net\/wrpmpassetsblog\/2016\/07\/17-e1469186322516.png\" alt=\"17\" width=\"600\" height=\"339\" \/><\/a><\/p>\n<p>Providing information in this way will give your website visitors real value, and have the added benefit of making you stand out from the competition.<\/p>\n<p>Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The main purpose of your holiday rental website is to inform potential guests and encourage them to make a booking. In order to do that, you need to make it as informative, engaging and enticing as possible. But how do you go about doing that? One visual way, which has the benefit of being informative,&nbsp;<a class=\"more-link\" href=\"https:\/\/www.promotemyplace.com\/blog\/how-to-add-an-interactive-travel-map-to-your-website\" rel=\"nofollow\">[Continue reading &hellip;]<\/a><\/p>\n","protected":false},"author":2,"featured_media":4045,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[26],"tags":[],"_links":{"self":[{"href":"https:\/\/www.promotemyplace.com\/blog\/wp-json\/wp\/v2\/posts\/3987"}],"collection":[{"href":"https:\/\/www.promotemyplace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.promotemyplace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.promotemyplace.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.promotemyplace.com\/blog\/wp-json\/wp\/v2\/comments?post=3987"}],"version-history":[{"count":0,"href":"https:\/\/www.promotemyplace.com\/blog\/wp-json\/wp\/v2\/posts\/3987\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.promotemyplace.com\/blog\/wp-json\/wp\/v2\/media\/4045"}],"wp:attachment":[{"href":"https:\/\/www.promotemyplace.com\/blog\/wp-json\/wp\/v2\/media?parent=3987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.promotemyplace.com\/blog\/wp-json\/wp\/v2\/categories?post=3987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.promotemyplace.com\/blog\/wp-json\/wp\/v2\/tags?post=3987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}