Genel Bakış
Google Haritalar Platformu; web (JS, TS), Android ve iOS için ve yerler, yol tarifleri ve Google'dan hakkında bilgi edinmek için web hizmetleri API'leri görebilirsiniz. Bu kılavuzdaki örnekler bir platform için yazılmıştır ancak belge bağlantıları diğer platformlarda uygulanmak üzere sağlanmıştır.
Hızlı Oluşturucu Google Cloud Console, JavaScript kodu oluşturan etkileşimli bir kullanıcı arayüzü sunar.
Online alışveriş ve sipariş verme, hayatımızın en yaygın parçalarından biri haline geldi. Aynı güne ait taksi rezervasyonu ya da akşam yemeği siparişi vermek gibi iş fırsatları gibi zahmetsiz ödeme süreci.
Ancak bu uygulamaların tümünde adres girişi için faturalandırma veya gönderim bedeli, ödeme akışında bir engel olarak kalabilir. ve külfetli hale geldi. Sorunsuz bir ödeme deneyimi daha da önemli hale geliyor küçük ekranlarda karmaşık metin girmenin sinir bozucu olabildiği ve dönüşümünün önündeki başka bir engel.
Bu konu, müşterilerinizin dönüşüm sürecini hızlandırmasına yardımcı olacak uygulama rehberliği içerir. tahmine dayalı adres girişiyle ödeme sürecini kolaylaştırır.
Aşağıdaki şemada, Google Checkout'un uygulanmasıyla ilgili temel API'ler gösterilmektedir (büyütmek için tıklayın).
![](https://developers.google.cn/static/maps/solutions/images/checkout/checkout_arch_diagram.png?authuser=19&hl=tr)
API'ler etkinleştiriliyor
Google Checkout'u 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.
Uygulamalar bölümleri
Aşağıda, bu konuda ele alacağımız ipuçları ve özelleştirmeler verilmiştir.
- . Onay işareti simgesi temel uygulamalardan biridir.
- . Yıldız simgesi isteğe bağlıdır ancak çözümü geliştirir.
Giriş alanlarına otomatik tamamlama ekleme | Adres formunu otomatik olarak doldurun. Kullanıcıyı iyileştirmek için "kullandıkça yaz" işlevi ekleyin tüm platformlarda kullanım deneyimi sunmak ve en az tuş vuruşlarıyla adres doğruluğunu artırmak. | |
Haritalar Statik API ile görsel onay sağlama | Belirli bir adresin enlem/boylam koordinatlarını bulma (coğrafi kodlama), veya coğrafi bir konumun enlem/boylam koordinatlarını coğrafi kodlamayı tersine çevirin. | |
Ödeme özelliğini daha da geliştirmek için ipuçları | Ödeme deneyimi için Otomatik Yer Tamamlama gelişmiş özelliklerini kullanın daha da iyi hale getirir. |
Giriş alanlarına otomatik tamamlama özelliği ekleniyor
Bu örnekte şunlar kullanılmaktadır: Yerler Kitaplığı, Maps JavaScript API | Sunulan diğer seçenekler: Android | iOS |
Otomatik Yer Tamamlama uygulamanızda adres girmeyi kolaylaştırarak daha yüksek dönüşüm oranları elde etmenize ve sorunsuz bir deneyim yaşayabilirsiniz. Otomatik tamamlama tek bir hızlı giriş alanı sağlar "type-ahead" olarak bir faturayı otomatik olarak doldurmak için kullanılabilecek adres tahmini gönderim adresi formunu doldurun.
Otomatik Yer Tamamlama özelliğini çevrimiçi alışveriş sepetinize ekleyerek şunları yapabilirsiniz:
- Adres girişi hatalarını azaltın.
- Ödeme sürecindeki adım sayısını azaltın.
- Mobil veya giyilebilir cihazlarda adres girişi deneyimini basitleştirin.
- Müşterinin tuş vuruşlarını ve bir şeyi sipariş.
Kullanıcı Otomatik tamamlama giriş kutusunu seçip yazmaya başladığında adres listesi tahminler görünür:
![](https://developers.google.cn/static/maps/solutions/images/checkout/places_autocomplete_suggest.png?authuser=19&hl=tr)
Kullanıcı tahmin listesinden bir adres seçtiğinde, yanıtı kullanarak adresi doğrulayabilir ve konumu alabilirsiniz. Daha sonra uygulamanız doğru alanları doldurabilir aşağıdaki adımları uygulayın:
![](https://developers.google.cn/static/maps/solutions/images/checkout/autocomplete_form.png?authuser=19&hl=tr)
Videolar: Otomatik Yer Tamamlama özelliğiyle adres formlarını geliştirin:
Adres formları
Web
Android
iOS
Otomatik Yer Tamamlama özelliğini kullanmaya başlama
Place Autcomplete'i eklemek için yalnızca birkaç satırlık bir JavaScript kodu gerekir sitenizi ziyaret edin.
En kolay yol, Maps JavaScript API'yi eklemektir ( (harita görüntülemez) de ekleyebilirsiniz ve Yerler kitaplığını şurada gösterildiği gibi: aşağıdaki örneğe bakın. Bu örnek, ilk kullanıma hazırlama işlevini de yürütür.
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>
Ardından, kullanıcı girişi için sayfanıza bir metin kutusu ekleyin:
<input id="autocomplete" placeholder="Enter your address"></input>
Son olarak, Otomatik tamamlama hizmetini başlatın ve adlandırılmış metin kutusuna bağlayın:
function initAutocomplete() {
// Create the autocomplete object, restricting the search predictions to
// addresses in the US and Canada.
autocomplete = new google.maps.places.Autocomplete(address1Field, {
componentRestrictions: { country: ["us", "ca"] },
fields: ["address_components", "geometry"],
types: ["address"],
});
address1Field.focus();
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener("place_changed", fillInAddress);
}
Yukarıdaki örnekte, place_changed
etkinlik işleyicisi
Kullanıcı bir adres tahmini seçer ve
fillInAddress
işlevi yürütülür.
Aşağıdaki örnekte gösterildiği gibi, işlev seçilen yanıtı alır ve
bir form içinde görselleştirilecek adres bileşenlerini çıkarır.
TypeScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": (document.querySelector("#locality") as HTMLInputElement).value = component.long_name; break; case "administrative_area_level_1": { (document.querySelector("#state") as HTMLInputElement).value = component.short_name; break; } case "country": (document.querySelector("#country") as HTMLInputElement).value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); }
JavaScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": document.querySelector("#locality").value = component.long_name; break; case "administrative_area_level_1": { document.querySelector("#state").value = component.short_name; break; } case "country": document.querySelector("#country").value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); } window.initAutocomplete = initAutocomplete;
Bu verileri aldıktan sonra, kullanıcı için eşleşen adres olarak kullanabilirsiniz. Birkaç kişiden kullanarak, müşterinin kısa bir süre içinde doğru adresi girmesini sağlayabilirsiniz. gerekir.
Bu e-postada bir adres giriş formu doldurmak için çalışan bir demoyu ve tam kaynak kodunu kod örnek bölümüne bakın.
Otomatik Yer Tamamlama özelliğini uygularken dikkat edilmesi gereken noktalar
Yer Otomatik Tamamlama özelliği, esnek olmasını sağlayan pek çok seçenek sunar. widget'tan daha fazlasını kullanmak istiyorsanız Özel Korumalı Alan için ve konumlarınızı doğru şekilde eşleştirmek için ihtiyacınız olan her şeyi sunar.
-
Adres formu için
types
parametresiniaddress
olarak ayarlayın: Eşleşmeleri tam açık adreslerle sınırlandırın. Daha fazla bilgi: desteklenen türler Konum Otomatik Tamamlama isteklerinde. -
Uygun kısıtlamaları ayarlayın
ve önyargılara neden olabilir. Bir dizi parametre,
herhangi bir eşleşmeyi yalnızca belirli bölgelerle etkilemek veya kısıtlamak için kullanılabilir.
-
Bir alan için kısıtlanacak dikdörtgen sınırları ayarlamak için
bounds
işlevini kullanın. Yalnızca bu bölgelerdeki adreslerin döndürüldüğünden emin olmak içinstrictBounds
. -
Yanıtları belirli bir grup ile sınırlamak için
componentRestrictions
kullanın ülkeler.
-
Bir alan için kısıtlanacak dikdörtgen sınırları ayarlamak için
- Eşleşmede belirli alanların eksik olması ihtimaline karşı alanları düzenlenebilir bırakın ve müşterilere izin verin veya gerekiyorsa adresi güncelleyebilir. Çoğu adres Yer Otomatik Tamamlama tarafından döndürüldüğünden Apartman, daire veya daire numarası gibi alt bina numaralarını içermemelidir. örnek, odağı Adres Satırı 2'ye taşır ve kullanıcıyı isteyebilirsiniz.
Maps Static API ile görsel onay sağlama
Adres girişinden sonra kullanıcıya teslimat veya teslim alma konumunun basit bir statik haritasıyla. Böylece müşteri, ek güvence sağlar. ve teslimat/teslim alma hatalarını azaltacaktır. Statik harita, veya ziyaret ettiklerinde de onay e-postası ile gönderdikleri tamamlamış olması gerekir.
Bu kullanım alanlarının her ikisi de Haritalar Statik API, Bu etiket, bir sayfa veya e-postadaki herhangi bir resim etiketine haritanın resim sürümünü ekler.
![](https://developers.google.cn/static/maps/solutions/images/checkout/track_package.png?authuser=19&hl=tr)
Maps Static API'yi kullanmaya başlama
Maps Static API'yi bir web hizmeti çağrısı kullanarak kullanabilirsiniz. Bu çağrı, belirttiğiniz parametrelere göre bir haritanın resim sürümü Dinamik haritada olduğu gibi, harita türünü belirtebilir, aynı bulut tabanlı stilleri kullanabilir ve konumu ayırt etmektir.
Aşağıdaki çağrıda, Googleplex'e ortalanmış 600x300 piksel boyutunda bir yol haritası gösterilmektedir ve Mountain View, California'da 13 yakınlaştırma düzeyinde göreceksiniz. Ayrıca mavi bir teslimat konumu belirtir ve çevrimiçi harita stilini kullanabilirsiniz.
https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
&zoom=13
&size=600x300
&maptype=roadmap
&markers=color:blue%7Clabel:S%7C37.422177,-122.084082
&map_id=8f348d1b5a61d4bb
&key=YOUR_API_KEY
&solution_channel=GMP_guides_checkout_v1_a
Bu, aşağıdaki bölümlere ayrılır:
API URL'si | https://maps.googleapis.com/maps/api/staticmap? |
harita merkezi | merkez=37.422177,-122.084082 |
yakınlaştırma düzeyi | yakınlaştırma=13 |
resim boyutu | boyut=600x300 |
harita türü | maptype=roadmap |
mağaza konumu işaretçileri | markers=color:blue%7Clabel:C%7C37.422177,-122.084082 |
bulut harita stili | map_id=8f348d1b5a61d4bb |
API Anahtarı | key=YOUR_API_KEY |
Çözüm kanalı parametresi (bkz. parametre belgeleri) | solution_channel=GMP_guides_checkout_v1_a |
Bu, aşağıda gösterildiği gibi resim haline gelir:
![](https://developers.google.cn/static/maps/solutions/images/checkout/static_map.png?authuser=19&hl=tr)
Maps Static API seçenekleri hakkında daha fazla bilgi için belgeleri inceleyin.
Google Checkout'u daha da geliştirmek için ipuçları
Müşteri deneyimini daha da iyileştirmek için, Müşteri'lerin otomatik tamamlamanın sunduğu özellikler hakkında daha fazla bilgi edinin. Aşağıda, Adres girişini otomatik tamamla:
-
Yer Ayrıntıları.
Hem adres hem de kuruluş adı girilmesine izin vermek için
Otomatik tamamlama tanımından
types
özellik.
.
Kullanıcıların, işletme veya önemli yer adına dayalı adres girmesine izin verin.
"İleriye doğru yazın" tahmin hizmeti yalnızca adresler için değil, aynı zamanda
işletme veya önemli nokta adlarının girilmesine izin verir. Kullanıcı bir işletme adı girdikten sonra
bir çağrı ile adresi kolayca alabilirsiniz.
- okuma inceleyin. . Otomatik Yer Tamamlama kutusunun görünümünü ve tarzını eşleşecek şekilde özelleştirin sitenizin stilini kontrol edin. Otomatik tamamlama widget'ını alışveriş sepetinizin görünümüne ve tarzına uyacak şekilde de biçimlendirebilirsiniz. Özelleştirebileceğiniz bir dizi CSS sınıfı mevcuttur. Daha fazla bilgi için otomatik tamamlama kutunuzun stilini belirleyin,
- JavaScript, Android, ve iOS çağrılarını doğrudan Places API. . Özel bir kullanıcı arayüzü oluşturmak istiyorsanız. Google tarafından tasarlanan kullanıcı arayüzünü kullanmak yerine özel bir kullanıcı arayüzü oluşturmak Belirli bir girişle ilgili tahminleri almak için Otomatik Tamamlama hizmetini programlı bir şekilde yerleştirin. Otomatik Yer Tamamlama tahminlerini programatik olarak şurada alabilirsiniz: