If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

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.

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

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:

    JS_Animated.How_to_-add_change_map_markers_(based_on_RD_Google_Map)_1

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

Feel free to check the detailed video tutorial below:

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