Объявления с поддержкой google map

» WordPress » Ads-WordPress » Ads Wordpress 3.x » Объявления с поддержкой google map

Объявления с поддержкой google map

Чтобы добавить подержку google map в сои объявления для начала нам необходимо создать форму ввода где пользователь сможет щелкнув по карте указать координаты нужного места.
Сначала определим константы необходимые для работы карты и разрешим плагину сохранять поля ads_latitude и ads_longitude соответственно широта и долгота. Значит в ads_config.php пишем :
GOOGLE_MAP_KEY берем тут http://code.google.com/intl/ru-RU/apis/maps/signup.html

//  GOOGLE MAP
define('GOOGLE_MAP_KEY', 'ABQIAAAAKebmieYIlVKyikl93uLGwRRJYNhc20Ig4gFg7VwoZ42N0BQrsNIbakGMxZ2VVsh5t8XRGa3y7w');  
// ниже указать широту и долготу вашего города  где центровать карту для выбора соего место расположения
define('GOOGLE_MAP_LAT', 46.3055); 
define('GOOGLE_MAP_LON', 30.662245);
define('GOOGLE_MAP_ZOOM', 13);   //   масштаб карты в форме ввода
define('GOOGLE_MAP_POST_ZOOM', 15);  //  масштаб карты в готовом объявлении
$ads_config['ads_fields_form']	= array( 'ads_latitude', 'ads_longitude', ... );   // !добавить в массив  к другим полям если они есть

// GOOGLE MAP

define('GOOGLE_MAP_KEY', 'ABQIAAAAKebmieYIlVKyikl93uLGwRRJYNhc20Ig4gFg7VwoZ42N0BQrsNIbakGMxZ2VVsh5t8XRGa3y7w');

// ниже указать широту и долготу вашего города где центровать карту для выбора соего место расположения

define('GOOGLE_MAP_LAT', 46.3055);

define('GOOGLE_MAP_LON', 30.662245);

define('GOOGLE_MAP_ZOOM', 13); // масштаб карты в форме ввода

define('GOOGLE_MAP_POST_ZOOM', 15); // масштаб карты в готовом объявлении

$ads_config['ads_fields_form'] = array( 'ads_latitude', 'ads_longitude', ... ); // !добавить в массив к другим полям если они есть

Теперь самое сложное – добавляем элемент выбора координат в нашу форму ввода

<script src="http://maps.google.com/maps?file=api&v=2&key=<?=GOOGLE_MAP_KEY?>"  type="text/javascript"></script>

<script type="text/javascript">
	function updatedLatLngFields()
	{
		var latField = document.getElementById("wp_geo_latitude");
		var lngField = document.getElementById("wp_geo_longitude");
		if (latField.value == '' && lngField.value == '')
		{
			marker.hide();
		}
		else
		{
			var point = new GLatLng(latField.value, lngField.value);
			map.setCenter(point);
			marker.setPoint(point);
			marker.show();
		}
	}

	function clearLatLngFields()
	{
		var searchField = document.getElementById("wp_geo_search");
		var latField = document.getElementById("wp_geo_latitude");
		var lngField = document.getElementById("wp_geo_longitude");
		searchField.value = '';
		latField.value = '';
		lngField.value = '';
		marker.hide();
	}

	function wp_geo_showAddress()
	{
		var searchField = document.getElementById("wp_geo_search");
		var latField = document.getElementById("wp_geo_latitude");
		var lngField = document.getElementById("wp_geo_longitude");
		var address = searchField.value;
		if (geocoder)
		{
			geocoder.getLatLng(
				address,
				function(point)
				{
					if (!point)
					{
						alert(address + " not found");
					}
					else
					{
						map.setCenter(point);
						marker.setPoint(point);
						marker.show();
						latField.value = point.lat();
						lngField.value = point.lng();
					}
				}
			);
		}
	}

    function MyApplication() {
      if (GBrowserIsCompatible() && document.getElementById("wp_geo_map"))
		{
			map = new GMap2(document.getElementById("wp_geo_map"));
			var center = new GLatLng(<?=GOOGLE_MAP_LAT?>,<?=GOOGLE_MAP_LON?> );
			map.setCenter(center, <?=GOOGLE_MAP_ZOOM?>);
			map.addMapType(G_PHYSICAL_MAP);

			// Map Controls
			var mapTypeControl = new GMapTypeControl();
			map.addControl(new GLargeMapControl());
			map.addControl(mapTypeControl);

			<?if(IS_MOBILE==ture):?>
            map.setMapType(G_NORMAL_MAP);
            <?else:?>
			map.setMapType(G_HYBRID_MAP);
            <?endif;?>

			geocoder = new GClientGeocoder();

			GEvent.addListener(map, "click", function(overlay, latlng) {
				var latField = document.getElementById("wp_geo_latitude");
				var lngField = document.getElementById("wp_geo_longitude");
				latField.value = latlng.lat();
				lngField.value = latlng.lng();
				marker.setPoint(latlng);
				marker.show();
			});

			GEvent.addListener(map, "zoomend", function(oldLevel, newLevel) {
				map.setCenter(marker.getLatLng());
			});

			marker = new GMarker(center, {draggable: true});

			GEvent.addListener(marker, "dragstart", function() {
				map.closeInfoWindow();
			});

			GEvent.addListener(marker, "dragend", function() {
				var coords = marker.getLatLng();
				var latField = document.getElementById("wp_geo_latitude");
				var lngField = document.getElementById("wp_geo_longitude");
				latField.value = coords.lat();
				lngField.value = coords.lng();
			});

			map.addOverlay(marker);
			var latField = document.getElementById("wp_geo_latitude");
			var lngField = document.getElementById("wp_geo_longitude");

			marker.hide();

		}
    }

    window.onload = function () {
      var application = new MyApplication();
    }

