Want to offer your visitors a better map experience? Create Google Maps custom tooltips for markers and present information more organized!
Using Google Maps on websites has been a gold standard for showcasing locations. It can be a particular business, organization, or listings on a directory website. Google Maps is everywhere.
Sometimes, you may want to take it to the next level by customizing some part of Google Maps. Getting Google Maps custom tooltips for location markers is one of them. Today, we’ll show you how to get Google Maps marker custom tooltip on your geodirectory site.
If you've been looking for a Google map marker add tooltip tutorial, here it is. In this article, we’ll use a directory website powered by Business Directory Plugin – the best WordPress directory plugin. Our test ground site will utilize a premium plan of Business Directory Plugin along with its Google Maps module.
Business Directory Plugin’s Google Maps module lets you show location maps with your directory listing items. Users can interact with those maps and even they can get directions right away.
Plus, you can show multiple locations in a single map which is useful for archive or collection pages.
Whether you want to highlight a single entity or multiple ones in your map frame, map markers play a vital role. Visitors can identify your featured place easily when they see a marker. To make it more helpful, Google offers the ability to add marker tooltips.
What are Google Maps marker tooltips?
When you search any location on Google Maps, you may notice some landmark icons. They are known as markers. These little red-ish icons mark places for easier navigation.
If you hover, tap or click on these markers, some additional information pops. Those are called tooltips.
Google Maps marker tooltips are very helpful to get more information about particular places. They contain the exact address, contact information, photos, etc.
You would be happy to know, you can customize those marker tooltips when you display any location in your directory. Business Directory Plugin enables you to do so.
Why should you customize Google Maps tooltips?
We would rather say “why not”! Every directory has its own purpose. You present information that matters to your visitors. For a business directory, presenting the businesses' open hours, exact locations, and contact information is important.
Or, if it’s a doctor directory, you would prefer to feature the doctors’ specializations, chamber addresses, etc.
On the other hand, if you manage a telephone directory, you would present the telephone numbers prominently. For the ultimate ease-of-use, your want to offer the numbers in the tooltips.
So, you can serve your community better by using the marker tooltips with relevant information in them. Your visitors can just tap on a listing item’s marker and get the necessary information quickly.
It’s really useful and interesting, isn’t it?
How to get Google Maps custom tooltips
With Business Directory Plugin, you can easily insert Google Maps in directory items. Once you get your maps live in your directory, you can follow this tutorial to customize the marker tooltips on the maps shown on your listings.
Step 1: Get your directory fields ready for the tooltips
The Google Maps module uses your directory fields to produce tooltip content. Allowed values include field IDs, field shortnames, URL, address, city, state, ZIP, and country. You can add fields to your directory and use the field shortnames to display them in the tooltip.
To add a new field, open your WordPress dashboard. Go to Directory → Form Fields. You can add new fields from there. From the field list on that page, you will find the field shortnames for each field.
Step 2: Assign standard fields in the Google Maps module
After having all the fields ready, we need to assign some standard fields in the Google Maps settings. These are: Address, City, State, ZIP code, and Country.
If you want to use these fields in your directory and tooltips, you should assign these fields in the Google Maps module. Go to Directory → Settings → Google Maps.
After assigning the fields, save changes.
Step 3: Add your custom content template for tooltips
Now that you’ve got your form fields set up. It’s time to enter their shortnames into our Google Maps module tooltip content field. Go to Directory → Settings → Google Maps. You’ll get the tooltip content customization field on that page.
This field supports HTML inputs. That means you can use an HTML template with your field shortnames to display tooltip content.
Here we’ve provided a basic HTML template for you to get started.
<a href="[url]"><b>[name]</b></a> [address] [city], [state] [zip] [country].
The above template will render the listing item’s name (with hyperlinked URL), address, city, state, ZIP code, and country in the tooltip. Let’s see it in action!
So, our Google Maps custom marker tooltip content is working. You don't need to worry about Google Maps API or any script src stuff.
Learn More: How to Easily Customize Google Maps in WordPress Directories
Many people would tell you “see stack overflow or play with maps.googleapis.com maps api js”. The good news is, we've got you covered! See?
Again, you have the flexibility to customize it as you need.
Business Directory Plugin offers tons of interesting and helpful features to make your directory site outstanding. The best part is, you can purchase any of our plans 100% risk-free. We offer a 14-day money-back guarantee. No questions asked!
Wrapping up
We believe this article was able to show you the easiest way to get custom Google Maps tooltips for your directory site. Please visit our blog to find more helpful articles and enrich your listing site. Also, don’t forget to let us know your thoughts in the comments!
Yet to try Business Directory Plugin? Get Business Directory Plugin now and launch any type of directory site today. It’s easier than you might imagine!
How to Effectively Use Club Directory Software
How to Add a Google “Get Directions” Button in WordPress
How to Set Up a Geodirectory Plugin on Your WordPress Site
Leave a Reply