GoogleMap на своём сайте
10-04-2012, 18:05
Комментарии (5)
Просмотры (8616)
В связи с развитием гео скриптов, многие у себя на сайте ставят гугл-, яндекс-карты и др. Но почему то в этой среде все равно возникают вопросы "Как вставить в новость, если в новости запрещено вставлять скрипты".
Итак что нам нужно:
- работающий буфер обмена
Почему Гугл-карты? С выходом 3 версии карт, апи-ключи не используются, т.е. не надо регистрироваться и получать этот ключ.
Мы будем пользоваться стандартными средствами без правки движка.
1. Создаём 1 доп поле - location - тип одна строка
2. Идём в шаблон fullstory.tpl и начинаем настраивать:
Прописываем в самый верх шаблона fullstory.tpl
Там где нужна карта
В новости прописываем в поле location например такое: 55.774491,37.587145
И все - теперь отображается карта и центрируется на нужной нам точке.
Но не понятно - где эта точка, отобразим эту точку (вместо первого кода пишем такое):
Итак что нам нужно:
- работающий буфер обмена
Почему Гугл-карты? С выходом 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>