Карта Google в uCoz - Страница 4 - Скрипты и коды для юкоз - Форум аццкого кодера
Фильтр по:
  

Страница 4 из 4«1234
Модератор форума: likbezz 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Карта Google в uCoz (Реализация внедрения GoogleMap на uCoz сайт)
Карта Google в uCoz
Дата: Четверг, 03.10.2013, 20:09 |
allmonte
Сержант
Группа: Проверенные
Сообщений: 22
Награды: 0
Репутация: 1
Статус: Offline


Добрый день, сдую пыль с темы, у меня все получилось, добавить карту, добавить метку с возможностью передвижения её в нужное место, передачу координат с записью в поле с обратным выведением на карту из поля... вопрос остался по всплывающему окну, как сделать редрав карты ?
Мой код:
Код
<style>
  #mapCanvas {
  width: 720px;
  height: 400px;
  float: left;
  }
  #infoPanel {
  float: left;
  margin-left: 10px;
  }
  #infoPanel div {
  margin-bottom: 5px;
  }
  </style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ru"></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('mapCanvas'), {
  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>

<div id="mapCanvas"></div><div id="infoPanel"><b>Статус маркера:</b>
  <div id="markerStatus"><i>Кликните и передвиньте маркер</i></div>
  <b>Текущая позиция:</b>
  <div id="info"></div>
  <b>Адрес:</b>
  <div id="address"></div>
  </div>


Подскажите куда дальше двигаться...


 
Дата: Четверг, 03.10.2013, 22:20 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9092
Награды: 23
Репутация: 457
Статус: Unknown


allmonte,
Цитата (allmonte, Чт, 03.10.2013, 20:09:32)
вопрос остался по всплывающему окну, как сделать редрав карты ?

Освежите плз что за окно? и какой функционал накладывается на него?


 
Дата: Пятница, 04.10.2013, 14:53 |
allmonte
Сержант
Группа: Проверенные
Сообщений: 22
Награды: 0
Репутация: 1
Статус: Offline


Цитата (likbezz, Чт, 03.10.2013, 23:20:28)
Освежите плз что за окно? и какой функционал накладывается на него?


ajax окно с картой гугль, добавляю на страницу Добавления/редактирования материала в каталог статей карту гугль с установкой маркеров и передачей в поле.
нужно див с картой #mapCanvas, вывести во всплывающее окно, только вот окно выходит пустым, подозреваю что дело в инитализации..
пробовал подключать fancybox уже, но как то не ахти получается...

Добавлено (04.10.2013, 14:53)
---------------------------------------------
Вобщем стандартными лайтбоксами и увиндами не вышло, пришлось подключить prettyPhoto, теперь все работает:
Скрипт для формы добавления/редактирования статей (для другого модуля нужно просто поменять имя поля "#puF4") с активированным полем "Имя автора материала" (можете ставить любое) туда автоматически вписываются долгота и широта (можно еще добавить зум и адрес), по умолчанию при добавлении матерала и нажатию по ссылке всплывает карта с центром в черногории и зумом 10 (42.255819822727766, 18.891189521789556) это можно поменять в скрипте на ваш центр и зум. Дальше переставляете маркер куда нужно в окне с картой отображаются координаты и адрес, координаты заносятся сразу в поле(у меня это имя автора), адресу также можно назначить либо свое поле либо вписывать в поле с координатами через разделитель(у меня запятая). При редактировании поле не сбрасывается, карта центруется по старым координатам, дальше также можно передвигать маркер. Вывод на странице с материалом через стандартную карту или также во всплывающем окне с подставлением значения поля(автор материала), не забывайте только что оно числовое с запятой между широтой и долготой, в latLng.

Код


     <style>
     #info {
     float: left;
     margin: 10px;
     font: 12px 'Tahoma';
     }
     #address {
      float: right;
     margin: 10px;
     font: 12px 'Tahoma';    
   }
     .pp_content {
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
     </style>

<link rel="stylesheet" href="/JS/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />

<script type="text/javascript" charset="utf-8" src="/JS/jquery.prettyPhoto.js"></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 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());
     });
};

// вывод
google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function(){               
        $("a[rel^='prettyPhoto']").prettyPhoto({
            opacity: 0.1,
            show_title: false,
            deeplinking: false,
            social_tools: '',
            gallery_markup: '',
            custom_markup: '<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>',
            changepicturecallback: function(){ initialize(); }
        });
});

</script>
         

<a href="#?custom=true&width=820&height=500" title="" rel="prettyPhoto">Открыть карту Google</a>

     <div style="display:none;" id="markerStatus"><i>Кликните и передвигайте маркер</i></div>


Не забудьте подключить скрипт jquery.prettyPhoto.js и стили prettyPhoto.css я брал отсюда prettyPhoto

ВРЕМЕННЫЙ ПРИМЕР (Временный так как это страница для тестов и она постоянно меняется, оригинал стоит в форме, доступ к сожалению дать не могу).


Сообщение отредактировал allmonte - Пятница, 04.10.2013, 16:05
 
Дата: Суббота, 05.10.2013, 07:09 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9092
Награды: 23
Репутация: 457
Статус: Unknown


allmonte,
Цитата (allmonte, Пт, 04.10.2013, 14:53:51)
Вобщем стандартными лайтбоксами и увиндами не вышло, пришлось подключить prettyPhoto, теперь все работает:

Ну .. вот и замечательно)

А у меня вот пример того же самого но в юВинд:

Карта Google в uWnd uCoz

ps
А в вашем примере вот эта строчка лишняя:
Код
google.maps.event.addDomListener(window, 'load', initialize);


 
Дата: Суббота, 05.10.2013, 20:20 |
allmonte
Сержант
Группа: Проверенные
Сообщений: 22
Награды: 0
Репутация: 1
Статус: Offline


Цитата (likbezz, Сб, 05.10.2013, 08:09:01)
Ну .. вот и замечательно)
А у меня вот пример того же самого но в юВинд:
ps
А в вашем примере вот эта строчка лишняя:


Супер, вроде все также делал, а окно пустым вылезало...а строчка осталась на тестовой просто в дим когда выводил.
Спасибо. Теперь лишних скриптов и стилей не буду подгружать.


 
Дата: Пятница, 11.03.2016, 23:21 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9092
Награды: 23
Репутация: 457
Статус: Unknown


Продолжение темы тут: Карта Google в uCoz (Реализация внедрения GoogleMap на uCoz сайт)

 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Карта Google в uCoz (Реализация внедрения GoogleMap на uCoz сайт)
Страница 4 из 4«1234
Поиск: