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

@Oxidous · Регистрация: 03.09.2014

Author24 — интернет-сервис помощи студентам

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

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

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

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

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

Javascript

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

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

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

Javascript

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

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

Добавлено через 12 часов 59 минут
Доброго времени суток,

Пробовал сделать по документации Гугл, однако маркер всё равно не появляется на карте. Да и сама карта перестала отображаться.

Привожу ниже код реализации:

Javascript

var map; 
function placeMarker(position, title) {
    var marker = new google.maps.Marker({
        position: position,
        map: map,
        title: title
   });
function initialize() {
    var mapOptions = {
        position: new google.maps.LatLng(wfmObj.cords1, wfmObj.cords2),
        zoom: +wfmObj.zoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        placeMarker(position, 'Мы находимся здесь.');
    };
 
}
 
google.maps.event.addDomListener(window, 'load', initialize);

@Oxidous · 08.02.2017, 11:43 **[ТС]**

Проблема решена. Выкладываю JS код, быть может кому-то пригодится.

Javascript

var map; 
var marker;
//можно было в функции проинициализировать, но вдруг где-то ещё пригодится. 
//Здесь значение переменной - ссылка на маркер, который слепил в фотошопе. 
//На карте будет обображаться не стандартный маркер, а кастомный.
var image = 'http://i.**********/yHsnhjE.png';
function initialize() {
// Получаем координаты и уровень детализации каарты, которые юзер ввёл в шорткоде, и выводим по ним карту местности.
        var myLatLng = new google.maps.LatLng(wfmObj.cords1, wfmObj.cords2);
    var mapOptions = {
        center: myLatLng,
        zoom: +wfmObj.zoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
//Формируем нужный текст в инфобоксе. При нажатии на расположенный на карте маркер, выскочит заданный здесь текст.
    var contentString = '<div id="content">'+
         '<div id="siteNotice">'+
         '</div>'+
// Поскольку ифноблок - это div блок, можно применить к нему различное оформление. 
// Например, задать в качестве заголовка изображение при помощи тега <img src="URL">
         '<h1 id="firstHeading" class="firstHeading">Заголовок</h1>'+
         '<div id="bodyContent">'+
         '<p><b>Мы находимся здесь: </b> Село Кукуево 85</p>'+
         '</div>'+
         '</div>';
    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });
// Маркер, который будет выводится на карте
        marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
// Можно убрать title вообще, он не особо нужен.
                title: 'Текст, который выведится при наведении курсора на маркер',
// Кастомная иконка меркера
                icon: image
        });
        marker.addListener('click', function() {
                infowindow.open(map, marker);
        });
// При наведении курсора на маркер, он булет анимирован, начнёт подпрыгивать.  
        marker.addListener('mousemove', toggleBounce);
// Собственно, функция самой анимации.
}
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
         
google.maps.event.addDomListener(window, 'load', initialize);

	08.02.2017, 11:43