[contact-form-7 id="24085" title="Feedback RU"]

Новые шаблоны

JS Animated. Как добавить/изменить маркеры на карте (на основе RD Google Map)

Из этого туториала Вы узнаете, как добавить/изменить маркеры на карте (на основании RD Google Map) в JS-анимированных шаблонах.

JS Animated. Как добавить/изменить маркеры на карте (на основании RD Google Map)

Для того чтобы проверить, использует ли ваша карта плагин «RD Google Map», Вам нужно проверить, есть ли файл jquery.rd-google-map.js в папке js на вашем сервере.

Для того чтобы добавить/изменить маркеры на карте, Вам нужно отредактировать файл .html с кодом карты.

Вы можете найти корневую папку вашего сайта на сервере.

Для того чтобы добавить/изменить маркеры на карте, следуйте таким инструкциям:

  1. Получите координаты карты: Вы можете использовать Карты Google или любой другой инструмент, который поможет вам получить широту и долготу объекта;

  2. Подключитесь к вашему серверу используя клиент FTP или Файловый менеджер Панели управления хостингом;

  3. Внесите изменения в файл .html с кодом карты, который расположен в корневой папке сайта на сервере.

  4. Найдите код списка карты:

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

    Добавьте новый элемент списка, используя <li></li> тэги html и определите 2 атрибута: data-x (северная широта) и data-y (восточная долгота).

  5. В результате Вы получите следующую строку кода, которую нужно добавить в код карты в файле .html:

     <li data-x="--72.9874068" data-y="39.643180"></li> 
  6. Вот пример кода карты с добавленной строкой:

    <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>

    Где:

    <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>

    это маркер на карте:

    JS_Animated.How_to_-add_change_map_markers_(based_on_RD_Google_Map)_1

  7. Сохраните изменения и убедитесь, что файл, который Вы отредактировали, был загружен на сервер.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

JS Animated. Как добавить/изменить маркеры на карте (на основании RD Google Map)