Using WP Google Map plugin you can add bounce animation to the marker that has been recently clicked. Its icon will move up and down until you select another one or close infowindow.
Animation always looks more interesting than just a stationary picture. In the case of Google Maps, moving markers enliven them. Let’s see what benefits they give to websites:
- Motion draws attention and users are more likely to read what is written in infowindows.
- Bounce animation helps to focus on the intended object.
- It’s clear what marker is selected when there are a lot of them on a map. This way site visitors won’t be confused.
- People won’t have to spend extra time to recall information about what object they are reading now. It will improve their user experience and general impression of your website.
- If your website contains a lot of moving parts, bounce animation will make Google Map align with its general design and style.
You can use this feature to notify customers about discounts or events. For example, a chain of stores or cafes may set animation to attract attention to special offers they have now, especially if they are limited in time or expire soon. Description can be provided in infowindows and attached links will redirect visitors to pages with more details or online shops. Motion often motivates people on the subconscious level to act quickly.
For travel agencies, it’s an opportunity to notify about last-minute package tours. Adding bounce animation to locations with such offers will make them stand out and clients will notice them faster. It will contribute to an increase in the volume of sales. You can also use moving markers on a Google Map to show that there are interesting events or holidays currently or on certain dates. Infowindows will help to provide more details or links to full descriptions.
How to add
- If you want to enliven your map or just make it more interactive, open the page with infowindow settings and activate the animation. You’ll also be able to select its type. This is a link to the tutorial with a screenshot. Use it to gain more understanding.
- Now let’s check how it works. Scroll down the page till the Google Map appears and click on any marker. You’ll see it moving up and down – this is bounce animation in action.
- After you close the infowindow or select another location, the motion will disappear.