Форум программистов, компьютерный форум, киберфорум
WordPress
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
 Аватар для Oxidous
4 / 4 / 1
Регистрация: 03.09.2014
Сообщений: 156

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

06.02.2017, 23:25. Показов 1253. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем доброго времени суток,

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

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

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?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
1
2
3
4
5
6
7
8
9
10
11
12
13
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
1
2
3
4
5
var marker = new google.maps.Marker({
    position: center, // Здесь, как я понимаю, должна быть переменная "center", потому как в ней указываюся координаты
    map: map,
    title: 'Мы находимся здесь!'
  });
Заранее благодарю за помощь.

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

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

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
1
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
06.02.2017, 23:25
Ответы с готовыми решениями:

Маркер на гугл карте
Есть гугл карта, привязанная к GMapControl, вопрос: как поместить на карту маркер правым кликом. Спасибо

Не перемещается маркер на карте
мож каму такая прага знакомма дела втом что нажимаю курсорам мышкои и зелёная чашка недвигаится на маём кампютири а надругом двигаится...

маркер google
возможноли сделать что бы функция var markers = ; for (var i = 0; i &lt; 1; i++) { ...

1
 Аватар для Oxidous
4 / 4 / 1
Регистрация: 03.09.2014
Сообщений: 156
08.02.2017, 11:43  [ТС]
Проблема решена. Выкладываю JS код, быть может кому-то пригодится.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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);
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
08.02.2017, 11:43
Помогаю со студенческими работами здесь

Маркер на google карту
Помогите пожалуйста в кодом. Прошу сильно не пинать я только учусь) Нужно на гугл карту поставить маркеры по своим координатами с...

Как поставить маркер в Google maps
Вывожу через webView гугл карту, нужно что бы при клике на карту появлялся маркер и записывались координаты этой точки, как это сделать?

Google Maps. маркер и всплывающее окно
на схеме нарисован план действий. при наведении мыши на маркер вылетает попап с инфой. Как только мышь отвидим - попап закрывается....

Не ставится маркер места на google.maps
Здравствуйте, помогите начинающему верстальщику. Две проблемы по сайту: http://searchwork-nik.myjino.ru/pink 1. В IE (10-11 и выше)...

Добавить маркер
Всем доброго времени суток, столкнулся с проблемой касательно API Google maps. Необходимо создать скрипт, который будет используя данные из...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru