Genel bakış
Google Haritalar Platformu; web (JS, TS), Android ve iOS'te kullanılabilir. Ayrıca yerler, yol tarifleri ve mesafeler hakkında bilgi edinmek için web hizmetleri API'leri sunar. Bu kılavuzdaki örnekler bir platform için yazılmıştır ancak diğer platformlarda uygulanması için belge bağlantıları sağlanmıştır.
Google Cloud Console'daki Hızlı Oluşturucu sayesinde, hızlı bir şekilde bulucu oluşturabilirsiniz. Bu sayede, İşletme Profili girişlerini içe aktarabilir ve üçüncü taraf sağlayıcılardan randevu rezervasyon bağlantılarını otomatik olarak yerleştirebilirsiniz. Etkileşimli kullanıcı arayüzü, dakikalar içinde kod oluşturmanızı ve Cloud'a dağıtmanızı sağlar.
Kullanıcılarınız ürün ve hizmetleri internette araştırmak ve ziyaret etmek, randevu almak veya sipariş almak için en iyi ve en uygun yeri bulmak ister. Konumunuza mümkün olduğunca hızlı ulaşmak isterler ve siz de onlara fiziksel konumlarınıza yapılan ziyaretleri artıran, kullanıcı memnuniyetini artıran ve destek aramalarını azaltan zengin online deneyimler sunmak istiyorsunuz. Ayrıca, müşterilerinizin konumunuzu bulup bulamayacağını belirlemek için bulucunuzun başarısını ölçmek ve nerelerde iyileştirme yapabileceğinizi anlamak istiyorsunuz.
Locator Plus, bu konuda sağladığımız rehberlik ve özelleştirme ipuçlarıyla mükemmel konum bulma aracı kullanıcı deneyimleri oluşturmak için Google Haritalar Platformu API'lerinin ideal kombinasyonu olarak bunu öneriyoruz. Bu uygulamaları izleyerek kullanıcıların konumunuzu haritada bulmalarına, karar vermek için ihtiyaç duydukları ayrıntılı bilgileri görmelerine ve araba, bisiklet, yaya veya toplu taşıma kullanırken yol tarifi vermelerine yardımcı olabilirsiniz.
Locator Plus kullanıcıları, verilerinizi analiz edip bunlardan analizler elde etmenizi sağlayan analiz kontrol paneli sayesinde, tüketicilerin mağaza bulma aracınızla ne kadar iyi etkileşim kurduğunu net bir şekilde görebilir. Bu rapora erişmek için konsolun Etkileşim Raporları bölümüne gidin. Bu rapor hakkında daha fazla bilgi için Etkileşim raporları bölümüne bakın.
Aşağıdaki şemada, Locator Plus'ın uygulanmasıyla ilişkili temel API'ler gösterilmektedir. Şemada ayrıca, kullanıcılara mümkün olan en iyi ve eksiksiz bilgi kümesini sağlamak için Yer Ayrıntıları ile birleştirebileceğiniz, kendi konum verilerinizin bulunduğu bir veritabanı da gösterilir. (Büyütmek için tıklayın.)
![Web tarayıcısı, diyagramın sol tarafında Yer Ayrıntıları pop-up'ının yer aldığı bir harita gösterir.
Diyagramın sağ tarafında, farklı işlevler sunan API'lerin bir listesi yer almaktadır:
Konum görselleştirme ve içerik için Maps JavaScript API, harita stili, harita işaretçileri, özel Street View
ve rotaları görüntüleme. Adres tamamlama ve önceden yazma işlevi için Otomatik Tamamlama'yı yerleştirin. Adres konumu için Yerler ve Coğrafi Kodlama API'leri. Mesafe Matrisi API'si ile konumları mesafe, süre ve ulaşım şekline göre sıralayabilirsiniz. Seyahat süresine ve ulaşım moduna göre bir rota göstermek için Directions API.
Diyagramın ortasında, özel konum verilerini temsil eden bir veri deposu simgesi bir web sunucusu simgesine doğru gidiyor ve web sunucusu ile veri deposu arasında veri okuma ve yazma işlemini belirten çift başlı bir ok yer alıyor. Web tarayıcısı ile API'ler arasındaki oklar, aracı olarak web sunucusundan geçer.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/locator_arch_diagram.png?authuser=7&hl=tr)
API'ler etkinleştiriliyor
Bu uygulamaları uygulamak için Google Cloud Console'da aşağıdaki API'leri etkinleştirmeniz gerekir: Kurulum hakkında daha fazla bilgi için Google Haritalar Platformu'nu kullanmaya başlama bölümüne bakın.Uygulama bölümleri
Aşağıda, bu konuda ele alacağımız uygulamalar ve özelleştirmeler verilmiştir.
- Onay işareti simgesi temel uygulamalardan biridir.
- Yıldız simgesi isteğe bağlı olsa da çözümü iyileştirmek için önerilen bir özelleştirme seçeneğidir.
Konumlarınızı etkileşimli haritada gösterme |
Kullanıcıların konum ayrıntılarını görmesine, etrafta gezinmesine, yakınlaştırma ve uzaklaştırmasına olanak tanıyan bir harita oluşturun. Dilerseniz İşletme Profili girişlerinizden işletme bilgilerini kolayca içe aktarma, randevu rezervasyon bağlantıları yerleştirme ve Google Cloud Storage'a dağıtım yapma gibi özelliklerle hızlıca harita oluşturmak için Quick Builder Locator Plus çözümünü keşfedebilirsiniz. |
|
Yer Ayrıntılarını Sağlama | Kullanıcılar en yakın konumları haritada bulduktan sonra onlara konumlarla ilgili anlamlı Yer Ayrıntıları sunarak karar vermelerine yardımcı olun. | |
Konumlar 45° açıyla gösteriliyor | Kullanıcılara 45 derecelik açıyla uydu görünümünde konumunuzu daha iyi gösterin. | |
Kullanıcılarınızın konumunu belirleme | Tüm platformlarda kullanıcı deneyimini iyileştirmek ve en az tuş vuruşlarıyla adres doğruluğunu artırmak için "kullandıkça yaz" işlevi ekleyin. | |
En yakın konumlara seyahat süresi ve mesafe gösteriliyor | Birden çok kalkış ve varış noktası için seyahat mesafesini ve seyahat süresini hesaplayın ve isteğe bağlı olarak yürüyüş, araba veya bisiklet gibi çeşitli ulaşım şekillerini belirtin. | |
Kullanıcıların randevu almasına yardımcı olma |
Kullanıcıların Yer Ayrıntıları yan panelinden randevu almasına izin verin. Dilerseniz İşletme Profili girişlerinizden işletme bilgilerini kolayca içe aktarma, randevu rezervasyon bağlantıları yerleştirme ve Google Cloud Storage'a dağıtım yapma gibi özelliklerle hızlıca harita oluşturmak için Quick Builder Locator Plus çözümünü keşfedebilirsiniz. |
|
Yerel teklifleri gösterme | Yer Ayrıntıları yan panelinde kullanıcılara tıklanabilir yerel teklifler gösterin. | |
Navigasyon yol tarifi sağlama | Yürüyüş, araba, bisiklet ve toplu taşıma gibi çeşitli ulaşım yöntemlerini kullanarak kalkış noktasından varış noktasına kadar yol tarifi verileri alabilirsiniz. | |
Haritanızı özelleştirme | Konumlarınızın öne çıkmasına yardımcı olmak için özel harita işaretçileri oluşturun ve haritanın stilini markanızın renklerine uyacak şekilde belirleyin. Kullanıcıların kendilerini daha iyi tanımalarına yardımcı olmak için haritanızda belirli önemli yerleri (ÖY) görüntüleyin (veya gizleyin) ve harita karmaşasını önlemek için ÖY yoğunluğunu kontrol edin. | |
Analizlerle kullanım analizleri elde etme | Bulucu stratejiniz ve uygulamanız hakkında analizler elde etmek için Google Analytics'i yapılandırın ve kullanın. | |
Mobil cihaza yol tarifi gönderme | Yol tarifini bulucu üzerinde göstermenin yanı sıra, hareket halindeyken Google Haritalar'ı kullanarak navigasyon için bir kullanıcının telefonuna da yol tarifi gönderebilirsiniz. | |
Kullanıcıların konumları görselleştirmesine yardımcı olmak için Street View'ı gösterme | Kullanıcılara 360 derece görünüm içeren Street View görüntüleri sunarak onları daha iyi yönlendirmeyi ve konumunuzu daha hızlı bulmalarını sağlayın. | |
Coğrafi Konum ile kullanıcı konumunu belirleme | Cihaz içi konum hizmetlerini kullanmak istemiyorsanız kullanıcının konumunu belirlemeye yardımcı olması için Coğrafi Konum özelliğini kullanın. | |
Özel konum verilerini Yer Ayrıntılarıyla birleştirme | Karar verme sürecinde kullanıcılara zengin bir veri kümesi sağlamak için kendi özel konum ayrıntılarınızı Yer Ayrıntıları ile birleştirin. |
Konumlarınızı etkileşimli haritada gösterme
Bulucu, kullanıcı deneyiminin önemli bir parçasıdır. Ancak bazı sitelerde basit bir harita bile olmayabilir. Bu durum, kullanıcıların yakındaki bir konumu bulmak için siteden veya uygulamadan ayrılmalarını gerektirir. Bu durum, ihtiyaç duydukları bilgileri almak üzere sayfalar arasında gezinmesi gereken kullanıcılar için optimum olmayan bir deneyim anlamına gelir. Bunun yerine, uygulamalarınıza haritalar yerleştirerek ve bunları özelleştirerek bu deneyimi geliştirebilirsiniz.
Bunu etkinleştirmenin birden çok yolu vardır: (1) bu işlevi kullanıma hazır sunmak için Quick Builder Locator Plus çözümünü kullanma ve (2) kendi Dinamik Haritalar uygulamanızı kullanma. Bu bölümde bu seçenekler ayrıntılı olarak açıklanmaktadır.
Quick Builder Locator Plus'ı kullanma
İşletme Profilinizdeki işletme bilgilerini içe aktarmak için Quick Builder Locator Plus çözümünü kullanabilirsiniz. Dolayısıyla İşletme Profilinizdeki işletme ayrıntılarında yapılan bir değişiklik, web sitenizdeki mağaza bulma aracına yansıtılacaktır. Bu değişiklikler arasında çalışma saatleri, iletişim bilgileri, fotoğraflar, hizmet seçenekleri ve daha fazlası yer alabilir. Quick Builder, işletme konumlarını haritada hızlıca ayarlamanızı, dağıtılabilir kod oluşturmanızı veya dakikalar içinde doğrudan Google Cloud Storage'a dağıtmanızı sağlar.
![İşletme Profili entegrasyonu](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_gbp_integration.gif?authuser=7&hl=tr)
![Cloud'a dağıtma](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_deploy_to_cloud.gif?authuser=7&hl=tr)
Kendi Dinamik Haritalar uygulamanızı kullanma
Bu örnekte kullanım alanı: Maps JavaScript API | Diğer ürünler: Android | iOS |
Sayfanıza dinamik harita, yani kullanıcıların gezinebileceği, yakınlaştırıp uzaklaştırabileceği ve farklı konumlar ile önemli yerler hakkında ayrıntılı bilgi edinebileceği bir harita ekleme işlemi birkaç satır kodla yapılabilir.
Öncelikle, sayfaya Maps JavaScript API'yi eklemeniz gerekir. Bu işlem, aşağıdaki komut dosyasını HTML sayfanızda bağlayarak yapılır.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>
URL, sayfa yüklendiğinde çalışan JavaScript initMap
işlevine başvuruyor. URL'de, hedeflediğiniz ülke için doğru şekilde biçimlendirildiğinden emin olmak amacıyla haritanızın dilini veya bölgesini de tanımlayabilirsiniz. Bölge ayarlamak, ABD dışında kullanılan uygulamaların davranışının belirlediğiniz bölgeye göre taraflı olmasını da sağlar. Desteklenen dillerin ve bölgelerin tam listesi için Google Haritalar Platformu Kapsam Ayrıntıları'nı inceleyin ve region
parametresi kullanımı hakkında daha fazla bilgi edinin.
Ardından, haritanızı sayfaya yerleştirmek için bir HTML div
koduna ihtiyacınız vardır.
Burası haritanın görüntüleneceği yer.
<div id="map"></div>
Sonraki adım, haritanızın temel işlevselliğini ayarlamaktır. Bu, komut dosyası URL'sinde belirtilen initMap
komut dosyası işlevinde yapılır. Aşağıdaki örnekte gösterilen bu komut dosyasında ilk konumu, harita türünü ve haritada kullanıcılarınızın kullanımına hangi kontrollerin sunulacağını belirleyebilirsiniz. getElementById()
öğesinin yukarıdaki "eşleme" div
kimliğine referans verdiğine dikkat edin.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, zoomControl: false }); }
Bir bulucu için genellikle ilk konumu, merkez noktasını veya sınırları ve yakınlaştırma düzeyini (haritanın söz konusu konuma ne kadar yakınlaştırıldığı) ayarlamak istersiniz. Haritayla etkileşim düzeyini belirlerken kontrollerin ayarlanması gibi diğer çoğu öğe isteğe bağlıdır.
Yer kimlikleri alınıyor
Bu örnekte şu kullanımlar kullanılmıştır: Places API | Ayrıca kullanılabilir: JavaScript |
Konumlarınızı içeren ve bu konumun adı, adresi ve telefon numarası gibi temel bilgileri içeren bir veritabanınız olabilir. Coğrafi koordinatlar ve kullanıcıların katkıda bulunduğu bilgiler dahil olmak üzere Google Haritalar Platformu'nun söz konusu yer hakkında sahip olduğu bilgileri getirmek için veritabanınızdaki her bir konuma karşılık gelen yer kimliğini bulun. Places API Yer Arama'da
Yer Bulma uç noktasına çağrı yapabilir ve yalnızca place_id
alanını isteyebilirsiniz. Google Londra ofisi için yer kimliği istemeyle ilgili bir örneği aşağıda görebilirsiniz:
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a
Bu yer kimliğini veritabanınızda depolayabilir ve yer hakkında bilgi istemek için etkili bir yöntem olarak kullanabilirsiniz. Aşağıda, yer kimliğini coğrafi kodlama yapmak, Yer Ayrıntılarını almak ve yol tarifi istemek için kullanmaya ilişkin talimatlar verilmiştir.
Konumlarınızın coğrafi kodlamasını yapma
Bu örnekte şu kullanımlar kullanılmıştır: Geocoding API | Ayrıca kullanılabilir: JavaScript |
Konum veritabanınızda açık adresler bulunuyor ancak coğrafi koordinatlar bulunmuyorsa söz konusu adresin enlem ve boylam bilgilerini almak için Coğrafi Kodlama API'sini kullanarak işaretçiyi haritaya yerleştirin. Adreslerinizi sunucu tarafında coğrafi olarak kodlayabilir, enlem ve boylam değerlerini veritabanınızda depolayabilir ve en az 30 günde bir yenileyin.
Google Londra ofisi için döndürülen yer kimliğinin enlem ve boylamını almak amacıyla Geocoding API'nin kullanıldığı bir örneği aşağıda bulabilirsiniz:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a
Konumlar haritaya ekleniyor
Bir sonraki adım, konumlarınızı haritaya eklemektir. Bu işlem genellikle haritaya işaretçi eklenerek yapılır, ancak veri katmanları gibi kullanabileceğiniz birkaç seçenek de vardır.
Konumunuzun enlem ve boylamını belirledikten sonra haritaya işaretçi eklemeyle ilgili bir örneği aşağıda bulabilirsiniz:
var marker = new google.maps.Marker({ position: { lat: 51.493073, lng: -0.146550 }, label:"A", title:"Location Name" }); // To add the marker to the map, call setMap(); marker.setMap(map);
Birkaç işaretçi ile çok sayıda konumun konumunu birlikte görebilirsiniz.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/maps.png?authuser=7&hl=tr)
Çok sayıda konum varsa JavaScript, Android veya iOS için bir işaretçi kümeleme yardımcı programı kullanabilirsiniz. JavaScript mağaza bulucu GitHub örneğindeki işaretçi kümeleme örneğini burada bulabilirsiniz.
Yer Ayrıntıları Sağlama
Bu örnekte kullanılanlar: Haritalar JavaScript API'si | Ayrıca şunlar da kullanılabilir: API | Android | iOS |
Kullanıcıların, konumlarınızdan birini ziyaret etmeden önce bilmeleri gereken Yer Ayrıntıları'nı paylaşabilirsiniz. İletişim bilgileri, çalışma saatleri, kullanıcı puanları, kullanıcı fotoğrafları ve geçici olarak kapanma durumu gibi zengin Yer Ayrıntıları sayesinde kullanıcılarınız, mekanınızı ziyaret ettiklerinde tam olarak ne beklemeleri gerektiğini bilirler. Places API'ye çağrı yaptıktan sonra, yanıtı bir bilgi penceresinde, web kenar çubuğunda ya da istediğiniz başka bir şekilde filtreleyebilir ve oluşturabilirsiniz.
Yer Ayrıntılarını istemek için konumlarınızın her birinin yer kimliğine ihtiyacınız vardır. Konumunuzun yer kimliğini almak için Yer kimliklerini alma konusuna bakın.
Yer Ayrıntılarını istemeyle ilgili videoları görmek için genişletin:
Çalışma saatlerini öğrenin
Kapanışları kontrol edin
Maliyetleri kontrol altında tutun
Aşağıdaki örnekte, Yer Ayrıntılarını almak ve bunları bir InfoWindow'a eklemek için Yerler Kitaplığı ve Maps JavaScript API kullanılmaktadır. Bu uygulama, kullanıcının ilgi duymasından bağımsız olarak tüm konumların ayrıntılarını önceden getirmek yerine işaretçiyi tıklayarak ayrıntıları istediğinde yalnızca Yer Ayrıntıları isteğinin tetiklenmesini sağlayan maliyet tasarrufu stratejisini kullanır.
const marker = new google.maps.Marker({ map, position: { lat: 51.493073, lng: -0.14655 }, }); const request = { placeId: "ChIJVSZzVR8FdkgRTyQkxxLQmVU", fields: ["name", "formatted_address", "rating", "website"], }; const infowindow = new google.maps.InfoWindow(); const service = new google.maps.places.PlacesService(map); google.maps.event.addListener(marker, "click", function () { service.getDetails(request, (place, status) => { if (status === google.maps.places.PlacesServiceStatus.OK && place) { infowindow.setContent( "<div><strong>" + place.name + "</strong><br>" + place.formatted_address + "<br>" + "Rating: " + place.rating + " stars<br>" + place.website + "</div>" ); infowindow.open(map, this); } }); });
Konumlar 45° görünümden gösteriliyor
Bu örnekte kullanılanlar: Haritalar JavaScript API'si | Diğer ürünler: Android | iOS |
Kullanıcılara konumunuzun havadan görünümünü sunmak, nasıl göründüğüne dair daha net bir fikir edinmelerine ve konumunuzu daha kolay bulmalarına yardımcı olur. Kullanıcı daha fazla ayrıntı görmek için tek bir konum seçtiğinde, mevcut uydu görüntülerini 45° açıyla görüntülemek için söz konusu konumu yakınlaştırabilirsiniz.
Aşağıdaki kod örneği, haritayı yüksek bir yakınlaştırma düzeyine, uyumlu bir harita türüne ve varsa 45° görüntüler gösterecek bir yatırma açısına ayarlar. 45° görüntülerin kullanılabilirliğiyle ilgili ayrıntılar belgelerde açıklanmıştır.
function seeDetail(location) { map.setCenter(location); map.setZoom(19); map.setMapTypeId(google.maps.MapTypeId.HYBRID); map.setTilt(45); }
Orijinal harita görünümüne sıfırlanıyor
Kullanıcılar genellikle tek bir konumun ayrıntılı görünümü ile yakındaki birkaç konumun özet görünümü arasında geçiş yapmak ister. Bunu kolaylaştırmak için, harita etkileşimleri sırasında veya liste görünümünde kullanıcının ayrıntı görünümünden ne zaman ayrıldığını algılayacak bir işleyici ekleyin. Örneğin, map
nesnesindeki zoom_changed
etkinliğinin dinlenmesi, kullanıcının ayrıntılı görünümden manuel olarak uzaklaştırdığını veya yakınlaştırma düzeyini güncelleyen başka bir işlevi çağırdığını gösterir. Bu örnekte, uzaklaştırma yapmak haritayı orijinal harita türüne
sıfırlar ve yatırır.
let originalMapTypeId = google.maps.MapTypeId.ROADMAP; map.addListener("zoom_changed", () => { const newZoom = map.getZoom()!; if (newZoom < 19) { map.setTilt(0); map.setMapTypeId(originalMapTypeId); } });
Kullanıcınızın konumunu belirleme
Bu örnekte şunlar kullanılmaktadır: Haritalar JavaScript API | Diğer ürünler: Android | iOS |
Herhangi bir bulucudaki diğer temel bileşen, kullanıcınızın başlangıç konumunu belirlemektir. Varsayılan olarak, mobil konum hizmetlerini ve web tarayıcısında coğrafi konumu kullanarak kullanıcı izinlerini kullanarak başlangıç noktasını kullanıcının mevcut konumu olarak ayarlayabilirsiniz. Ancak, kullanıcı bu izinleri reddedebilir veya başlangıç noktası olarak farklı bir konum ayarlamak isteyebilir.
Günümüz kullanıcıları, Google Haritalar'ın tüketici sürümündeki önceden yazılmış otomatik tamamlama işlevine alışkındır. Bu işlev, mobil cihazlarda ve web'de Google Haritalar Platformu Yerler kitaplıkları kullanılarak herhangi bir uygulamaya entegre edilebilir. Kullanıcı bir adres yazdığında otomatik tamamlama, widget'ları kullanarak diğer alanları doldurur. Doğrudan Yerler kitaplıklarını kullanarak kendi otomatik tamamlama işlevinizi de sağlayabilirsiniz.
Otomatik Yer Tamamlama kitaplığını sitenize eklemek, Maps JavaScript API komut dosyası URL'sine birkaç sorgu parametresi eklemekten ibarettir. Aşağıdaki örnekte, ekleme işlemi libraries=places
işlemidir.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
Sonra, kullanıcı girişi için sayfanıza bir metin kutusu ekleyin.
<input id="autocomplete" placeholder="Enter starting address, city, or zip code" type="text"></input>
Son olarak, Otomatik tamamlama hizmetini başlatmanız ve adlandırılmış metin kutusuna bağlamanız gerekir.
Otomatik tamamlama tahminlerini coğrafi kodlama türlerine yerleştir seçeneğinin kısıtlanması giriş alanınızı sokak adreslerini, mahalleleri, şehirleri ve posta kodlarını kabul edecek şekilde yapılandırır. Böylece kullanıcılar, başlangıç noktalarını belirtmek için herhangi bir belirginlik düzeyini girebilir. Yanıtın kullanıcının bulunduğu yerin enlem ve boylamını içermesi için geometry
alanını istediğinizden emin olun. Haritayı yeniden ortalamak ve konumlarınızın başlangıç noktasıyla ilişkisini belirtmek için bu harita koordinatlarını kullanırsınız.
// Create the autocomplete object, restricting the search predictions to // geographical location types. const autocomplete = new google.maps.places.Autocomplete( document.getElementById("autocomplete"), { types: ["geocode"], componentRestrictions: {'country': ['gb']}, fields: ['place_id', 'geometry', 'formatted_address'] } ); // When the user selects an address from the drop-down // zoom to the select location and add a marker. autocomplete.addListener("place_changed", addUserLocation); }
Bu örnekte, kullanıcı adresi seçtikten sonra addUserLocation()
işlevi yürütülür. Bu işlem, eşleşen sonucun geometrisini ve kullanıcı konumunu alır, ardından haritayı ilgili konuma taşır ve bir işaretçi ekler.
function addUserLocation() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); // Add a marker to the map. const marker = new google.maps.Marker({ map: map }); marker.setLabel("C"); marker.setPosition(place.geometry.location); // Zoom the map to the marker. map.panTo(place.geometry.location); map.setZoom(12); }
Bu işlemin ardından, kullanıcı ile belirli bir konum arasındaki ilişkiyi aşağıdaki resimde görebilirsiniz.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/autocomplete.png?authuser=7&hl=tr)
Uygulamanıza Otomatik Yer Tamamlama özelliğini eklemeyle ilgili adım adım açıklamalı videoları görmek için bunu genişletin:
Web sitesi
Android uygulamaları
iOS uygulamaları
En yakın konumlara seyahat süresi ve mesafe gösteriliyor
Bu örnekte şu kullanımlar kullanılmıştır: DISTANCE Matris API | Ayrıca: Mesafe Matrisi Hizmeti, Maps JavaScript API |
Kullanıcının konumunu öğrendikten sonra, bunu kendi konumlarınızın bulunduğu yerle karşılaştırabilirsiniz. Bunu Mesafe Matrisi Hizmeti ile yapan Maps JavaScript API, kullanıcılarınızın sürüş süresi veya yol mesafesi ile kendileri için en uygun konumu seçmelerine yardımcı olur.
Bir kullanıcının yakınındaki konumları göstermek, konumlarınızı zaten doldurduğunuzu gösterir. Kendi konum veritabanınızı kullanırken temel nokta, verilerin bir haritada kullanılabilen (Veri Katmanı konusunda açıklandığı gibi GeoJSON gibi) bir biçimde olmasını sağlamaktır.
Konum listesini düzenlemenin standart yolu, konumları mesafeye göre sıralamaktır. Genellikle bu mesafe, bir kullanıcıdan konum ile ilgili düz çizgi kullanılarak hesaplanır ancak bu değer yanıltıcı olabilir. Başka bir konumun daha uygun olabileceği bir zamanda, düz bir çizgi geçilemez bir nehrin üzerinden veya trafiğin yoğun olduğu yolların arasından geçebilir. Bu, birbirine birkaç kilometre mesafede birden fazla konumunuz olduğunda önemlidir.
Mesafe Matrisi Hizmeti, kalkış ve varış konumlarının bir listesini alıp sadece seyahat mesafesini değil, aynı zamanda bunlar arasındaki süreyi de döndürerek çalışır. Bir kullanıcının durumunda, kaynak şu anda bulunduğu yer veya istedikleri başlangıç noktası, hedefler ise konumların bulunduğu konumdur. Kalkış noktaları ve hedefler, koordinat çiftleri veya adres olarak belirtilebilir. Koordinat çiftleri veya adresler, hizmet çağrıldığında eşleştirilir. Mevcut veya gelecekteki sürüş sürelerine göre sonuçlar göstermek için Mesafe Matrisi'ni bir dizi ekstra parametreyle kullanabilirsiniz.
Aşağıdaki örnek, kullanıcının başlangıç noktasını ve konumları belirterek Mesafe Matrisi Hizmeti'ni çağırır. Bu örnekte, harita merkezinden Londra'daki üç Google ofisine olan mesafe gösterilmektedir.
URL kodlaması hızlı referansı: %2C
= , (virgül), %3A
= : (iki nokta) ve %7C
= | (dikey çizgi).
https://maps.googleapis.com/maps/api/distancematrix/json?origins=51.493490%2C-0.097288
&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc
&units=metric
&mode=driving
&key=YOUR_API_KEY
&solution_channel=GMP_guides_locatorplus_v2_a
Kopyalayıp çalıştırabileceğiniz bir sürüm aşağıda verilmiştir:
https://maps.googleapis.com/maps/api/distancematrix/json?key=YOUR_API_KEY&origins=51.493490%2C-0.097288&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc&units=metric&mode=driving&solution_channel=GMP_guides_locatorplus_v2_a
Hizmetten verilen asıl yanıt, aşağıdaki örnekte gösterilene benzer şekilde, eşleşen adreslerin, mesafelerin ve sürelerin bir listesi olur:
Örnek yanıtı görmek için genişletin:
{ "destination_addresses": [ "123 Buckingham Palace Rd, Victoria, London SW1W 9SH, UK", "1-13 St Giles High St, West End, London WC2H 8AG, UK", "6 Pancras Square, Kings Cross, London N1C 4AG, UK" ], "origin_addresses": [ "Unnamed Road, London, UK" ], "rows": [ { "elements": [ { "distance": { "text": "4.5 km", "value": 4540 }, "duration": { "text": "15 mins", "value": 924 }, "status": "OK" }, { "distance": { "text": "5.0 km", "value": 5043 }, "duration": { "text": "17 mins", "value": 1044 }, "status": "OK" }, { "distance": { "text": "6.9 km", "value": 6919 }, "duration": { "text": "23 mins", "value": 1357 }, "status": "OK" } ] } ], "status": "OK" }
Aşağıdaki resimde, kalkış noktası (kırmızı işaretçi C) ve hedefler harita üzerinde gösterilmektedir:
![Resimde, şehir haritasında kullanıcının konumu kırmızı işaretçiyle, etrafındaki konumlar ise yeşil işaretçiler halinde gösteriliyor.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/distance_matrix.png?authuser=7&hl=tr)
Aşağıdaki tabloda gösterildiği gibi, düz çizgi mesafesi ve rota mesafesi genellikle farklılık gösterir.
Konum | Düz Mesafe | Trafik / Zaman açısından yol |
---|---|---|
Konum A | 3,32 km | 4,5 km / 15 dakika |
Konum B | 3,20 km | 5,0 km / 17 dakika |
Konum C | 4,84 km | 6,9 km / 23 dakika |
B Konumu mesafeye göre en yakın konum olsa da A Konumu'na otoyol üzerinden erişilebildiğinden, rota ve oraya ulaşma süresi daha uzundur.
Bu isteği gönderdikten sonra yanıtları sürüş süresine göre sıralamak için eşleşmeyi işleyebilirsiniz. Bu tür bir işlevin örneklerini bulucu codelab'lerinde bulabilirsiniz.
Rota izleme için yol tarifi sağlama
Bu örnekte kullanım alanı: Maps JavaScript API Yol Tarifi Hizmeti | Ayrıca kullanılabilir: Doğrudan uygulamadan veya bir sunucu proxy'si aracılığıyla uzaktan, Android ve iOS'te kullanım için Directions API web hizmeti |
Kullanıcılara sitenizin veya uygulamalarınızın içinden yol tarifi göstermek, sitenizden uzaklaşmalarına gerek olmadığı anlamına gelir. Bu, kullanıcıların dikkatinin diğer sayfalarla bölünmeyeceği ve haritadaki rakipleri görmeyeceği anlamına gelir. Hatta belirli bir ulaşım şeklinin karbon emisyonlarını ve belirli bir yolculuğun etkisini de gösterebilirsiniz.
Yol Tarifi Hizmeti, sonuçları işlemenizi ve harita üzerinde kolayca görüntülemenizi sağlayan işlevler de içerir.
Aşağıda, bir yol tarifi panelinin görüntülenmesi örneği gösterilmektedir. Örnek hakkında daha fazla bilgi için bkz. Metinle Yol Tarifi Görüntüleme.
Bu Haritalar özellikleri hakkında daha fazla bilgi edinmek için Haritalar JavaScript API Belgelerini okuyun veya bir bulucu oluşturmak için adım adım codelab'lere göz atın.
Kullanıcıların randevu almasına yardımcı olma
Kullanıcılar yan panelde konumunuzun Yer Ayrıntılarını görüntülediğinde, aşağıdaki resimde gösterildiği gibi tek bir düğmeyi tıklayarak randevu alma kolaylığı sunabilirsiniz.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/store-locator-appointments.png?authuser=7&hl=tr)
Bunu etkinleştirmenin birkaç yolu vardır: (1) bu işlevi kullanıma hazır sunmak için Quick Builder Locator Plus çözümünü veya (2) İşletme Profilinizi kullanabilirsiniz. Bu bölümde bu seçenekler ayrıntılı olarak açıklanmaktadır.
Quick Builder Locator Plus'ı kullanma
İşletme Profilinizdeki işletme bilgilerini kolayca içe aktarmak için Quick Builder Locator Plus çözümünü kullanabilirsiniz. Verileri Hızlı Oluşturucu aracına aktardıktan sonra Google ile Rezervasyon'u kullanarak işletmenizin bulunduğu konumlar için yerleşik randevu rezervasyon bağlantılarını etkinleştirebilirsiniz. Google Hesabı ile ilişkilendirilmiş bir İşletme Profiliniz olmasa bile Google ile Rezervasyon* üzerinden üçüncü taraf rezervasyon sağlayıcılarını etkinleştirdiğiniz işletmelerin rezervasyon bağlantılarını eklemek için Quick Builder'ı kullanabilirsiniz.
![Google ile Rezervasyon](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_reserve_with_google.gif?authuser=7&hl=tr)
*Google ile Rezervasyon, yalnızca işletmelerin desteklenen bir rezervasyon sağlayıcıyla çalıştığı belirli ülkelerde/bölgelerde kullanılabilir. Google ile Rezervasyon’u kullanmak istiyor ancak şu anda bir Google ile Rezervasyon iş ortağıyla çalışmıyorsanız lütfen bu formu doldurarak hizmet sağlayıcınıza ilgilendiğini belirtmesini söyleyin ve nasıl başlayabileceklerini öğrenmek için dokümanlarımızı inceleyin. Bir rezervasyon sağlayıcıyla çalışmıyorsanız uygun sağlayıcıları İşletme Profili Yöneticisi'ndeki Rezervasyonlar bölümünde görebilirsiniz.
Randevu rezervasyonunu etkinleştirmek için İşletme Profili'ni kullanma
İnternetteki varlığınızı İşletme Profili ile yönettiğinizde, oluşturduğunuz işletme konumları Google Haritalar Platformu yer kimlikleriyle ilişkilendirilir. Böylece, iş verileriyle entegre harita oluşturma işlevini etkinleştirirsiniz.
Business Profile API'leri, uygulamalarınızda alıp alabileceğiniz randevu rezervasyonu gibi işlemler oluşturmanıza olanak tanır. Ancak bu işlemi etkinleştirmek için aşağıda açıklandığı gibi bazı manuel adımlar gerekir.
Kullanıcılar yan panelde konumlarınızdan biriyle ilgili Yer Ayrıntılarını görüntülediğinde randevu almaları için bir bağlantı sağlayabilirsiniz. Bu bölümde bunun nasıl yapılacağı açıklanmaktadır.
-
APPOINTMENT
,ONLINE_APPOINTMENT
veyaDINING_RESERVATION
türündeki konum için bir İşletme Profili API'leriplaceActionLink
oluşturun.placeActionLink
, yan paneldeki randevu bağlantısı için kullanacağınız nesne olacaktır. (İstediğiniz randevu işlemi bağlantısını zaten oluşturduysanız sonraki adıma geçin.) Aşağıda, başarılı birplaceActionLinks.create
POST işleminden alınan örnek bir yanıt verilmiştir:{ "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/reservation-uri", "placeActionType": "DINING_RESERVATION", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" }
-
Google Haritalar Platformu yer kimliğiyle ilişkili İşletme Profili konumunu bulun.
Kullanıcılar Yer Ayrıntılarını görüntülediğinde, Google Haritalar Platformu yer kimliğinin ayrıntılarını da görürler. Yer kimliği bir İşletme Profili yer kimliğiyle ilişkilendirilir. Bu nedenle, oluşturduğunuz randevu rezervasyonu bağlantısını almak ve görüntülemek için yer kimliğini harita yer kimliğine dayalı olarak bulmanız gerekir. Aşağıdaki Business Profile API çağrılarını yapın:
- Projenizin hesaplarını listeleyin.
- Bir hesaptaki tüm konumları listeleyin.
- Hesap konumlarında,
LocationKey
Google Haritalar Platformu yer kimliğini içerir. Bu kimliği, görüntülenen konumun yer kimliğiyle karşılaştırabilirsiniz.
-
Yer kimliğini kullanarak istediğiniz işlem bağlantısını alabilirsiniz. Mevcut bir
placeActionLink
randevusunu almak için konum için mevcutplaceActionLinks
listesini listeleyin ve kullanmak istediğiniz randevu bağlantısını (APPOINTMENT
,ONLINE_APPOINTMENT
veyaDINING_RESERVATION
) bulmak içinplaceActionType
filtresini uygulayın.Aşağıdaki örnekte, LIST çağrısından gelen yanıtta bir RANDEVU
placeActionLink
gösterilmektedir.{ "placeActionLinks": [ { "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/", "placeActionType": "APPOINTMENT", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } ] }
- Yan panelde bir
<div>
oluşturupplaceActionLink
nesnesindeki alakalı verilerle, özellikle de randevu rezervasyon bağlantısının URI'sını oluşturun.
Randevu bağlantıları eklemek için diğer alternatifler
İşletme Profili yönetmiyorsanız veya Quick Builder Locator Plus çözümünü kullanmak istemiyorsanız web sitesine veya uygulamaya rezervasyon widget'ı yerleştirmeyle ilgili belgeler için randevu rezervasyon platformunuza göz atın. Diğer bir seçenek de Envanter yönetimi için Cloud Spanner (video) gibi Google Cloud kullanmaktır.
Yerel teklifler gösteriliyor
Bir konumun Yer Ayrıntıları yan panelinde, kullanıcıların tıklayabileceği yerel teklifler gösterebilirsiniz. Google Benim İşletmem API'si, konumlarınızla ilişkili "yayınlar" (ör. yerel teklifler) oluşturup almanıza olanak tanır. Aşağıdaki şekilde, Yer Ayrıntıları yan panelindeki yerel teklif örneği gösterilmektedir.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/store-locator-offers.png?authuser=7&hl=tr)
(Önceki bölümdeki mimari diyagramda, bulucunuza teklif eklemek için kullanabileceğiniz teknolojiler gösterilmektedir.)
Yerel teklifler konumlarla ilişkili olduğundan, kullanıcıların görüntülediği konumun Google Haritalar Platformu yer kimliğiyle ilişkili İşletme Profili konum kimliğini bulmanız gerekir.
İşletme Profili yer kimliğiniz varsa ilgili teklifi localPost
olarak alıp Yer Ayrıntıları yan panelinizde görüntüleyebilirsiniz. Şu adımları uygulayabilirsiniz:
- Google Benim İşletmem API'sini kullanarak görüntülemek istediğiniz
OFFER
türünde teklif yayınları oluşturun. -
Haritada yer kimliğiyle ilişkili İşletme Profili konumunu / yer kimliğini bulun.
Kullanıcılar Yer Ayrıntılarını gördüğünde, Google Haritalar Platformu yer kimliğinin ayrıntılarını da görür. Yer kimliği bir İşletme Profili yer kimliğiyle ilişkilendirilir. Bu nedenle, konumunuzun yerel teklif bağlantısını almak ve görüntülemek için yer kimliğini harita yer kimliğine dayalı olarak bulmanız gerekir. Aşağıdaki Business Profile API çağrılarını yapın:
- Projenizin hesaplarını listeleyin.
- Bir hesaptaki tüm konumları listeleyin.
- Hesap konumlarında,
LocationKey
harita yer kimliğini içerir. Bu kimliği, görüntülenmekte olan konumun yer kimliğiyle karşılaştırabilirsiniz.
Aşağıda, İşletme Profili API'lerinde konum ayrıntılarına ilişkin bir örnek istek verilmiştir:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700
Yanıtta, Google Haritalar Platformu istekleriyle kullanabileceğiniz yer kimliği olan bir
locationKey
alanı yer alır.Örnek yanıtı görmek için genişletin.
{ "name": "accounts/111098884960588804666/locations/15899957830169237700", "locationName": "Sushi Sushi", "primaryPhone": "+49 2222 22222", "primaryCategory": { "displayName": "Restaurant", "categoryId": "gcid:restaurant", }, "regularHours": { "periods": [ { "openDay": "MONDAY", "openTime": "09:00", "closeDay": "MONDAY", "closeTime": "09:10" }, { "openDay": "TUESDAY", "openTime": "11:30", "closeDay": "TUESDAY", "closeTime": "24:00" } ] }, "locationKey": { "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk", "requestId": "2c72cbcb-ea2e-4d66-b684-0ef5f090300c" }, "latlng": { "latitude": 1.3670033, "longitude": 103.8556385 }, "openInfo": { "status": "OPEN", "canReopen": true }, "locationState": { "isGoogleUpdated": true, "canUpdate": true, "canDelete": true, "isVerified": true, "isPublished": true, "canHaveFoodMenus": true }, "attributes": [ { "attributeId": "has_delivery", "valueType": "BOOL", "values": [ false ] }, { "attributeId": "requires_masks_customers", "valueType": "BOOL", "values": [ true ] }, { "attributeId": "url_order_ahead", "valueType": "URL", "urlValues": [ { "url": "https://example.com/" }, ] }, { "attributeId": "pay_credit_card_types_accepted", "valueType": "REPEATED_ENUM", "repeatedEnumValue": { "setValues": [ "visa" ], "unsetValues": [ "american_express" ] } } ], "address": { "regionCode": "SG", "languageCode": "en-US", "postalCode": "560445", "addressLines": [ "445 Ang Mo Kio Ave 10" ] }, "profile": { "description": "Example restaurant" } }
-
Yer kimliğini öğrendiğinize göre artık istediğiniz teklifi alabilirsiniz. Mevcut bir teklif gönderisi almak için konum için mevcut
localPosts
listesini listeleyin ve kullanmak istediğiniz teklif içeriğini bulmak üzeretopicType
/OFFER
için filtreleme yapın.Bir konumla ilgili etkin Yerel Yayınların listelenmesine yönelik örnek bir istek:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
Aşağıdaki örnekte, yanıtta
OFFER
localPost
gösterilmektedir.Örnek yanıtı görmek için genişletin.
{ "localPosts": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680", "languageCode": "en", "summary": "Buy One Get One Free on all order-ahead bento boxes today!", "state": "LIVE", "event": { "title": "Bento BOGO", "schedule": { "startDate": { "year": 2020, "month": 1, "day": 20 }, "startTime": {}, "endDate": { "year": 2021, "month": 1, "day": 21 }, "endTime": {} } }, "updateTime": "2020-09-11T10:56:22.594Z", "createTime": "2020-09-11T10:56:22.594Z", "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680", "media": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS", "mediaFormat": "PHOTO", "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS" } ], "topicType": "OFFER", "offer": { "couponCode": "BOGO-JET-CODE", "redeemOnlineUrl": "https://www.example.com/redeem", "termsConditions": "Offer only valid for order-ahead orders placed online." } }, ], }
- Yan panelde bir
<div>
oluşturuplocalPost
nesnesinden alakalı verilerle doldurun.
Haritanızı özelleştirme
Haritanızın görünümünü ve ayrıntılarını çeşitli yöntemlerle değiştirebilirsiniz. Örneğin, şunları yapabilirsiniz:
- Varsayılan harita raptiyelerinin yerine geçecek kendi özel işaretçilerinizi oluşturun.
- Harita özelliklerinin renklerini markanızı yansıtacak şekilde değiştirin.
- Hangi önemli yerleri (turistik yerler, yemek, konaklama vb.) ve hangi yoğunlukta görüntüleyeceğinizi kontrol ederek kullanıcıların en yakın konuma ulaşmasına yardımcı olan önemli noktaları vurgularken kullanıcıların dikkatini konumlara odaklayabilirsiniz.
Özel harita işaretçileri oluşturma
Varsayılan rengi değiştirerek (muhtemelen bir konumun şu anda açık olup olmadığını gösterir) veya işaretçiyi markanızın logosu gibi özel bir resimle değiştirerek işaretçilerinizi özelleştirebilirsiniz. Bilgi pencereleri veya pop-up pencereler, kullanıcılara çalışma saatleri, telefon numarası ve hatta fotoğraflar gibi ek bilgiler sağlayabilir. Kafes, vektör, sürüklenebilir ve hatta animasyonlu özel işaretçiler de oluşturabilirsiniz.
Aşağıda, özel işaretçilerin kullanıldığı örnek bir harita verilmiştir. ( Haritalar JavaScript API özel işaretçileri konusundaki kaynak koduna bakın.)
Ayrıntılı bilgi için JavaScript (web), Android ve iOS için işaretçiler dokümanlarına bakın.
Haritanızın stilini belirleme
Google Haritalar Platformu, kullanıcıların en yakın konumu bulmasına, oraya olabildiğince hızlı ulaşmasına ve markanızı güçlendirmenize yardımcı olacak şekilde haritanızı şekillendirmenize olanak tanır. Örneğin, harita renklerini markanızla uyumlu olacak şekilde değiştirebilir ve kullanıcıların görebildiği önemli yerleri kontrol ederek haritadaki dikkat dağıtıcı unsurları azaltabilirsiniz. Google Haritalar Platformu, bazıları seyahat, lojistik, emlak ve perakende gibi farklı sektörler için optimize edilmiş bir dizi harita başlangıç şablonu da sunar.
Projenizdeki Google Cloud Console Harita Stilleri sayfasında harita stillerini oluşturabilir veya değiştirebilirsiniz.
Cloud Console'da harita stili oluşturma ve stil oluşturma animasyonlarını görmek için genişletin:
Sektör haritası stilleri
Bu animasyon, kullanabileceğiniz sektöre özgü önceden tanımlanmış harita stillerini gösterir. Bu stiller, her sektör türü için en uygun başlangıç noktasını sağlar. Örneğin, mağaza haritası stili, haritadaki önemli yerleri azaltarak kullanıcıların en yakın konuma en kısa sürede ve kendinden emin bir şekilde gitmelerine yardımcı olmak için hem kendi konumlarınıza hem de önemli noktalara odaklanmasına olanak tanır.
![Harita Stili sayfasında, Yeni Harita Stili Oluştur'u tıklanır. Yeni Harita Stili sayfasında, sektörde optimize edilmiş şu stillerden her birinin yanındaki radyo düğmesi fare ile tıklanıyor: Seyahat, Lojistik, Gayrimenkul ve Perakende. Her bir düğme tıklandığında, harita stili açıklaması ve grafik
önizleme değişir.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/ioms_animation.gif?authuser=7&hl=tr)
Önemli yer kontrolü
Bu animasyon, önemli yerler için işaretçi rengini ayarlar ve harita stilinde ÖY yoğunluğunu artırır. Yoğunluk yükseldikçe haritada daha fazla ÖY işaretçisi gösterilir.
![Harita Stili sayfasında, Yeni Harita Stili Oluştur'u tıklanır. Yeni Harita Stili sayfasında, Kendi Stilinizi Oluşturun altında Google Haritalar radyo düğmesi seçildi. Fare, Atlas stili için Atlas radyo düğmesini ve ardından
Stil Düzenleyici'de Aç'ı tıklıyor. Stil Düzenleyici'de farenin Önemli Yerler özelliğini, ardından Simge öğesini tıklayarak rengi kırmızıya ayarlamak. Ardından fare, ÖY Yoğunluğu onay kutusunu seçer ve yoğunluk kontrolünü
maksimum yoğunluk için sağa kaydırır. Yoğunluk arttıkça harita önizlemesinde gün geçtikçe daha fazla kırmızı işaretçi görünür. Ardından fare
Kaydet düğmesine gelir.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/poi_animation.gif?authuser=7&hl=tr)
Her harita stilinin kendi kimliği vardır. Cloud Console'da bir stil yayınladıktan sonra, kodunuzda bu harita kimliğini referans alırsınız. Bu sayede, uygulamanızı yeniden düzenlemeye gerek kalmadan harita stilini gerçek zamanlı olarak güncelleyebilirsiniz. Yeni görünüm, mevcut uygulamada otomatik olarak görünür ve platformlar genelinde kullanılır. Aşağıdaki örnekler, Maps JavaScript API kullanılarak bir web sayfasına harita kimliğinin nasıl ekleneceğini göstermektedir.
Maps JavaScript API, komut dosyası URL'sine bir veya daha fazla map_ids
ekleyerek söz konusu stilleri kodunuzda çağırdığınızda daha hızlı harita oluşturma için bu stilleri otomatik olarak kullanıma sunar.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a">
</script>
Aşağıdaki kod, web sayfasında stilize edilmiş bir harita görüntüler. (Haritanın sayfada görüneceği bir HTML <div id="map"></div>
öğesi gösterilmez.)
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
JavaScript (web), Android ve iOS'ta bulut tabanlı harita stilleri ekleme hakkında daha fazla bilgi edinin.
Analizlerle kullanım analizleri elde etme
Analizleri kullanarak, kullanıcıların bulucunuzla nasıl etkileşimde bulunduğuna ilişkin değerli bilgiler edinebilirsiniz. Bu bölümde, en çok ilgilendiğiniz verileri izlemek için Google Analytics ve İşletme Profili analizlerini yapılandırma ve izleme hakkında yol gösterici bilgiler verilmektedir. Quick Builder Locator Plus kullanıcıları, analizleri analiz etmenize ve üretmenize yardımcı olan analiz kontrol paneli, anonimleştirilmiş verilere dayalı olarak site ziyaretçilerinizin mağaza bulma aracınızla ne kadar iyi etkileşimde bulunduğuna dair bir resim sunar.
![Locator Plus Analytics](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_analytics.png?authuser=7&hl=tr)
Bu rapora erişmek için Cloud Console'un etkileşim raporları bölümüne gidin. Bu rapor hakkında daha fazla ayrıntı için etkileşim raporlarına bakın.
Google Analytics'in gücü ve esnekliği nedeniyle, kapsamlı kurulum ve kullanım bilgileri sağlamaya çalışmayacağız. Bunun yerine, daha ayrıntılı okumanız için önemli dokümanlara ve talimatlarla ve konum bulma aracı uygulamanızla ilgili olarak dikkat edilmesi gereken önemli noktalara dikkat çekmenizi sağlayacağız.
Google Analytics'i Kurma
Uygulamanızla birlikte Google Analytics'i zaten kullanıyorsanız bu bölümü atlayabilirsiniz.
Aşağıda, Google Analytics'i etkinleştirmek için sitenize yapıştıracağınız bir "Global Etiket" örneği verilmiştir.
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/ gtag/js?id=G-XR5B5D4NW0"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XR5B5D4NW0'); </script>
İster Google Etiket Yöneticisi'ni kullanıyor ister Google Analytics'i doğrudan sitenize ekliyor olun, önemli olan, aşağıdakileri yapmak için Google Analytics uygulamanızı nasıl kullanacağınızı anlamaktır:
- Web sitesi sayfa görüntülemelerinden (etkinlikler) bağımsız olarak ölçülebilen ve tıklamalar gibi kullanıcı etkileşimlerini tetikleyin.
- Ham verileri (metrics) anlamlı gruplarda (boyutlar veya özel boyutlar) görüntüleyin.
Özel etkinlikleri kullanma
Aşağıda, bulucunuzda özel etkinlik tanımlamaya ilişkin bir örnek verilmiştir:
gtag('event', 'location', { 'method': 'address' });
Raporlamadaki etkinlikleri anlayabilmeniz için event
ve method
öğelerinizi yeterince açık bir şekilde adlandırmanız önemlidir. Bunları, ölçmek istediğiniz belirli etkileşimler için tetikleyin. Örneğin, aşağıdaki şekilde gösterildiği gibi, kullanıcının Otomatik tamamlama açılır listesinden seçim yapıp adres belirtmesi buna örnek olarak gösterilebilir.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_autocomplete_select.png?authuser=7&hl=tr)
Tanımladığınız etkinliği ve yöntemi kullanan Google Analytics'e aşağıdaki izleme çağrısını gönderebilirsiniz. (Okuma kolaylığı için her sorgu parametresini ayrı bir satırda göstereceğiz.)
https://www.google-analytics.com/g/collect?v=2 &tid=G-XR5B5D4NW0 >m=2oe550 &_p=64678170 &sr=1920x1200 &ul=fr &cid=489856786.1598861364 &_s=2 &dl=http%3A%2F%2.storelocator.html &dt=Store%20Locator &sid=1620827159 &sct=1 &seg=1 &en=location &_et=6032 &ep.method=address
Aşağıdaki şekilde, Google Analytics çağrısının tarayıcının Ağ sekmesindeki Denetle görünümünde nasıl göründüğü gösterilmektedir. (Büyütmek için tıklayın).
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_inspect.png?authuser=7&hl=tr)
Google Analytics'teki "Gerçek zamanlı" görünümü görüntüleyerek özel etkinlik etiketlerinizin düzgün bir şekilde yakalandığını doğrulayabilirsiniz. Örneğin, Otomatik Yer Tamamlama için daha önce ayarlanan "konum" etkinliği, Google Analytics'te aşağıdaki resimlerde gösterildiği gibi görünür.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_realtime.png?authuser=7&hl=tr)
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_realtime2.png?authuser=7&hl=tr)
Alternatif olarak, aşağıdaki şekilde gösterildiği gibi DebugView'u kullanarak gerçek zamanlı etkinlikleri izleyebilirsiniz. Google Analytics'in Etkileşim > Etkinlikler bölümünden Etkinlikler raporunun tamamına erişmek için 24 saat beklemeniz gerektiğini unutmayın.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_debug.png?authuser=7&hl=tr)
Ayrıca, bulucu uygulamanızdan fiziksel konumlarınıza daha fazla yaya trafiği çekmek için stratejiler geliştirebilir ve ölçebilirsiniz. Örneğin, Google Analytics, Analytics'te, fiziksel mağaza ziyaretleri analizlerini (Google Ads tarafından ölçülen) bulucu analizlerinize bağlayan bir Mağaza Ziyaretleri teklifine sahiptir. Ayrıca kendi uygulamadan konuma stratejilerinizi de (ör. fiziksel konumlarınızda kullanabileceğiniz online teklifler) geliştirebilirsiniz.
İşletme Profili metrikleri
İşletme Profili'nin, ilgilendiğiniz etkinlik, metrik ve boyutları Google Analytics ile izlemenin yanı sıra kendi metrics de vardır. Örneğin, bulucunuza randevu rezervasyonu ve yerel teklif bağlantıları eklerseniz bu görüntüleme ve tıklamalarla ilgili metrikleri alabilirsiniz.
Business Profile API'lerine yapılan aşağıdaki örnek istekte birden fazla metrik türü istenir. Teklif tıklamalarını izlemek için LOCAL_POST_VIEWS_SEARCH
ve LOCAL_POST_ACTIONS_CALL_TO_ACTION
metrikleri en alakalı metriklerdir.
Örnek isteği görmek için genişletin.
POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights Body: { "locationNames": [ "accounts/111098884960528804666/locations/15899957830169237700" ], "basicRequest": { "metricRequests": [ { "metric": "QUERIES_DIRECT" }, { "metric": "QUERIES_INDIRECT" }, { "metric": "VIEWS_MAPS" }, { "metric": "VIEWS_SEARCH" }, { "metric": "ACTIONS_DRIVING_DIRECTIONS" }, { "metric": "LOCAL_POST_VIEWS_SEARCH" }, { "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION" } ], "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } } }
Örnek yanıtı görmek için genişletin.
{ "locationMetrics": [ { "locationName": "accounts/111098884960528804666/locations/15899957830169237700", "timeZone": "Asia/Singapore", "metricValues": [ { "metric": "QUERIES_DIRECT", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "82" } }, { "metric": "QUERIES_INDIRECT", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "1493" } }, { "metric": "VIEWS_MAPS", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "1571" } }, { "metric": "VIEWS_SEARCH", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "631" } }, { "metric": "ACTIONS_DRIVING_DIRECTIONS", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "3" } }, { "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "42" } }, { "metric": "LOCAL_POST_VIEWS_SEARCH", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "11" } } ] } ] }
Yanıt, metrikleri içerir. En önemlisi:
- Konumun Google Haritalar'da 1571 kez görüntülendi
- 631 konum görüntülemesi aldı.
- Konum için 3 Yol Tarifi isteği.
- 42
LOCAL_POST_ACTIONS_CALL_TO_ACTION
teklif tıklamasıdır. - Google Arama'da Yerel Yayınlar 11 kez görüntülendi
Diğer bir metrik seçeneği de işlem bağlantıları oluşturmak için Google ile Rezervasyon'u kullanmaktır. Kullanıcılar Google ile Rezervasyon'da oluşturulan işlem bağlantılarını tıkladığında bu işlemleri Google Analytics'e kaydedebilirsiniz. Böylece dönüşümleri Google Analytics'te izleyebilirsiniz. Daha fazla bilgi için dönüşüm izleme belgelerini inceleyin.
Kullandığınız metrik stratejisinden bağımsız olarak, ölçüm, TPG'lerinize kıyasla nasıl performans gösterdiğinizi görmekten daha fazlasıdır. Sayılar, bu bulucu iyileştirmelerinin işletmeniz üzerindeki etkisini anlamanıza da yardımcı olur. Ayrıca, bulucunuzdaki Google Analytics metriklerini İşletme Profili metrikleriyle karşılaştırabilirsiniz. Örneğin, bu metrikleri karşılaştırarak, kaç müşterinin fiziksel konumlarınızı ziyaret etmek için bulucudan ve Google Haritalar'dan yol tarifi aldığını görebilirsiniz.
Locator Plus'ı Geliştirme
İşletmenizin veya kullanıcılarınızın ihtiyaçlarına bağlı olarak kullanıcı deneyimini daha da geliştirebilirsiniz.
Mobil cihaza yol tarifi gönderiliyor
Kullanıcıların bir konuma daha kolay erişebilmesi için yol tarifi bağlantısını kısa mesaj veya e-posta ile gönderebilirsiniz. Kullanıcı bu uygulamayı tıkladığında, yüklüyse telefonunda Google Haritalar uygulaması başlar veya cihazının web tarayıcısında maps.google.com yüklenir. Bu deneyimlerin her ikisi de kullanıcıya, hedefe ulaşmak için sesli yardım da dahil olmak üzere adım adım navigasyonu kullanma seçeneği sunar.
Aşağıdaki gibi bir yol tarifi URL'si oluşturmak için
Haritalar URL'lerini kullanın. destination
parametresi olarak URL kodlamalı yer adı, destination_place_id
parametresi olarak yer kimliği belirleyin. Haritalar URL'lerini oluşturmak veya kullanmak ücretsizdir. Bu nedenle, URL'ye API anahtarı eklemeniz gerekmez.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
İsteğe bağlı olarak, hedef ile aynı adres biçimini kullanarak bir origin
sorgu parametresi sağlayabilirsiniz. Ancak bu yön atlandığında, yol tarifi kullanıcının mevcut konumundan başlar. Bu konum, kullanıcının Locator Plus uygulamanızı kullandığı yerden farklı olabilir. Haritalar URL'leri, navigasyon açıkken yol tariflerini başlatmak için travelmode
ve dir_action=navigate
gibi ek sorgu parametresi seçenekleri sağlar.
Yukarıdaki örnek URL'yi genişleten
bu tıklanabilir bağlantı, origin
adresini Londra futbol stadyumu olarak ayarlar ve hedefe toplu taşıma yol tarifi sağlamak için travelmode=transit
adresini kullanır.
Şu anda, bu URL'yi içeren bir kısa mesaj veya e-posta göndermek için twilio gibi bir üçüncü taraf uygulaması kullanmanızı öneririz. App Engine kullanıyorsanız SMS mesajları veya e-posta göndermek için üçüncü taraf şirketlerden yararlanabilirsiniz. Daha fazla bilgi için Üçüncü Taraf Hizmetler ile Mesaj Gönderme bölümüne bakın.
Kullanıcıların konumları görselleştirmesine yardımcı olmak için Street View gösteriliyor
Dünyada birçok konum için Street View, kullanıcılara bir konuma gelmeden önce konumun görselini sunarak bir konumun dışını görüntülemek için kullanılabilir. Kullanıcılarınızın alanı 360 derece "etrafa bakmasını" isteyip istememenize bağlı olarak, Street View'ı etkileşimli (web) veya statik (API) biçimde sağlayabilirsiniz. Street View Android ve iOS için de kullanılabilir.
Coğrafi Konum ile kullanıcı konumunu belirleme
Çoğu durumda, kullanıcı cihazlarında veya tarayıcılarında yerleşik olarak bulunan konum hizmetlerini kullanarak kullanıcının konumunu belirleyebilirsiniz. Google haritasında bir kullanıcının veya cihazın coğrafi konumunu görüntülemek için bir tarayıcının HTML5 Coğrafi Konum özelliğini kullanma örneğini sağlarken, Android ve iOS'te izin isteme ve konum almayla ilgili dokümanlar da bulabilirsiniz. Bununla birlikte, alternatif bir konum bulucuya ihtiyaç duyabileceğiniz durumlar da olabilir. Örneğin, cihaz konum hizmetlerinin devre dışı olması veya cihaz konumunun adres sahteciliği yapılabileceği konusunda endişeleriniz olabilir.
Geolocation API, istemcinin algılayabileceği baz istasyonları ve kablosuz bağlantı düğümleri hakkındaki bilgilere dayalı olarak konum ve doğruluk yarıçapı döndüren bir sunucu tarafı API'dir. Coğrafi Konumu, kullanıcı konumunu belirlemek için yedek bir mekanizma olarak kullanabilir veya cihaz tarafından bildirilen konumu karşılaştırmalı olarak kontrol etmek için kullanabilirsiniz.
Özel konum verilerini Yer Ayrıntılarıyla birleştirme
Önceki Yer Ayrıntıları Sağlama bölümünde, kullanıcılara konumlarınız hakkında çalışma saatleri, fotoğraflar ve yorumlar gibi kapsamlı bilgi sağlamak için Yer Ayrıntılarını kullanma konusunu ele aldık.
Yer Ayrıntıları'nda bulunan ve Temel, Kişi ve Atmosfer Verileri olarak sınıflandırılan farklı veri alanlarının maliyetini anlamak faydalıdır. Maliyetlerinizi yönetmek için yararlanabileceğiniz stratejilerden biri, konumlarınız hakkında halihazırda sahip olduğunuz bilgileri Google Haritalar'daki yeni bilgilerle (genellikle temel ve iletişim verileri) (ör. geçici olarak kapalı olma, tatil günlerinde çalışma saatleri, kullanıcı puanları, fotoğraflar ve yorumlar) birleştirmektir. Konumlarınız için iletişim bilgilerine zaten sahipseniz bu alanları Yer Ayrıntıları'ndan istemenize gerek yoktur ve isteğinizi, görüntülemek istediğinize bağlı olarak yalnızca Temel veya Atmosfer Verileri alanlarını alacak şekilde sınırlandırabilirsiniz.
Yer Ayrıntıları yerine size destek olacak veya kullanabileceğiniz kendi yer verileriniz olabilir. Tam yığın bulucu için codelab, kendi konum ayrıntılarınızı depolamak ve almak için bir veritabanıyla GeoJSON'u kullanma örneğini sunar.