VPF::Програмно добавить маркер к инетактивной карте

Oxidous

Дата 6.2.2017, 10:18 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 24.9.2015

Репутация: нет
Всего: нет

Всем доброго времени суток,

Стало интересно узнать, как пишутся плагины для WordPress, а потому нашёл несколько обучающих уроков от "Web4myself", где автор достаточно подробно объясняет, как пишется плагин "Google карта", который, затем, можно установить на сайте и использовать.
Используется плагин при помощи шорткода вот такого вида: [map cords1="50.447312" cords2="30.526511" zoom="17], где "coords1", "coords2" - это координаты долготы и широты, а "zoom" - уровень детализации (чем больше значение, тем более детализированно). Всё, что нужно пользователю, это подставить свои координаты долготы и широты в шорткод и будет выведена карта нужной местности, скажем так.
И вроде всё хорошо с самим плагином, вот только автор, почему-то, не посчитал нужным реализовать то, что такие карты, как правило, используют маркеты, чтоб наглядно показать, где находится нужное место (допустим, офис компании или дом нужного человека). То есть автор не реализовал маркер для такой карты.

Выкладываю PHP и JS код плагина

Файл "wfm-maps-2.php":

Код


<?php
/*
Plugin Name: Карты Google v.2
Description: Пример шорткода: [map cords1="50.447312" cords2="30.526511" zoom="17"]
Plugin URI: http://webformyself.com
Author: Андрей
Author URI: http://webformyself.com
*/
 
add_shortcode( 'map', 'wfm_map_2' );
$wfm_maps_array = array();
 
function wfm_map_2($atts){
    global $wfm_maps_array;
    print_r($atts);
    $atts = shortcode_atts(
        array(
            'cords1' => 50.447312,
            'cords2' => 30.526511,
            'zoom' => 8
        ), $atts
    );
 
    extract($atts);
    $wfm_maps_array = array(
        'zoom' => $zoom,
        'cords1' => $cords1,
        'cords2' => $cords2
    );
 
    add_action( 'wp_footer', 'wfm_styles_scripts' );
    return '<div id="map-canvas" style="width: 650px; height: 400px;"></div>';
}
 
function wfm_styles_scripts(){
    global $wfm_maps_array;
    wp_register_script( 'wfm-maps-google', 'http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false' );
    wp_register_script( 'wfm-maps-2', plugins_url( 'wfm-maps-2.js', __FILE__ ) );
 
    wp_enqueue_script( 'wfm-maps-google' );
    wp_enqueue_script( 'wfm-maps-2' );
 
    wp_localize_script( 'wfm-maps-2', 'wfmObj', $wfm_maps_array );
}

Файл "wfm-maps-2.js":

Код


var map; 
 
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(wfmObj.cords1, wfmObj.cords2),
        zoom: +wfmObj.zoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
}
 
google.maps.event.addDomListener(window, 'load', initialize);

Быть может кто-нить может пояснить, как написать маркер для плагина?

П.С. Ища в интернете, я наткнулся на документацию по Гугл картам, где описывается реализация маркера: Маркеры. Документация Google карт., вот только не могу разобраться, как реализовать (подогнать) данный там код под JS плагина. Иными словами, куда именно в JS втсавлять данный ниже код и что писать в "position":

Код


var marker = new google.maps.Marker({
    position: center, // Здесь, как я понимаю, должна быть переменная "center", потому как в ней указываюся координаты
    map: map,
    title: 'Мы находимся здесь!'
  });

Заранее благодарю за помощь.

Это сообщение отредактировал(а) Oxidous - 6.2.2017, 10:51

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| WordPress \| Следующая тема »