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

This tutorial shows how to add/change map markers (based on RD Google Map) in JS Animated templates.

In order to check if your map is based on RD Google Map plugin, you will need to check if you havejquery.rd-google-map.js file inside js folder on your server.

In order to add/change map markers, you will need to edit .html file with the map code.

You can find it in the site’s root folder on the server.

In order to add/change map markers, you should do the following:

1. Get map coordinates: you can do that via Google Maps or any other tool that helps to get map coordinates such as longitude and latitude;

2. Connect to your server via FTP client or using hosting cPanel file manager;

3. Edit .html file with the map code, located in the site’s root folder on the server.

4. Locate map’s list code:

   <ul class="map_locations"></ul>
   

   Add new list element using <li></li> html tags and define 2 attributes such as: data-x (north latitude) and data-y (west longitude).

5. As a result you will get the following line of code that should be added into the map code in .html file:

    <li data-x="--72.9874068" data-y="39.643180"></li> 

6. There is an example of the map code with the added line:

   <div id="google-map" class="map_model"></div>
   	<ul class="map_locations">
   		<li data-x="-73.9874068" data-y="40.643180">
   			<p> 9870 St Vincent Place, Glasgow, DC 45 Fr 45. <span>800 2345-6789</span></p>
   		</li>
   	</ul>
   </div>

   Where:

   <li data-x="-72.9874068" data-y="39.643180">
   	<p> 9870 St Vincent Place, Glasgow, DC 45 Fr 45. <span>800 2345-6789</span></p>
   </li>

   represents the new marker on the map:

   

7. Save changes and make sure the modified file has been uploaded to the server.

Feel free to check the detailed video tutorial below: