Карта Google в uCoz (Реализация внедрения GoogleMap на uCoz сайт)

Общие вопросы по системе юкоз, вопросы по ucoz, вопросы без определенной темы

Google карта на сайте юКоз

» » Сообщение:

Здравствуйте! Искал много дней в интернете чего интересного, и набрёл на вашем сайте http://likbezz.ucoz.ru/forum/60-176-1 на такую интересную тему. Блин, классно, что такое на uCoz можно реализовать, смотрел там уже готовые скрипты имеются, но вот незадача, я в этом полный ноль. Если вас не затруднит, то не могли бы вы поэтапно расписать что да как? Речь идёт об отметках на карте для модуля фотоальбом. За ранее благодарю!

затруднит, поэтапно, ноль, полный, готовые, скрипты, расписать, речь, ранее, благодарю, фотоальбом, карте, идёт, отметках, смотрел, реализовать, интересного, набрёл, интернете, дней

Re: Google карта на сайте

Admin » » Сообщение:

Rln

Rln писал(а) › 11 мар 2016, 17:50:Если вас не затруднит, то не могли бы вы поэтапно расписать что да как?

Собственно, там нет ничего сложного.

Код: Выделить всё Развернуть
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
// Геокодинг метки
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
     geocoder.geocode({
     latLng: pos
     }, function(responses) {
     if (responses && responses.length > 0) {
     updateMarkerAddress(responses[0].formatted_address);
     } else {
     updateMarkerAddress('Cannot determine address at this location.');
     }
     });
}

function updateMarkerStatus(str) {
     document.getElementById('markerStatus').innerHTML = str;
}
// получаем координаты метки
function updateMarkerPosition(latLng) {
     document.getElementById('info').innerHTML = [
     latLng.lat(),
     latLng.lng()
     ].join(', ');

     $('#puF4').val(latLng.lat()+','+latLng.lng()).attr('readonly','readonly');

}

function updateMarkerAddress(str) {
     document.getElementById('address').innerHTML = str;
}

// собираем карту с новыми или старыми координатами
function initialize() {
var arr=$('#puF4').val().split(',')||false;
<?if($PAGE_ID$='add')?>
var latLng = new google.maps.LatLng(42.255819822727766, 18.891189521789556);
<?else?>
var latLng = new google.maps.LatLng(arr[0], arr[1]);
<?endif?>
var map = new google.maps.Map(document.getElementById('map_canvas'), {
     zoom: 10,
     center: latLng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     });
     
// ставим маркер
     var marker = new google.maps.Marker({
     position: latLng,
     title: 'Point A',
     map: map,
     draggable: true
     });
         
// новое место маркера
     updateMarkerPosition(latLng);
     geocodePosition(latLng);
         
// перемещение вывод
google.maps.event.addListener(marker, 'dragstart', function() {
 updateMarkerAddress('Перемещаем...');
});
google.maps.event.addListener(marker, 'drag', function() {
 updateMarkerStatus('Перемещаем...');
 updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
 updateMarkerStatus('Переместили');
 geocodePosition(marker.getPosition());
});
};
</script>

Где:

Код: Выделить всё Развернуть
var arr=$('#puF4').val().split(',')||false;
<?if($PAGE_ID$='add')?>
var latLng = new google.maps.LatLng(42.255819822727766, 18.891189521789556);
<?else?>
var latLng = new google.maps.LatLng(arr[0], arr[1]);
<?endif?>

Если добавляем - прописываем метки по умолчанию:

Код: Выделить всё Развернуть
var latLng = new google.maps.LatLng(42.255819822727766, 18.891189521789556);

Или получаем добавленные ранее в дополнительное поле:

Код: Выделить всё Развернуть
var latLng = new google.maps.LatLng(arr[0], arr[1]);

в данном случае, из поля: $('#puF4').

Выводим ссылку на открытие окошка с картой:

Код: Выделить всё Развернуть
<a href="javascript://" onclick="new _uWnd('New3','Моё окно 3',900,560,{align:'center',autosize:1,autosizewidth:1,minh:500,oncontent:function(){initialize()}},'<div id=\'map_canvas\' style=\'border-bottom: 1px solid black;width:820px; height:500px\'></div><div id=\'titus\'><div id=\'info\'></div><div id=\'address\'></div></div>');return false;"><strong>Карта Google в uWnd. Demo</strong></a>

