{"id":1520082,"date":"2018-02-16T11:35:46","date_gmt":"2018-02-16T11:35:46","guid":{"rendered":"https:\/\/wpml.org\/?p=1520082"},"modified":"2018-02-16T11:37:34","modified_gmt":"2018-02-16T11:37:34","slug":"creating-a-multilingual-site-that-uses-google-maps-challenges-and-solutions","status":"publish","type":"post","link":"https:\/\/wpml.org\/ko\/announcements\/2018\/02\/creating-a-multilingual-site-that-uses-google-maps-challenges-and-solutions\/","title":{"rendered":"Creating a multilingual site that uses Google Maps: challenges and solutions"},"content":{"rendered":"

Building a multilingual site that uses advanced Google Maps techniques seems to be a challenge. However, if you approach it correctly using the right tools, it becomes easy, even if you are not a PHP programmer!<\/p>\n

We recently built a new multilingual Real Estate reference site<\/a> for Toolset<\/a>, which relies heavily on Google Maps. We built it to showcase Toolset\u2019s capabilities, but it is actually a good example of what can be achieved using Google Maps for multilingual sites with WPML.<\/p>\n

Challenge #1: How to implement a property search within a given radius and make it multilingual<\/h2>\n

When your map displays many markers, users expect them to be filtered.<\/p>\n

For example, the property search<\/a> of our Real Estate site allows you to filter posts by distance. Users can look up properties in a specific location or within a given radius of their current location.<\/p>\n

All input fields and button labels should be available in the visitor\u2019s language.<\/p>\n

\"Searching<\/a>
Searching properties based on a distance from a point of interest<\/figcaption><\/figure>\n

Solution<\/strong><\/p>\n

Toolset allows you to build custom searches<\/a> for anything and display the results on Google Maps<\/a>. Your search can include filters by distance, which allows users to search properties around a given location, including near the visitor\u2019s current location.<\/p>\n

Toolset plugins are WPML compatible. This means that anything coming from Toolset can be translated in WPML. Field values appear automatically in WPML\u2019s String Translation. Any text that you add into templates can also be easily wrapped in wpml-string shortcodes to make them translatable.<\/p>\n

\"Adding<\/a>
Adding filters-by-distance in Toolset and making some of your form fields WPML ready<\/figcaption><\/figure>\n

Challenge #2: How to show marker pop-up tooltips in a given language<\/h2>\n

When you click on a specific place in a map, you expect to see greater details and learn more about the object of your interest.<\/p>\n

For example, in our Real Estate site, when you click on a marker, a small tooltip pops up to show the property title, its image, and the price.<\/p>\n

\"Tooltips<\/a>
Tooltips in markers on a multilingual site that uses Google Maps<\/figcaption><\/figure>\n

How would you add these tooltips to your Google maps and make them appear in the appropriate language?<\/p>\n

Answer<\/strong><\/p>\n

\"Use<\/a>
Use custom fields to store post details. Fields are easy to edit and translate, and you can also include them in the map markers.<\/figcaption><\/figure>\n

The answer is simple. Use custom post types and custom fields to store information about your posts (or the real estate properties in our case).<\/p>\n

Post types and fields make your site easy to maintain. Your site\u2019s editors will know exactly the field to fill in (see the screenshot on the right). In addition, custom fields are easy to translate using WPML.<\/p>\n

Then, when you want to display your post information in Google Map markers, you simply pick the fields you need.<\/p>\n

Review this blog post<\/a> to see more details.<\/p>\n

Challenge #3: How to create templates once and translate only the content<\/h2>\n

Last but not least, let us imagine that you want to translate only the content and not whole templates.<\/p>\n

This also applies to templates that include Google Maps. You expect to set up your map only once, include the appropriate template, and then deal only with the task of translating the post content and fields.<\/p>\n

\"Create<\/a>
Create your templates once and translate only the content. Template layout for property pages created with Toolset plugins<\/figcaption><\/figure>\n


\nSolution<\/strong><\/p>\n

If you use Toolset plugins, you can easily separate the tasks of creating templates and translating content.<\/p>\n

You create a template only once and make translation-ready all the strings it includes. These include locations on a map, other custom fields, and input fields for your forms, labels, and buttons.<\/p>\n

You can make all these elements ready for translation with WPML. Check the documentation on how to translate templates built with Toolset<\/a> for details.<\/p>\n

Other interesting applications of Google Maps<\/h2>\n
\"Other<\/a>
Other interesting applications of Google Maps<\/figcaption><\/figure>\n

Please see the article on Advanced Google Maps Features in Toolset Reference Sites<\/a> to discover some other interesting applications of Google Maps in WordPress sites.<\/p>\n

If you want to learn how to build advanced multilingual sites using Toolset and WPML and without using PHP, please launch a free copy of the Real Estate site.<\/p>\n

Want to get in touch with me?<\/h2>\n

My name is Agnes Bury. In addition to writing this post, I already build Toolset\u2019s reference and training sites. If you have specific questions about Toolset, just ask me<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Building a multilingual site that uses advanced Google Maps techniques seems to be a challenge. However, if you approach it correctly using the right tools, it becomes easy, even if you are not a PHP programmer! We recently built a new multilingual Real Estate reference site for Toolset, which relies heavily on Google Maps. We […]<\/p>\n","protected":false},"author":59141,"featured_media":1520135,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"ep_exclude_from_search":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1520082","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements"],"_links":{"self":[{"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/posts\/1520082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/users\/59141"}],"replies":[{"embeddable":true,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/comments?post=1520082"}],"version-history":[{"count":8,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/posts\/1520082\/revisions"}],"predecessor-version":[{"id":1520172,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/posts\/1520082\/revisions\/1520172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/media\/1520135"}],"wp:attachment":[{"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/media?parent=1520082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/categories?post=1520082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/tags?post=1520082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}