</script>


<table cellpadding="3" cellspacing="5" class="ads_form" id="ads_google_map">
<tr>
<td align="right" colspan="2">
<h3>Поставьте отметку на карте!!!</h3>
<font size="-1" >* если хотите скрыть точный адрес - поставьте отметку отметку на ближайшей дороге или перекрестке</font>
</td>
</tr>
           <tr>
				<th scope="row">Поиск места<br /><span style="font-weight:normal;">(город, postcode или адрес)</br> <b>enter не нажимать!</b></span></th>
				<td><input name="wp_geo_search" type="text" size="45" id="wp_geo_search" value="" /> <span class="submit"><input type="button" id="wp_geo_search_button" name="wp_geo_search_button" value="Сюда щелкнуть мышкой" onclick="wp_geo_showAddress();" /></span></td>
			</tr>
			<tr>
				<td colspan="2">
				<div id="wp_geo_map" style="height:300px; width:100%; padding:0px; margin:0px;">
					Loading Google map...
				</div>
				</td>
			</tr>
			<tr>
				<th scope="row">Широта, Долгота<br /><a href="#" onclick="clearLatLngFields(); return false;">Отчистить</a></th>
				<td><input name="ads_latitude" type="text" size="25" id="wp_geo_latitude" /> <input name="ads_longitude" type="text" size="25" id="wp_geo_longitude"/></td>
			</tr>
</table>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

function updatedLatLngFields()

