Главная » Портфолио » Java Script » GoogleMap на своём сайте

GoogleMap на своём сайте

10-04-2012, 18:05 n0wheremany Комментарии (5) Просмотры (6501)
GoogleMap на своём сайте В связи с развитием гео скриптов, многие у себя на сайте ставят гугл-, яндекс-карты и др. Но почему то в этой среде все равно возникают вопросы "Как вставить в новость, если в новости запрещено вставлять скрипты".

Итак что нам нужно:
- работающий буфер обмена

Почему Гугл-карты? С выходом 3 версии карт, апи-ключи не используются, т.е. не надо регистрироваться и получать этот ключ.
Мы будем пользоваться стандартными средствами без правки движка.

1. Создаём 1 доп поле - location - тип одна строка
2. Идём в шаблон fullstory.tpl и начинаем настраивать:

Прописываем в самый верх шаблона fullstory.tpl

[xfgiven_location]
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function GoogleMapInit() {
  var latlng = new google.maps.LatLng([xfvalue_location]);
  var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googlemap_canvas"),myOptions);
}
$(document).ready(function(){GoogleMapInit()});
</script>
[/xfgiven_location]

Там где нужна карта

[xfgiven_location]<div id="googlemap_canvas"></div>[/xfgiven_location]


В новости прописываем в поле location например такое: 55.774491,37.587145

И все - теперь отображается карта и центрируется на нужной нам точке.

Но не понятно - где эта точка, отобразим эту точку (вместо первого кода пишем такое):

[xfgiven_location]
<span id="news_title" style="display:none">
<!-- ТоолТип точки -->
{title}
</span>
<span id="news_info" style="display:none">
<!-- Тут можно даже картинки вставлять -->
HelloWord
</span>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function GoogleMapInit() {
  var latlng = new google.maps.LatLng([xfvalue_location]);
  var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googlemap_canvas"),myOptions);
var marker = new google.maps.Marker({map: map,position:latlng,title:$('#news_title').html()});
var infowindow = new google.maps.InfoWindow({content: $('#news_info').html()});
infowindow.open(map, marker);
}
$(document).ready(function(){GoogleMapInit()});
[/xfgiven_location]
</script>

Другие новости по теме

Уважаемый посетитель

Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария


Коментарии

#5 4 сентября 2012 23:11 Steven

да, не работает
Публикаций: 0 Комментариев: 0 [ цитировать ]

#4 3 сентября 2012 15:38 paskal

Я тоже на 9.6 пробовал, результат: не работает.
Автор, сможешь подправить скрипт?
Публикаций: 0 Комментариев: 0 [ цитировать ]

#3 11 августа 2012 22:04 souz21

Не работает на 9.6 Все сделал по инструкции. Ничего не отображается. Почему?
Публикаций: 0 Комментариев: 14 [ цитировать ]

#2 18 июня 2012 12:07 n0wheremany

Подправил
Полезный текст


--------------------
Публикаций: 69 Комментариев: 748 [ цитировать ]

#1 18 июня 2012 08:24 yziker

Добрый день!
Прописываем:
Самый простой.
В самый верх


В самый вверх это где имеется ввиду?
Публикаций: 0 Комментариев: 0 [ цитировать ]