Ürün Bulucu - uygulama kılavuzu

Genel Bakış

Kullanıcılarınız internette ürünlerinizi gördüğünde en iyi ve en iyi ürünleri bulmak ister. almanın kolay bir yolunu sunuyor. Ürün Bulucu uygulama kılavuzu Bu konuda sağladığımız özelleştirme ipuçlarının yanı sıra mükemmel bir ürün oluşturmak için Google Haritalar Platformu API'lerinin optimum kombinasyonu kullanıcı deneyimleri sunmak istiyoruz.

Bu uygulama kılavuzunu izleyerek müşterilerin ürünlerinizi bulmaları için ihtiyaç duydukları bilgileri sağlar ve onlara (arabayla, bisikletle, yürüyerek veya bisikletle) ilgili ürünlerinin bulunduğu bir mağaza toplu taşıma.

API'ler etkinleştiriliyor

Ürün Konum Belirleyici'yi uygulamak için Google Cloud Console. Aşağıdaki köprüler sizi Google Cloud Console'a yönlendirir API'yi etkinleştirmek için:

• Maps JavaScript API
• Yerler API'si
• Geocoding API
• Distance Matrix API
• Directions API

Kurulum hakkında daha fazla bilgi için Başlarken Google Haritalar Platformu'nu kullanmaya başladı.

Uygulama kılavuzu bölümleri

Aşağıda, bu konuda ele alacağımız uygulama ve özelleştirme işlemleri belirtilmiştir.

• check_circle_filled. Onay işareti simgesi, temel uygulama adımıdır.
• stars. Yıldız simgesi isteğe bağlıdır ancak çözümü geliştirir.

Yer kimlikleri alınıyor

Mağazalarınızın adı gibi temel bilgileri içeren bir veritabanınız olabilir. söz konusu konumu, adresini ve telefon numarasını ilişkilendirmeniz gerekir. Google Haritalar Platformu'nda bir yerle sağladığınızda, bu hedeflerle kullanıcılar ürünleri teslim alabiliyor. Bilgileri getirmek için coğrafi bilgiler de dahil olmak üzere, Google Haritalar Platformu'nun bu yer hakkında koordinatlarını ve kullanıcı tarafından eklenen bilgileri bulmak için, veritabanınızdaki her bir mağazaya karşılık gelen yer kimliğini bulun. Şu numarayı arayabilirsiniz: Places API Yer Arama'da Yer uç noktası bulun ve yalnızca place_id alanını isteyin.

Aşağıda, Google Londra için yer kimliği istemeye ilişkin bir örnek gösterilmektedir ofis:

    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_productlocator_v1_a

Bu yer kimliğini saklayabilirsiniz diğer mağaza verilerinizle veritabanınıza eklemeli ve bu verileri mağaza hakkında bilgi isteme. Aşağıda, yer kimliğini almak, Yer Ayrıntılarını almak ve yer.

Konumlarınızın coğrafi kodlamasını yapma

Mağaza veritabanınızda açık adresler bulunuyorsa ancak coğrafi koordinatlar yoksa coğrafi kodlama API'sini kullanarak söz konusu yerin enlem ve boylamını mağazanıza en yakın olan mağazaları hesaplamak amacıyla kullanılır. yardımcı olur. Mağazanın kodunu sunucu tarafında coğrafi olarak ayarlayabilir, enlemleri boylamlar ve yenile en azından 30 günde bir.

Geocoding API'nin kullanılmasına ilişkin bir örnek Google Londra için döndürülen yer kimliğinin enlem ve boylamı ofis:

    https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a

Ürün Bulma Aracı'nın temel bileşenlerinden biri, kullanıcılarınızın konum. Kullanıcıya başlangıç tarihini belirlemesi için iki seçenek sunabilirsiniz konum: yaptıkları aramanın kaynağını yazma veya web'e erişim izni verme tarayıcı coğrafi konumu veya mobil konum hizmetleri.

Otomatik tamamlama özelliğini kullanarak yazılan girişleri işleme

Bugünün kullanıcıları, Google Haritalar'da önceden yazılmış otomatik tamamlama Google Haritalar'ın tüketici sürümü. Bu işlev, herhangi bir cihaza mobil cihazlarda Google Haritalar Platformu Yer kitaplıklarını kullanarak uygulama web'de kullanılabilir. Bir kullanıcı adresi yazdığında otomatik tamamlama diğer alanları doldurur widget'larla daha verimli bir şekilde kontrol edebilirsiniz. Kendi otomatik tamamlamanızı da sağlayabilirsiniz işlevini kullanmanız gerekir.

Aşağıdaki örnekte, Otomatik Yer Tamamlama kitaplığını sitenize eklemek için libraries=places parametresi Maps JavaScript API komut dosyası URL'si.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>

Ardından, 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 kutusu görünür. Otomatik Yer Tamamlama tahminlerini coğrafi kodlama türleriyle kısıtlama giriş alanınızı açık adresleri, mahalleleri, şehirleri ve ve posta kodları (kullanıcıların açık alanları tanımlamak için belirli bir düzeyde kaynak. Yanıtın doğru olması için geometry alanını istediğinizden emin olun kullanıcının başlangıç noktasının enlem ve boylamını içerir. Bu haritaları kullanacaksınız yerlerinizin ilişkisini belirtmek için koordinatlar başlangıç noktası.

// 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", searchFromOrigin);
}

Bu örnekte, kullanıcı adresi seçtiğinde searchFromOrigin() işlevi başlar. Bu, şu geometriyi alır: kullanıcının konumu olan eşleşen sonuç, ardından en yakındaki başlangıç noktası olarak bu koordinatlara dayalı yerleri En yakın mağazaları belirleme bölümü

Tarayıcı coğrafi konumu kullanılıyor

HTML5 tarayıcı coğrafi konumu istemek ve işlemek için şuraya bakın: Konumumu kullan penceresini etkinleştirme:

Kullanıcının konumunu öğrendikten sonra, bunu mağazanızın yeriyle karşılaştırabilirsiniz. size yardımcı olabilir. Bu, Mesafe Matrisi Hizmeti, Maps JavaScript API, kullanıcılarınızın sürüş süresi veya yol mesafesi gibi onlar için en uygun konum belirlenebilir.

Konum listesini düzenlemenin standart yolu, konumları dokunun. Bu mesafe, çoğu zaman düz çizgi kullanılarak hesaplanır konumuz olabilir, ancak bu yanıltıcı olabilir. Düz çizgi geçilmez bir nehrin üzerinden veya trafiğin yoğun olduğu yolların üzerinden geçmelisiniz. daha uygun olabilir. Bu önemli, birden fazla mesafedeki konumları belirleyebilirsiniz.

Mesafe Matrisi Hizmeti, Maps JavaScript API'nin çalışması için kalkış ve varış konumlarının listesi ile sadece seyahatin değil, hem de aralarındaki süreyi gösterir. Bir kullanıcının kaynağı ise istedikleri başlangıç noktasını ve ulaşabilecekleri hedefleri alakalı yerler olabilir. Kalkış ve varış noktaları şu şekilde belirtilebilir: koordinat çiftleri veya adres olarak; çağrısı yaptığınızda, hizmet emin olun. URL parametrelerinin Google tarafından nasıl ele alınmasını istediğinizi belirtmek için Mesafe Matrisi Hizmeti, Maps JavaScript API ve ilave parametrelerini kullanabilirsiniz.

Aşağıdaki örnekte Mesafe Matrisi Hizmeti, Haritalar JavaScript API'si, kullanıcının başlangıç noktası ve 25 mağaza konumu bulunmalıdır.

function getDistances(place) {
  let distanceMatrixService = new google.maps.DistanceMatrixService();
  const origins = [place];
  return new Promise((resolve, reject) => {
    const callback = (response, status) => {
      if (status === google.maps.DistanceMatrixStatus.OK && response) {
        resolve(response);
      } else {
        reject(status);
      }
    };
    distanceMatrixService.getDistanceMatrix(
      {
        origins,
        destinations: stores.slice(0, 25).map((store) => store.location),
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
      },
      callback
    );
  });
}