{

var latField = document.getElementById("wp_geo_latitude");

var lngField = document.getElementById("wp_geo_longitude");

if (latField.value == '' && lngField.value == '')

{

marker.hide();

}

else

{

var point = new GLatLng(latField.value, lngField.value);

map.setCenter(point);

marker.setPoint(point);

marker.show();

}

function clearLatLngFields()

{

var searchField = document.getElementById("wp_geo_search");

var latField = document.getElementById("wp_geo_latitude");

var lngField = document.getElementById("wp_geo_longitude");

searchField.value = '';

latField.value = '';

lngField.value = '';

marker.hide();

}

function wp_geo_showAddress()

{

var searchField = document.getElementById("wp_geo_search");

var latField = document.getElementById("wp_geo_latitude");

var lngField = document.getElementById("wp_geo_longitude");

var address = searchField.value;

if (geocoder)

{

geocoder.getLatLng(

address,

function(point)

{

if (!point)

{

alert(address + " not found");

}

else

{

map.setCenter(point);

marker.setPoint(point);

marker.show();

latField.value = point.lat();

lngField.value = point.lng();

}

);

}

function MyApplication() {

if (GBrowserIsCompatible() && document.getElementById("wp_geo_map"))

{

map = new GMap2(document.getElementById("wp_geo_map"));

var center = new GLatLng(<?=GOOGLE_MAP_LAT?>,<?=GOOGLE_MAP_LON?> );

map.setCenter(center, <?=GOOGLE_MAP_ZOOM?>);

map.addMapType(G_PHYSICAL_MAP);

// Map Controls

var mapTypeControl = new GMapTypeControl();

map.addControl(new GLargeMapControl());

map.addControl(mapTypeControl);

<?if(IS_MOBILE==ture):?>

map.setMapType(G_NORMAL_MAP);

<?else:?>

map.setMapType(G_HYBRID_MAP);

<?endif;?>

geocoder = new GClientGeocoder();

GEvent.addListener(map, "click", function(overlay, latlng) {

var latField = document.getElementById("wp_geo_latitude");

var lngField = document.getElementById("wp_geo_longitude");

latField.value = latlng.lat();

lngField.value = latlng.lng();

marker.setPoint(latlng);

marker.show();

});

GEvent.addListener(map, "zoomend", function(oldLevel, newLevel) {

map.setCenter(marker.getLatLng());

});

marker = new GMarker(center, {draggable: true});

GEvent.addListener(marker, "dragstart", function() {

map.closeInfoWindow();

});

GEvent.addListener(marker, "dragend", function() {

var coords = marker.getLatLng();

var latField = document.getElementById("wp_geo_latitude");

var lngField = document.getElementById("wp_geo_longitude");

latField.value = coords.lat();

lngField.value = coords.lng();

});

map.addOverlay(marker);

var latField = document.getElementById("wp_geo_latitude");

var lngField = document.getElementById("wp_geo_longitude");

marker.hide();

}

window.onload = function () {

var application = new MyApplication();

}

</script>

<tr>

<h3>Поставьте отметку на карте!!!</h3>

<font size="-1" >* если хотите скрыть точный адрес - поставьте отметку отметку на ближайшей дороге или перекрестке</font>

</td>

</tr>

<tr>

<th scope="row">Поиск места<br /><span style="font-weight:normal;">(город, postcode или адрес)</br> <b>enter не нажимать!</b></span></th>

</tr>

<tr>

Loading Google map...

</div>

</td>

</tr>

<tr>

<th scope="row">Широта, Долгота<br /><a href="#" onclick="clearLatLngFields(); return false;">Отчистить</a></th>

</tr>

</table>

Теперь переходим к отображению обявлений вместе с google картой
здесь все гораздо проще: проверяем наличие в объявлении полей широты и долготы если они заданы то выводим кусок карты с отметкой:

      <div style="clear:both"></div>
      <?if($ads_latitude AND $ads_longitude):?>
        <a name="Gmap"><div style="clear:both"></div></a>
        <script src="http://maps.google.com/maps?file=api&v=2&key=<?=GOOGLE_MAP_KEY?>"  type="text/javascript"></script>
        <script type="text/javascript">
            function MyApplication() {
              if (GBrowserIsCompatible() && document.getElementById("wp_geo_map"))
        		{
        			map = new GMap2(document.getElementById("wp_geo_map"));
        			var center = new GLatLng(<?=$ads_latitude.','.$ads_longitude?> );
        			map.setCenter(center, <?=GOOGLE_MAP_POST_ZOOM?>);
         			map.addMapType(G_PHYSICAL_MAP);
         			// Map Controls
        			var mapTypeControl = new GMapTypeControl();
        			map.addControl(new GLargeMapControl());
        			map.addControl(mapTypeControl);
                    <?if(IS_MOBILE==ture):?>
                    map.setMapType(G_NORMAL_MAP);
                    <?else:?>
        			map.setMapType(G_HYBRID_MAP);
                    <?endif;?>
        			geocoder = new GClientGeocoder();

                    var latlng = new GLatLng(<?=$ads_latitude.','.$ads_longitude?>);
                    map.addOverlay(new GMarker(latlng));
        		}
            }

            window.onload = function () {
              var application = new MyApplication();
            }

        </script>
                <div id="wp_geo_map" style="height:300px; width:100%; padding:0px; margin:0px;">
        			Loading Google map...
        		</div>
        <?endif;?>
      <div style="clear:both"></div>

<?if($ads_latitude AND $ads_longitude):?>

function MyApplication() {

if (GBrowserIsCompatible() && document.getElementById("wp_geo_map"))

{

map = new GMap2(document.getElementById("wp_geo_map"));

var center = new GLatLng(<?=$ads_latitude.','.$ads_longitude?> );

map.setCenter(center, <?=GOOGLE_MAP_POST_ZOOM?>);

map.addMapType(G_PHYSICAL_MAP);

// Map Controls

var mapTypeControl = new GMapTypeControl();

map.addControl(new GLargeMapControl());

map.addControl(mapTypeControl);

<?if(IS_MOBILE==ture):?>

map.setMapType(G_NORMAL_MAP);

<?else:?>

map.setMapType(G_HYBRID_MAP);

<?endif;?>

geocoder = new GClientGeocoder();

var latlng = new GLatLng(<?=$ads_latitude.','.$ads_longitude?>);

map.addOverlay(new GMarker(latlng));

}

window.onload = function () {

var application = new MyApplication();

}

</script>

Loading Google map...

</div>

<?endif;?>

Дабы укоротить код формы ввода я вставляю карту отдельным файлом

<?php include($ads_config['dir_template']."/form_google_map.inc.php");?>

1	<?php include($ads_config['dir_template']."/form_google_map.inc.php");?>

Вот он сам файл — form_google_map.inc

Ads Wordpress 3.x, WordPress / admin / 24 августа , 2011 / просмотров: 3 603 / 11

Tags: google map

«« Работа с meta полями (custom fields) и картинками в WordPress ускоряемся в 10 раз.

Пример формы поиска для ads-wordpress »»

Комментарии 11 к “Объявления с поддержкой google map”

Лента комментариев

Виктор:

14 ноября 2011 в 19:55

Бодрого времени суток!
Подскажите пожалуйста где рыть файл ads_config.php перекопал всю папку c плагином ads-wordpress но так и не нашел ((

с уважением!

Ответить
admin:

15 ноября 2011 в 18:22

нужно его создать ! это ваши местные настройки

Ответить
Виктор:

15 ноября 2011 в 20:35

Не могли бы вы подробнее описать процедуру или прикрутить – это хозяйство к моей доске? разумеется не безвозмездно!

Ответить
Ирина:

18 ноября 2011 в 11:55

Очень хотелось бы взлянуть на такие объявления в деле,поделитесь пожалуйста примерами.

Ответить
- admin:
  
  18 ноября 2011 в 15:16
  
  делюсь
  http://irent.com.ua/?p=16792 готовое объявление
  http://irent.com.ua/?page_id=56&nautic_s=&ads_basecat=100 форма ввода с картой
  
  Ответить
Ирина:

19 ноября 2011 в 05:42

спасибо, пример и сайт мне очень нравится

Ответить
AlexAlex:

20 января 2012 в 11:24

Добрый день.
А Вы не пробовали объединить все маркеры в одну базу и выводить их все сразу на карте в виде ссылок на посты? Мне бы это очень пригодилось.

Ответить
- admin:
  
  20 января 2012 в 14:01
  
  была мысля такая, но до реализации не дошло пока
  
  Ответить
gena:

16 марта 2012 в 06:46

А данные карты в какой таблице у вас хранятся? Чтобы вывести все на одну карту надо широту, долготу, можно заголовок и описание, тогда можно попробовать. Я как-то экспериментировал

Ответить
- admin:
  
  16 марта 2012 в 11:18
  
  поля $ads_latitude, $ads_longitude хранятся в таблице wp_options так как это обычные мета поля WordPress
  
  Ответить
  - admin:
    
    16 марта 2012 в 11:21
    
    кстати эта версия google map устарела она работать не будет
    http://wp.od.ua/?p=835 вот код на основе нового API 3 как использовать примеры там же
    
    Ответить

Ads-Wordpress, Whale-kit

Объявления с поддержкой google map

Комментарии 11 к “Объявления с поддержкой google map”

Добавить комментарий Отменить ответ

WK_terms – рубрики

WK_posts

Примеры сайтов

Мета

Свежие комментарии