Что, в принципе, и можно посмотреть на демке: http://demo.likbezz.ru/work/karta-googlemap-na-ucoz.html

Карта Google в uCoz (Реализация внедрения GoogleMap на uCoz сайт)

Если вас интересует что-то конкретное - скажите что, поясню.


Re: Google карта на сайте юКоз

Rln » » Сообщение:

Admin, сделал всё как вы сказали, вставляю всё это в страницу добавления фотографий

Код: Выделить всё Развернуть
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
// Геокодинг метки
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
     geocoder.geocode({
     latLng: pos
     }, function(responses) {
     if (responses && responses.length > 0) {
     updateMarkerAddress(responses[0].formatted_address);
     } else {
     updateMarkerAddress('Cannot determine address at this location.');
     }
     });
}

function updateMarkerStatus(str) {
     document.getElementById('markerStatus').innerHTML = str;
}
// получаем координаты метки
function updateMarkerPosition(latLng) {
     document.getElementById('info').innerHTML = [
     latLng.lat(),
     latLng.lng()
     ].join(', ');

     $('#puF4').val(latLng.lat()+','+latLng.lng()).attr('readonly','readonly');

}

function updateMarkerAddress(str) {
     document.getElementById('address').innerHTML = str;
}

// собираем карту с новыми или старыми координатами
function initialize() {
var arr=$('#puF4').val().split(',')||false;
<?if($PAGE_ID$='add')?>
var latLng = new google.maps.LatLng(42.255819822727766, 18.891189521789556);
<?else?>
var latLng = new google.maps.LatLng(arr[0], arr[1]);
<?endif?>
var map = new google.maps.Map(document.getElementById('map_canvas'), {
     zoom: 10,
     center: latLng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     });
     
// ставим маркер
     var marker = new google.maps.Marker({
     position: latLng,
     title: 'Point A',
     map: map,
     draggable: true
     });
         
// новое место маркера
     updateMarkerPosition(latLng);
     geocodePosition(latLng);
         
// перемещение вывод
google.maps.event.addListener(marker, 'dragstart', function() {
 updateMarkerAddress('Перемещаем...');
});
google.maps.event.addListener(marker, 'drag', function() {
 updateMarkerStatus('Перемещаем...');
 updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
 updateMarkerStatus('Переместили');
 geocodePosition(marker.getPosition());
});
};
</script>


<a href="javascript://" onclick="new _uWnd('New3','Моё окно 3',900,560,{align:'center',autosize:1,autosizewidth:1,minh:500,oncontent:function(){initialize()}},'<div id=\'map_canvas\' style=\'border-bottom: 1px solid black;width:820px; height:500px\'></div><div id=\'titus\'><div id=\'info\'></div><div id=\'address\'></div></div>');return false;"><strong>Карта Google в uWnd. Demo</strong></a>

Нажимаю на "Карта Google в uWnd. Demo" и открывается ajax без карты, и так же нету никаких координатов в поле, у меня это $OTHER2$ :(

Где же я ошибся.(


Re: Google карта на сайте юКоз

Rln » » Сообщение:

Вот добавлю http://www.altai-photo.ru
Вот именно как на этом сайте, очень понравился вывод карты, хотел и к себе на сайт такое же что-бы пользователи при заходе на страницу добавления фотографий могли так-же выбрать место на карте и чтоб потом на странице с полной фотографией и комментариями было указано это место :)


Re: Google карта на сайте юКоз

Admin » » Сообщение:

Rln,

Rln писал(а) › 12 мар 2016, 01:10:Вот именно как на этом сайте, очень понравился вывод карты, хотел и к себе на сайт такое же

Ну да, то же самое, только без окошка:

Код: Выделить всё Развернуть
<div id="map_canvas" style="width: 400px; height: 250px"></div>
<script src="http://maps.google.com?file=api&amp;v=2.x" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
 var map = new GMap2(document.getElementById("map_canvas"));
 map.setCenter(new GLatLng(55.601407994227365, 37.718816226959234), 15);
 map.setMapType(G_HYBRID_MAP);
 map.setUIToDefault();

 var marker = new GMarker(new GLatLng(55.601407994227365, 37.718816226959234), 1);
 map.addOverlay(marker);
}
initialize();
</script>
Rln писал(а) › 11 мар 2016, 17:50:могли бы вы поэтапно расписать что да как?

