Объявления с поддержкой 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 669 /

Tags: google map

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

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

Ads-Wordpress, Whale-kit

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

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

WK_terms – рубрики

WK_posts

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

Мета

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