Bir önceki yazı da Facebook & Twitter benzeri sayfalama uygulamasını hazırlamıştık. Tepkilerin olumlu gerçekleşmesi üzerine Jquery ile destekli uygulamaları WordPress yapımız için kullanmak ve daha akıcı olmasını sağlamak için farklı hooklar denemek istedim.
Öncelikle gerekli olan dosyaları sisteminizin temasına dahil edin.
<script></script>
<script></script>
<script></script>Burada dikkat edilmesi gereken husus Google Maps servisinden bir api key almanız. Gerekli kaynak bu adreste.
Ardından alakalı jquery eklentisini buradan indirin. Jquery’nin ben 1.3 sürümünü kullandım ama siz dilediğiniz sürümü kullanabilirsiniz. Kurulum için bu adımı hallettikten sonra konfigürasyon ayarları için diğer sayfaya geçebilirsiniz..
- Google Maps WordPress için, konfigürasyon ayarları –
Bir önceki sayfada jquery kurulumunu yaptıktan sonra, fonksiyon ile kısa kod yapımızı oluşturalım. Şu şekilde olacak:
function Poz_Ft_72_GoogleApiSiteMap( $atts, $content = null ) {
extract( shortcode_atts( array(
'koordinat1' => '',
'koordinat2' => ''
), $atts ) );
return "
<script>
$(document).ready(function() {
$('#map').goMap({
width: 400px,
height: 400px,
address : '".$content."',
latitude : ".$koordinat1.",
longitude : ".$koordinat2.",
zoom : 15
}); // PozitifMapCreate
}); // ReadyForMap
</script>
";
}
add_shortcode('PozMap', 'Poz_Ft_72_GoogleApiSiteMap');Bu adımdan sonra, artık yapımızı yalnızca yazımızın içerisinde nasıl göstereceğimizden bahsetmek gerekecek ;) Farkettiğiniz üzere üç farklı parametre belirledik ;
[*]Adres
[*]Koordinat 1
[*]Koordinat 2
Kod kullanımı için son sayfaya baktığımızda artık sizlerde Google Api ile Google Map özelliğini eklentisiz bu ipucu sayesinde kullanabileceksiniz.
Kullanımı gayet basit. Yazımızda göstermek istediğimiz alana ;
[PozMap koordinat1="latitude değeriniz" koordinat2="longitude değeriniz"]Adress[/PozMap]Google Map ile artık lokasyon için fazla kod bilgisine ihtiyaç duymadan, eklenti kullanmadan sisteminizi fazla yormadan tanımlamalar yapabileceksiniz. Mutlu kullanımlar.
Ek olarak bug için teşekkürler @Cüneyt
Happy Coding ;)
Kaynak : http://fatihtoprak.com/wordpress-yazilari-icerisinde-google-map-kullanarak-lokasyon-gostermek-eklentisiz-hook-ipucu-72.html
