Объявления с поддержкой 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’, … ); // !добавить в массив к другим полям если они есть

12345678 //  GOOGLE MAPdefine(‘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>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 <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 картой
здесь все гораздо проще: проверяем наличие в объявлении полей широты и долготы если они заданы то выводим кусок карты с отметкой:

<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>

1234567891011121314151617181920212223242526272829303132333435363738       <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>

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

<?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