function update(location) {
  if (!location) {
    return;
  }

  // ...

  // sort by spherical distance
  stores.sort((a, b) => {
    return (
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(a.location),
        location
      ) -
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(b.location),
        location
      )
    );
  });

  // display travel distance and time
  getDistances(location)
    .then((response) => {
      for (let i = 0; i < response.rows[0].elements.length; i++) {
        stores[i].address = response.destinationAddresses[i];
        stores[i].travelDistance = response.rows[0].elements[i].distance.value;
        stores[i].travelDistanceText =
          response.rows[0].elements[i].distance.text;
        stores[i].travelDuration = response.rows[0].elements[i].duration.value;
        stores[i].travelDurationText =
          response.rows[0].elements[i].duration.text;
      }
    })
    .finally(() => {
      renderCards(stores);
      autocompleteInput.disabled = false;
      isUpdateInProgress = false;
    });
}

Yakındaki her konum için şu ayrıntılara göre ürünün stok durumunu gösterebilirsiniz: emin olmanız gerekir.

İletişim bilgileri, çalışma saatleri, müşterilerin tercih ettikleri konumu veya mevcut açık durumu seçmesine yardımcı olmak için siparişlerini sonlandırıyor.

Yer Ayrıntılarını almak için Maps JavaScript API yanıtı 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. Cihazınızın yer kimliğini almak için Yer kimliklerini alma konusuna bakın konum.

Aşağıdaki Yer Ayrıntısı isteği; adres, koordinatları, web sitesini Google Londra yer kimliği için telefon numarası, derecelendirme ve çalışma saatleri:

var request = {
  placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
  fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website']
};


service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarker(place);
  }
}

Ürün Bulucu'yu İyileştirme

İşletmenizin veya kullanıcılarınızın özelliklerine bağlı olarak kullanıcının ihtiyaçlarını daha da sunmaktır.

Kullanıcılara siteniz veya uygulamalarınızın içinden yol tarifi gösterdiğinizde, kullanıcılarınız Bu sayede sitenizden ayrılıp diğer kullanıcıların dikkatinin dağılması gerekmez. veya haritadaki rakipleri görebilir. Mesela yıl boyunca 2000'den bu yana ve belirli bir yolculuğun etkisini göstermek için bu araçtan yararlanmak üzere sahip olabileceğiniz karbon veri kümesidir.

Yol Tarifi Hizmeti ayrıca sonuçları işlemenize ve harita üzerinde kolayca görüntüleyebilirsiniz.

Aşağıda, bir yol tarifi panelinin görüntülenmesi örneği gösterilmektedir. Okuyucu Gelirleri Yöneticisi'ni örnekte Metin yol tariflerini görüntüleme bölümüne bakın.

Kullanıcıların bir konuma ulaşmasını daha da kolaylaştırmak için kısa mesaj veya e-posta gönderebilirsiniz bir yol tarifi bağlantısı ekleyin. Kullanıcı bu düğmeyi tıkladığında Google Haritalar uygulaması yüklüyse kullanıcının telefonunu veya maps.google.com adresini kullanıcının cihazına yükleyecektir. web tarayıcısı. Bu deneyimlerin her ikisi de kullanıcıya Hedefe ulaşmak için sesli yardım da dahil olmak üzere adım adım navigasyon.

kullan aşağıdaki gibi bir yol tarifi URL'si oluşturmak için destination parametresi ve yer olarak URL kodlamalı yer adı destination_place_id parametresi olarak kimlik. Bu projenin Haritalar URL'leri oluşturun veya kullanın, böylece API anahtarı eklemenize gerek kalmaz gelir.

https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU

İsterseniz bir origin sorgu parametresi için aynı adresi biçimini hedef olarak ayarlayın. Ancak bunu atladığınızda talimatlar, kullanıcının bulunduğu yerden farklı olabilir. uygulamanızı indirin. Haritalar URL'leri travelmode ve benzeri ek sorgu parametresi seçenekleri sağlar Navigasyon açıkken yol tariflerini başlatmak için dir_action=navigate beklemeye gerek yoktur.

Yukarıdaki örnek URL'yi genişleten bu tıklanabilir bağlantı, origin şehrini Londra futbol stadyumu olarak Şu konum için toplu taşıma yol tarifini sağlamak için travelmode=transit: seçeceğiz.

Bu URL'yi içeren bir kısa mesaj veya e-posta göndermek için şu anda üçüncü taraf uygulaması (örneğin, twilio ile giriş yapın. App Engine kullanıyorsanız SMS göndermek için üçüncü taraf şirketlerden yararlanabilirsiniz tercih edebilirsiniz. Daha fazla bilgi için bkz. Üçüncü Taraf Hizmetler ile Mesaj Gönderme

Dinamik haritaları kullanma

Bulucu, kullanıcı deneyiminin önemli bir parçasıdır. Ancak bazı siteler kullanıcıların aradıklarını bulmak için siteden veya uygulamadan ayrılmalarını gerektiren basit bir haritanın dahi yakındaki konum. Bu durumda da gereken bilgileri almak için sayfalar arasında gezinebilir. Bunun yerine doğrudan uygulamanıza haritalar yerleştirerek ve bunları özelleştirerek izin verir.

Sayfanıza dinamik harita (kullanıcıların taşıyabileceği bir harita) ekleme yakınlaştırma ve uzaklaştırma yapabilir, farklı konumlar ve yerler hakkında yalnızca 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_productlocator_v1_a"></script>

URL,initMap sayfa yüklenir. URL'de ayrıca, haritanızın doğru şekilde biçimlendirildiğinden emin olmak için dil veya bölge hedeflemenize yardımcı olur. Bölge ayarlamak, ABD dışında kullanılan uygulamaların davranışı, ABD dışında kullanılan seçtiğiniz bölgeye göre belirlenir. Google Haritalar Platformu Kapsamı Ayrıntıları'nı görüntüleyin. desteklenen diller ve bölgelerin tam listesini gözden geçirin ve region 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 işlem Komut dosyası URL'sinde initMap komut dosyası işlevi belirtildi. Bu komut dosyasında aşağıdaki örnekte gösterildiği gibi, ilk konumu; harita türünü ve Harita üzerinde kullanıcılarınızın hangi denetimleri kullanabileceğini belirleyin. Not: getElementById(), "harita"yı referans alıyor div kimliği yukarıda.

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, yakınlaştırma düzeyini (haritanın bu sınıra ne kadar yakınlaştırıldığı) yer). Denetimlerin ayarlanması gibi diğer öğelerin çoğu, kullandığınız Haritayla etkileşim düzeyini belirleyin.

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, Ö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.
• Gösterilecek önemli yerleri kontrol edin (turistik yerler, yemek, konaklama vb.) Böylece, hangi yoğunlukta olduğunu vurgular ve kullanıcıların dikkatini konumlarınıza odaklamanızı sağlar. Kullanıcıların en yakın konuma gitmelerine yardımcı olan önemli noktalar.

Özel harita işaretçileri oluşturma

İşaretçilerinizi, varsayılan rengi değiştirerek özelleştirebilirsiniz (büyük olasılıkla bir konumun şu anda açık olup olmadığı) ya da işaretçiyi özel bir bir resim (ör. markanızın logosu) Bilgi pencereleri veya pop-up pencereler, Kullanıcılara çalışma saatleri, telefon numarası, telefon numarası ve ve hatta fotoğraflardan bile. Ayrıca kafes, vektör, animasyonlu hatta sürüklenebilir.

Aşağıda, özel işaretçilerin kullanıldığı örnek bir harita verilmiştir. (Kaynak koduna bakın: Maps JavaScript API özel işaretçileri konusu).

Ayrıntılı bilgi için JavaScript (web) Android ve iOS

Haritanızın stilini belirleme

Google Haritalar Platformu, haritanızı, kullanıcıların daha kolay bulacağı şekilde şekillendirmenize olanak tanır oraya olabildiğince kısa sürede varmak ve bulunduğunuz konumu markanız. Örneğin, harita renklerini markanıza uygun şekilde değiştirebilir ve önemli yerleri kontrol ederek haritadaki dikkat dağıtıcı unsurları azaltabilirsiniz görebileceğiz. Google Haritalar Platformu'nda sunulan bir dizi çeşitli sektörler için optimize edilmiş yeni harita başlangıç şablonları seyahat, lojistik, emlak ve perakende gibi birçok alanda kullanılabilir.

