Google Haritalar kodunu harita üzerine tıklayarak input alanına kolayca aktarabileceğiniz güzel bir örnek. Sitenize kolayca adapte edebilirsiniz. Yeni Google Haritalar gözlerimize estetik açıdan daha çekici geliyor, ancak birçok özellik geride kaldı. Google, aşamalı olarak, önceki sürümde mevcut olan en yararlı araçlardan bazılarını uyguluyor. Önceki sürümde, bir konumun ondalık derece formatında (DDD: 40.604036, -8.665247) koordinatlarını bulmak kolay oluyordu, ancak bu seçenek yeni Google Haritalar'da henüz uygulanmadı. Yazı yazarken koordinatları bulmak için tek yol URL aracılığıyla verilmiştir. Haritada bir tıklama ile sol üst köşedeki bir kutu görünür ve GPS koordinatları gösterilir. Bu koordinatlara bir tıklama ile sayfanın URL'si değiştirilir ve DDD koordinatları URL'nin sonunda bulunabilir. Aşağıdaki örnek, GPS koordinatlarını tıkladıktan sonra bir konumun tam adresini gösterir. https://www.google.com/maps/preview#!q=40%C2%B0+38.396'%2C+-8%C2%B0+36.570'&data=!4m14!2m13!1m12!3m8!1m3!1d10723!2d-8.6007929!3d40.6367078!3m2!1i1366!2i680!4f13.1!4m2!3d40.6399333!4d-8.6095 Google Maps API ile, kendi koordinat arama sistemimizi ondalık derece formatında kolayca oluşturabilirsiniz. Buradan çalışan demo sayfasına göz gezdirebilirsiniz. Şubat ayı sonlarında Google Haritalar ekibi harita koordinatlarını elde etmek için haritayı sağ tıklama olanağını geri getirdi. Böylece, enlem ve boylamın yanı sıra o yere veya bölgeye adres tarifi almak da mümkün. Enlem ve boylam bulucunun uygulanması Google Haritalar API'sıyla "enlem boylamı bulun" sistemini uygulamak çok basittir. İlk önce, haritaya bir tıklama tespit eden etkinliğin faydalanılması ve haritada bir işaretleyici bulunması gerekir. Aynı zamanda enlem ve boylam koordinatlarını sayfanın üst kısmında bulunan metin kutularına depolarız. Aşağıdaki kod, haritayı başlatmanın ve haritadaki bir tıklamanın nasıl algılanacağını göstermektedir. // required variables var map; var marker; function initialize() { var mapOptions = { center: new google.maps.LatLng(40.601203,-8.668173), zoom: 9, mapTypeId: 'roadmap' }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // This event detects a click on the map google.maps.event.addListener(map, "click", function(event) { // Get lat lng coordinates // This method returns the position of the click on the map var lat = event.latLng.lat().toFixed(6); var lng = event.latLng.lng().toFixed(6); // Call createMarker() function to create a marker on the map createMarker(lat, lng); // getCoords() function inserts lat and lng values into text boxes getCoords(lat, lng); }); } google.maps.event.addDomListener(window, 'load', initialize); Şimdi, işaretleyiciyi koordinatları almak için sürükleyerek alınmasını sağlayan kodu inceleyelim. // Function that creates the marker function createMarker(lat, lng) { // The purpose is to create a single marker, so // check if there is already a marker on the map. // With a new click on the map the previous // marker is removed and a new one is created. // If the marker variable contains a value if (marker) { // remove that marker from the map marker.setMap(null); // empty marker variable marker = ""; } // Set marker variable with new location marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), draggable: true, // Set draggable option as true map: map }); // This event detects the drag movement of the marker. // The event is fired when left button is released. google.maps.event.addListener(marker, 'dragend', function() { // Updates lat and lng position of the marker. marker.position = marker.getPosition(); // Get lat and lng coordinates. var lat = marker.position.lat().toFixed(6); var lng = marker.position.lng().toFixed(6); // Update lat and lng values into text boxes. getCoords(lat, lng); }); } Metin kutularının enlem ve boylam değerlerini güncellemek aşağıdaki koddan yararlanılır. // This function updates text boxes values. function getCoords(lat, lng) { // Reference input html element with id=”lat”. var coords_lat = document.getElementById('lat'); // Update latitude text box. coords_lat.value = lat; // Reference input html element with id=”lng”. var coords_lng = document.getElementById('lng'); // Update longitude text box. coords_lng.value = lng; } Bu küçük Google Haritalar koordinat saptama sisteminin kullanışlılığı sınırlıdır. Bununla birlikte, yöntemler daha karmaşık sistemlere adapte edilebilir ve API ile çok ilginç bir etkileşime olanak verebilir. Haritanın sitenizde çalışabilmesi için Google Maps Api Key almanız gerekir. Bununla alakalı yazıma göz atabilirsiniz.
