DataLife Engine > Java Script > GoogleMap на своём сайте

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


10-04-2012, 18:05. Разместил: n0wheremany
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>

Вернуться назад