Google Cloud Console'da harita stillerini oluşturabilir veya değiştirebilirsiniz Harita Stilleri sayfasını belirler.

Harita stili oluşturma ve harita stili oluşturma animasyonlarını görmek için stil özelliklerini ayarlamalısınız:

Sektör haritası stilleri

Bu animasyonda, kullanabileceğiniz önceden tanımlanmış sektöre özgü harita stilleri pek de iyi olmadığını unutmayın. Bu stiller her tür türü için en uygun başlangıç zamanlar olacaktır. Örneğin, Perakende harita stili önemli yerleri azaltıyor Bu şekilde, kullanıcıların hem konumunuza hem de Google Haritalar'da ve en yakın konuma hızlı ve kolay bir şekilde gidebilmeleri için kendinize güvenerek yapabilirsiniz.

Önemli yer kontrolü

Bu animasyon önemli yerler için işaretçi rengini belirler ve harita stilinde ÖY yoğunluğunu artırır. Yoğunluk ne kadar yüksek olursa Haritada daha fazla ÖY işaretçisi görünür.

Her harita stilinin kendi kimliği vardır. Şurada bir stil yayınladıktan sonra: kodunuzda bu harita kimliğine referans verirsiniz. Bu kimlik, uygulamanızı yeniden düzenlemeden harita stilini gerçek zamanlı olarak güncelleyebileceğiniz anlamına gelir. İlgili içeriği oluşturmak için kullanılan yeni görünüm otomatik olarak mevcut uygulamada görünecek ve yardımcı olabilir. Aşağıdaki örneklerde, web sayfasına harita kimliği ekleme işlemi gösterilmektedir nasıl kullanacağınızı göstereceğim.

Komut dosyası URL'sine bir veya daha fazla map_ids eklediğinizde Maps JavaScript API, bu stilleri otomatik olarak kullanıma sunar Böylece, kodunuzda bu stilleri çağırdığınızda daha hızlı harita oluşturabilirsiniz.

<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a">
</script>

Aşağıdaki kod, web sayfasında stilize edilmiş bir harita görüntüler. (Bir HTML kodu gösterilmez Haritanın görüneceği <div id="map"></div> öğe sayfada.)

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.485925, lng: -0.129500},
zoom: 12,
mapId: '1234abcd5678efgh'
});

Google Cloud'a bulut tabanlı harita stilleri ekleme JavaScript (web) Android, ve iOS

Önceki Etkileşimli harita üzerinde yerlerinizi gösterme bölümünde, kullanıcılara zengin bir deneyim seviyesi sunmak için Yer Ayrıntılarını çalışma saatleri, fotoğraflar ve yorumlar gibi konumlarınızla ilgili bilgiler.

Proje zaman çizelgesini maliyeti Farklı veri alanları vardır. Bunlar Temel, İletişim ve Atmosfer Verileri. Maliyetlerinizi yönetmek için bir strateji, konumlarınız hakkında sahip olduğunuz bilgiler yeni bilgilerle (Genellikle Temel ve İletişim Verileri) Google Haritalar'dan alınan, geçici süreyle kapalı olma gibi, çalışma saatleri ve kullanıcı puanları, fotoğrafları ve yorumları. Mevcut mağazalarınızın iletişim bilgilerini sağlamak için bu alanları Yer Ayrıntıları ve isteğinizi yalnızca Temel veya Atmosfer öğelerini getirecek şekilde kısıtlayabilir Görüntülemek istediğiniz verilere bağlı olarak veri alanları.

Google'ın değil, aynı zamanda Google Haritalar'daki yer verilerini kullanmak yerine Yer Ayrıntıları. İlgili içeriği oluşturmak için kullanılan kod laboratuvarı tam yığın bulucu için GeoJSON'u bir veritabanıyla konum bilgilerinizi saklayıp alabilirsiniz.