Чтобы добавить подержку google map в сои объявления для начала нам необходимо создать форму ввода где пользователь сможет щелкнув по карте указать координаты нужного места.
Сначала определим константы необходимые для работы карты и разрешим плагину сохранять поля ads_latitude и ads_longitude соответственно широта и долгота. Значит в ads_config.php пишем :
GOOGLE_MAP_KEY берем тут http://code.google.com/intl/ru-RU/apis/maps/signup.html
1 2 3 4 5 6 7 8 |
// 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', ... ); // !добавить в массив к другим полям если они есть |
Теперь самое сложное – добавляем элемент выбора координат в нашу форму ввода
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 |
<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> |
Теперь переходим к отображению обявлений вместе с google картой
здесь все гораздо проще: проверяем наличие в объявлении полей широты и долготы если они заданы то выводим кусок карты с отметкой:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<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> |
Дабы укоротить код формы ввода я вставляю карту отдельным файлом
1 |
<?php include($ads_config['dir_template']."/form_google_map.inc.php");?> |
Вот он сам файл — form_google_map.inc