How to add/change map markers (based on RD Google Map)

vendy pro shopify theme

This guide will help you to add or change map markers (based on RD Google Map plugin).
Google map markers

In order to add and change map markers, you need to edit .html file which contains the map.

In order to make the necessary changes, you need to follow these steps:

  1. Get your needed map markers location coordinates. You can do that via Google Maps or any other tool that helps to get map coordinates, like Google Maps – GPS coordinates, latitude and longitude.
  2. Connect to your server via FTP or open the hosting cPanel File Manager and edit the .html file with the map code (the file is located in the site’s root installation folder).
  3. Locate the map markers list code:

    In case there is no such code in your .html file, you need to look for <div class"rd-google-map"> code and insert the list with marker(s) inside of mentioned container. Your code will look as follows:

  4. To change the location existing marker points to, you just need to change the values of 2 data-attributes: data-x (north latitude) and data-y (west longitude) for the list item (<li> tag).
  5. To add new marker you need to insert one more list item using <li></li> html tags and set 2 attributes: data-x and data-y.
  6. After that you should get following code that should be added into the map code in .html file:

    Complete map code will look like this:


    sets your new marker on the map. Content inside of the <li></li> tags will be shown in the marker infowindow upon click on it.

Save changes and upload the edited .html file replacing the existing one. That’s all!

shopify subscription price