То бишь, откуда что скопировать и куда что вставить? Нет.
Могу подсказать в общих чертах.
Для начала, нужно зарегистрироваться в гугл мэп апи и получить ключ.
Там же, неплохо и ознакомиться с основами гугл мэп апи, хотя бы в общих чертах.
Затем добавить скрипт на сайт, и функцию установки координаты - постом выше.
Добавить на страницу с полной фоткой блок и функцию вывода карты - ту, что в этом сообщени - чуть выше.
Прочие тонкости, такие как - имя поля для запоминания, размеры, тип карты, координаты стартового маркера и прочее оформление - на ваш вкус.


Re: Google карта на сайте юКоз

Rln » » Сообщение:

То бишь, откуда что скопировать и куда что вставить? Нет

Да нет, вы что) У меня бы наглости столько не хватило бы спрашивать что куда копировать нужно, это я уже сам обязан догадаться)). Вы уже в первом посте мне поэтапно практически всё объяснили, за это я вам отдельно благодарен, просто не так вставлял, сейчас буду пробовать, как получиться результат я вас сразу же отпишусь :)


Re: Google карта на сайте юКоз

Admin » » Сообщение:

Rln,

Rln писал(а) › 12 мар 2016, 02:24:сейчас буду пробовать, как получиться

В любом случае, сначала вам нужно получить ключ. Там же есть краткая справка по апи и готовые примеры кода.
Потом выбрать поле в которое будут запоминаться пользовательские данные.
Записывать координаты метки в поле так:

plain Код: Выделить всё Развернуть
// получаем координаты метки
function updateMarkerPosition(latLng) {
     document.getElementById('info').innerHTML = [latLng.lat(), latLng.lng()].join(', ');
     $('#puF4').val(latLng.lat()+','+latLng.lng()).attr('readonly','readonly');
}

где puF4 - id вашего поля.
Выводить соответственно:

Код: Выделить всё Развернуть
<div id="map_canvas" style="width: 400px; height: 250px"></div>

- блок для карты.

plain Код: Выделить всё Развернуть
function initialize() {
 var map = new GMap2(document.getElementById("map_canvas"));
 map.setCenter(new GLatLng(55.601407994227365, 37.718816226959234), 15);
 map.setMapType(G_HYBRID_MAP);
 map.setUIToDefault();

 var marker = new GMarker(new GLatLng(55.601407994227365, 37.718816226959234), 1);
 map.addOverlay(marker);
}
initialize();

где 55.601407994227365, 37.718816226959234 - стартовые координаты, например, Москва;
15 - масштаб;
55.601407994227365, 37.718816226959234 - координаты маркера - сюда подставить код поля, типа:

Код: Выделить всё Развернуть
var marker = new GMarker(new GLatLng($OTHER1$), 1);

---


Re: Google карта на сайте юКоз

Rln » » Сообщение:

Ага, я уже на пути к своей цели :)
Вот получил Api key, у меня он такой AIzaSyADx69yN4OtCy--clIJeDKyBHKebzJgnqs, на всякий :P
Теперь, я выбрал способ, который вы предложили, на странице добавления фото поставил ту карту а аякс, продвижения у меня уже есть, даже поле какое то появилось, там же если маркер таскать, то цифры даже меняться будут) Извините я вас немного обманул, у меня не $OTHER2$ а $OTHER3$. А как можно узнать ИД поля?

Вот, на странице добавления фоток у меня такой код

Код: Выделить всё Развернуть
<script type="text/javascript" src="http://src.ucoz.net/src/jquery-1.6.1.js"></script>
<script type="text/javascript" src="http://src.ucoz.net/src/uwnd.js?2"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}

function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');

$('#puF4').val(latLng.lat()+','+latLng.lng()).attr('readonly','readonly');

}

function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}

function initialize() {
var latLng = new google.maps.LatLng(42.255819822727766, 18.891189521789556);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});

// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);

// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
};

// Onload handler to fire off the app.
/*google.maps.event.addDomListener(window, 'load', initialize);*/
</script><script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps-api-v3/api/js/24/2/intl/ru_ALL/common.js"></script><script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps-api-v3/api/js/24/2/intl/ru_ALL/util.js"></script><script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps-api-v3/api/js/24/2/intl/ru_ALL/geocoder.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps-api-v3/api/js/24/2/intl/ru_ALL/stats.js"></script></head>

<body id="dm1">
<div id="return">
</div>
<div id="exWrapp">
<div id="exContent">
<div class="exText">
<!--Start()-->
<style type="text/css">
#titus{height:35px;}
</style>

<input type="text" class="manFlOth3" size="35" id="puF4" style="width:100%;" name="other3'+i+'" maxlength="200"/>
<div style="display:none;" id="markerStatus">[i]Click and drag the marker.[/i]</div>
<p><a href="javascript://" onclick="new _uWnd('New3','Моё окно 3',900,560,{align:'center',autosize:1,autosizewidth:1,minh:500,oncontent:function(){initialize()}},'<div id=\'map_canvas\' style=\'border-bottom: 1px solid black;width:820px; height:500px\'></div><div id=\'titus\'><div id=\'info\'></div><div id=\'address\'></div></div>');return false;"><strong>Карта Google в uWnd. Demo</strong></a></p>
<!--//End()-->
</div>
</div>
</div>


</body></html>

На странице с полной фоткой у меня вот

Код: Выделить всё Развернуть
<div id="map_canvas" style="width: 400px; height: 250px"></div>
<script src="http://maps.google.com?file=api&amp;v=2.x" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
 var map = new GMap2(document.getElementById("map_canvas"));
 map.setCenter(new GLatLng(55.601407994227365, 37.718816226959234), 15);
 map.setMapType(G_HYBRID_MAP);
 map.setUIToDefault();

 var marker = new GMarker(new GLatLng($OTHER3$), 1);
 map.addOverlay(marker);
}
initialize();
</script>

Но видимо где-то я ошибся :(


Re: Google карта на сайте юКоз

Rln » » Сообщение:

Да у меня еще один глупый вопрос, в ПУ сайта Фотоальбомы - Настройки модуля я поставил галочку на "Включить uAPI для модуля". Для карты это нужно?)


Re: Google карта на сайте юКоз

Admin » » Сообщение:

Rln писал(а) › 12 мар 2016, 13:09:в ПУ сайта Фотоальбомы - Настройки модуля я поставил галочку на "Включить uAPI для модуля". Для карты это нужно?)

Нет, не нужно.

Rln писал(а) › 12 мар 2016, 12:58:Но видимо где-то я ошибся

Чуть позже гляну.



Re: Google карта на сайте юКоз

Admin » » Сообщение:

Rln писал(а) › 12 мар 2016, 12:58:А как можно узнать ИД поля?

Подсмотреть в исходном коде:

А как можно узнать ИД поля

соответственно и тут нужно изменить на:

Код: Выделить всё Развернуть
$('#phF11').val(latLng.lat()+','+latLng.lng()).attr('readonly','readonly');

а вот это вообще лишнее:

Код: Выделить всё Развернуть
<input type="text" class="manFlOth3" size="35" id="puF4" style="width:100%;" name="other3'+i+'" maxlength="200"/>

так как у вас и так должно выводится поле.

и это тожк лишнее:

plain Код: Выделить всё Развернуть
<body id="dm1">
<div id="return">
</div>
<div id="exWrapp">
<div id="exContent">
<div class="exText">
<!--Start()-->
<style type="text/css">
#titus{height:35px;}
</style>

<input type="text" class="manFlOth3" size="35" id="puF4" style="width:100%;" name="other3'+i+'" maxlength="200"/>

<div style="display:none;" id="markerStatus">Click and drag the marker.</div>
<p><a href="javascript://" onclick="new _uWnd('New3','Моё окно 3',900,560,{align:'center',autosize:1,autosizewidth:1,minh:500,oncontent:function(){initialize()}},'<div id=\'map_canvas\' style=\'border-bottom: 1px solid black;width:820px; height:500px\'></div><div id=\'titus\'><div id=\'info\'></div><div id=\'address\'></div></div>');return false;"><strong>Карта Google в uWnd. Demo</strong></a></p>
<!--//End()-->
</div>
</div>
</div>


</body></html>

Re: Google карта на сайте юКоз

Rln » » Сообщение:

Подсмотреть в исходном коде:

Да, посмотрел, с этим справился, теперь данные попадают в нужное мне поле. :) И всё же единственная проблемка остаётся, это то, что на странице с полной фоткой координаты карты так и не передаются на карту. Пробовал и так, и сяк, вот что получилось.

<div id="map_canvas" style="width: 400px; height: 250px"></div>
<script src="http://maps.google.com?file=api&amp;v=2.x" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(55.601407994227365, 37.718816226959234), 15);
map.setMapType(G_HYBRID_MAP);
map.setUIToDefault();

var marker = new GMarker(new GLatLng($OTHER3$), 1);
map.addOverlay(marker);
}
initialize();
</script>

Вот дополнительное поле 3 прописал, по умолчанию стоит карта Москвы, как вы уже написали выше. Может я код не грамотно написал? А можно еще вопросик, а скажите а куда то мне мой Апи кей вставлять нужно?:)

Добавлено спустя 6 минут 29 секунд:
То, что вы выделили красным я удалил ,спасибо что и на это указали :)

Добавлено спустя 18 минут 2 секунды:
Ой, блин, вот я слепой, не заметил, что нужно два раза прописать $OTHE3$

Вау, всё заработало!!!
Admin, спасибо вам огромное, что на меня потратили столько времени!!!)))


Re: Google карта на сайте юКоз

Admin » » Сообщение:

Rln писал(а) › 12 мар 2016, 14:21:А можно еще вопросик, а скажите а куда то мне мой Апи кей вставлять нужно?:)

В сам скрипт:

Код: Выделить всё Развернуть
<script src="http://maps.google.com?file=api&amp;v=2.x&amp;key=YOUR_API_KEY" type="text/javascript"></script>

Не помню сейчас уже точно, но что-то там не работало без него.

Rln писал(а) › 12 мар 2016, 14:21:Вау, всё заработало!!!

Ну вот и замечательно)
Оптимизируйте теперь ) Google Maps JavaScript API

ps

Rln писал(а) › 12 мар 2016, 12:58:Вот получил Api key, у меня он такой AIzaSyADx69yN4OtCy--clIJeDKyBHKebzJgnqs, на всякий

Ключ привязан к домену) и не будет работать на другом сайте.


Re: Google карта на сайте юКоз

Rln » » Сообщение:

<script src="http://maps.google.com?file=api&amp;v=2.x&amp;key=AIzaSyADx69yN4OtCy--clIJeDKyBHKebzJgnqs" type="text/javascript"></script>

Вставил на страницу с полной фоткой всё как вы сказали. Без него тоже работало всё, но без него не работает просмотр улиц в живую)

Ну вот и замечательно)
Оптимизируйте теперь ) Google Maps JavaScript API

Да конечно буду всё это изучать,что-бы понять что есть что. Еще раз вам спасибо!!!

Ключ привязан к домену) и не будет работать на другом сайте.

Вопрос, а если я захочу сменить домен, мне нужно будет на гугловском сайте что-то менять?


След.



Похожие темыКомментарии ПросмотрыПоследнее сообщение
0366Базы данных на uCoz. Использование ...
Сообщение от: Admin
0339Истек период сессии. Обновить/продл...
Сообщение от: Admin
41148Класс _uSuggestList
Сообщение от: Admin
0323Стоп спам. Регистрация на юкоз с пр...
Сообщение от: Admin
01372Как узнать номер поста на форуме юк...
Сообщение от: Admin