Ürün Bulucu - uygulama kılavuzu

Genel Bakış

Kullanıcılarınız, ürünlerinizi internette gördüklerinde siparişlerini teslim almanın en iyi ve en uygun yolunu bulmak ister. Mükemmel ürün bulucu kullanıcı deneyimleri oluşturmak için Google Haritalar Platformu API'lerinin en uygun kombinasyonu olarak bu konuda sunduğumuz ürün bulucu uygulama kılavuzu ve özelleştirme ipuçlarını öneririz.

Bu uygulama kılavuzunu uygulayarak müşterilerin ürünlerinizi bulmak için ihtiyaç duydukları ayrıntılı bilgileri görmelerine yardımcı olabilir ve araba, bisiklet, yürüyüş veya toplu taşıma kullanarak ürünün bulunduğu mağazaya gitmek için yol tarifi verebilirsiniz.

API'ler etkinleştiriliyor

Ürün Bulucu'yu uygulamak için Google Cloud Console'da aşağıdaki API'leri etkinleştirmeniz gerekir. Aşağıdaki köprü bağlantıları, seçtiğiniz proje için her API'yi etkinleştirmek üzere sizi Google Cloud Console'a yönlendirir:

• Maps JavaScript API
• Places API
• Geocoding API
• Distance Matrix API
• Directions API

Kurulum hakkında daha fazla bilgi için Google Haritalar Platformu'nu kullanmaya başlama başlıklı makaleyi inceleyin.

Uygulama kılavuzu bölümleri

Bu konuda ele alacağımız uygulamalar ve özelleştirmeler aşağıda verilmiştir.

• check_circle_filled Onay işareti simgesi, temel bir uygulama adımıdır.
• stars Yıldız simgesi, çözümü iyileştirmek için isteğe bağlı ancak önerilen bir özelleştirmedir.

check_circle_filled	Mağaza konumlarını Google Haritalar Platformu yerleriyle ilişkilendirme	Bir mağaza konumunu Google Haritalar Platformu'ndaki bir yerle eşleştirme
check_circle_filled	Kullanıcının konumunu belirleme	Tüm platformlarda kullanıcı deneyimini iyileştirmek ve minimum tuş vuruşuyla adres doğruluğunu artırmak için yazdıkça ekleme işlevi ekleyin.
check_circle_filled	En yakın mağazaları belirleme	İsteğe bağlı olarak yürüyüş, araba, toplu taşıma veya bisiklet gibi çeşitli ulaşım biçimlerini belirterek birden fazla başlangıç ve hedef için seyahat mesafesini ve süresini hesaplayın.
check_circle_filled	Mağaza bilgilerini görüntüleme	Kullanıcıların mağazalarınıza daha kolay gidebilmesi için mağazalarınızla ilgili zengin veri içeren bilgiler gösterin.
stars	Navigasyon yol tarifi sağlama	Yürüyüş, araba, bisiklet ve toplu taşıma gibi çeşitli ulaşım araçlarını kullanarak başlangıç noktasından varış noktasına yol tarifi verileri alın.
stars	Mobil cihaza yol tarifi gönderme	Web sayfanızda yol tarifi göstermenin yanı sıra, kullanıcıların telefonlarına yol tarifi göndererek Google Haritalar'ı kullanarak hareket halindeyken navigasyon yapabilirsiniz.
stars	Konumlarınızı etkileşimli bir haritada gösterme	Konumlarınızın öne çıkmasını sağlamak için özel harita işaretçileri oluşturun ve haritanın stilini marka renklerinizle eşleşecek şekilde ayarlayın. Kullanıcıların kendilerini daha iyi yönlendirmesine yardımcı olmak için haritanızda belirli önemli yerleri (ÖY) gösterin (veya gizleyin) ve haritanın dağınık olmasını önlemek için ÖY yoğunluğunu kontrol edin.
stars	Özel konum verilerini Yer Ayrıntıları ile birleştirme	Kullanıcılara karar verme konusunda zengin bir veri grubu sunmak için kendi özel konum ayrıntılarınızı Yer Ayrıntıları ile birleştirin.

Yer kimlikleri alma

Bu örnekte şunlar kullanılır: Places API

Ayrıca: JavaScript

Mağazalarınızın adı, adresi ve telefon numarası gibi temel bilgilerin yer aldığı bir veritabanınız olabilir. Bu veritabanını, kullanıcılarınızın ürün teslim alabileceği nihai varış noktaları olarak Google Haritalar Platformu'ndaki bir yerle ilişkilendirmek istiyorsunuz. Coğrafi koordinatlar ve kullanıcı tarafından eklenen bilgiler de dahil olmak üzere Google Haritalar Platformu'nun ilgili yerle ilgili sahip olduğu bilgileri almak için veritabanınızdaki mağazaların her birine karşılık gelen yer kimliğini bulun. Places API Yer Arama'da Yer Bulma uç noktasına çağrı gönderebilir ve yalnızca place_id alanını isteyebilirsiniz.

Aşağıda, Google Londra ofisinin yer kimliğinin istenmesine dair bir örnek gösterilmektedir:

    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 mağaza verilerinizin geri kalanıyla birlikte veritabanınızda saklayabilir ve mağaza hakkında bilgi istemek için verimli bir yöntem olarak kullanabilirsiniz. Aşağıda, coğrafi kod oluşturmak, yer ayrıntılarını almak ve yere yol tarifi istemek için yer kimliğini kullanmayla ilgili talimatlar verilmiştir.

Konumlarınızı coğrafi kodlama

Bu örnekte şunlar kullanılır: Geocoding API

Ayrıca: JavaScript

Mağaza veritabanınızda sokak adresleri varsa ancak coğrafi koordinatlar yoksa müşterinize en yakın mağazaları hesaplamak için Geocoding API'yi kullanarak bu adresin enlem ve boylamını alın. Mağazayı sunucu tarafında coğrafi kodlayabilir, enlem ve boylamları veritabanınızda saklayabilir ve en az 30 günde bir yenileyebilirsiniz.

Google Londra ofisi için döndürülen yer kimliğinin enlem ve boylamını almak üzere Geocoding API'nin kullanıldığı bir örnek aşağıda verilmiştir:

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

Bu örnekte şunlar kullanılır: Maps JavaScript API'deki Yerler Otomatik Tamamlama Kitaplığı

Ayrıca kullanılabilir: Android | iOS

Ürün Bulucu'nun önemli bir bileşeni, kullanıcınızın başlangıç konumunu tanımlamaktır. Kullanıcının başlangıç konumunu belirtmesi için iki seçenek sunabilirsiniz: Aramanın kaynağını yazma veya web tarayıcısı coğrafi konumu ya da mobil konum hizmetlerine izin verme.

Otomatik tamamlamayı kullanarak yazılan girişleri işleme

Günümüzde kullanıcılar, Google Haritalar'ın tüketici sürümündeki otomatik tamamlama ve yazmaya devam etme işlevine alışmış durumda. 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 aracılığıyla kalan kısmı doldurur. Ayrıca, doğrudan Yerler kitaplıklarını kullanarak kendi otomatik tamamlama işlevinizi de sağlayabilirsiniz.

Aşağıdaki örnekte, Maps JavaScript API komut dosyası URL'sine libraries=places parametresini ekleyerek Otomatik Yer Tamamlama kitaplığını sitenize ekleyin.

<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 kutusuna bağlamanız gerekir. Yer otomatik tamamlama tahminlerini coğrafi kod türleriyle sınırlandırmak, giriş alanınızı sokak adreslerini, mahalleleri, şehirleri ve posta kodlarını kabul edecek şekilde yapılandırır. Böylece kullanıcılar, kökenlerini tanımlamak için istedikleri düzeyde ayrıntı girebilir. Yanıtın, kullanıcının kaynağının enlem ve boylamını içermesi için geometry alanını istediğinizden emin olun. Bu harita koordinatlarını, konumlarınızın başlangıçla olan ilişkisini belirtmek için 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", searchFromOrigin);
}

Bu örnekte, kullanıcı adresi seçtikten sonra searchFromOrigin() işlevi başlar. Bu işlem, eşleşen sonucun (kullanıcı konumu) geometrisini alır ve ardından En yakın mağazaları belirleme bölümünde açıklandığı gibi, bu koordinatları başlangıç noktası olarak kullanarak en yakın konumları arar.

Tarayıcı coğrafi konumunu kullanma

HTML5 tarayıcı coğrafi konumunu istemek ve işlemek için Konumumu kullan penceresini etkinleştirme hakkında bilgi edinin:

Bu örnekte şunlar kullanılır: Distance Matrix Hizmeti, Maps JavaScript API

Ayrıca kullanılabilir: Distance Matrix API

Kullanıcının konumunu öğrendikten sonra bunu mağaza konumlarınızla karşılaştırabilirsiniz. Maps JavaScript API, Mesafe Matrisi Hizmeti ile bunu yaparak kullanıcılarınızın sürüş süresi veya yol mesafesine göre kendileri için en uygun konumu seçmesine yardımcı olur.

Konum listesini düzenlemenin standart yolu, konumları mesafeye göre sıralamaktır. Bu mesafe genellikle kullanıcıdan konuma olan düz çizgi kullanılarak hesaplanır ancak bu yanıltıcı olabilir. Düz çizgi, başka bir konumun daha uygun olabileceği bir zamanda geçilmesi zor bir nehrin üzerinden veya yoğun trafikli yollardan geçebilir. Bu, birbirine birkaç kilometre mesafede birden fazla konumunuz olduğunda önemlidir.

Maps JavaScript API'nin Mesafe Matrisi Hizmeti, bir kaynak ve hedef konum listesini alarak yalnızca seyahat mesafesini değil, aralarındaki süreyi de döndürür. Kullanıcının durumunda, başlangıç noktası şu anda bulunduğu yer veya istenen başlangıç noktası, hedefler ise konumlarınki noktalardır. Başlangıç ve varış noktaları, koordinat çiftleri veya adresler olarak belirtilebilir. Hizmeti çağırdığınızda hizmet, adresleri eşleştirir. Mevcut veya gelecekteki sürüş sürelerine göre sonuçları göstermek için ek parametrelerle Distance Matrix Hizmeti'ni, Maps JavaScript API'yi kullanabilirsiniz.

Aşağıdaki örnekte, kullanıcının başlangıç noktasını ve aynı anda 25 mağaza konumunu belirterek Mesafe Matrisi Hizmeti'ne (Maps JavaScript API) çağrı yapılmaktadı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ınınızdaki her konum için envanter veritabanınıza göre ürünün stok durumunu gösterebilirsiniz.

Bu örnekte şunlar kullanılır: Yerler Kitaplığı, Maps JavaScript API

Şunları da kullanabilirsiniz: Android için Yerler SDK'sı | iOS için Yerler SDK'sı | Places API

Müşterilerin tercih ettikleri konumu seçmelerine veya siparişlerini tamamlamalarına yardımcı olmak için iletişim bilgileri, çalışma saatleri ve mevcut açık durumu gibi zengin yer ayrıntılarını paylaşabilirsiniz.

Yer ayrıntılarını almak için Maps JavaScript API'ye çağrı yaptıktan sonra yanıtı filtreleyebilir ve oluşturabilirsiniz.

Yer ayrıntıları isteğinde bulunmak için her konumunuzun yer kimliğine ihtiyacınız vardır. Konumunuzun yer kimliğini almak için Yer kimlikleri alma başlıklı makaleyi inceleyin.

Aşağıdaki Yer Ayrıntıları isteği, Google Londra yer kimliğinin adresini, koordinatlarını, web sitesini, telefon numarasını, puanını ve çalışma saatlerini döndürür:

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 Geliştirme

İşletmenize veya kullanıcılarınızın ihtiyaçlarına bağlı olarak kullanıcı deneyimini daha da iyileştirebilirsiniz.

Bu örnekte şunlar kullanılır: Maps JavaScript API Directions Hizmeti

Ayrıca: Directions API Android ve iOS'te doğrudan uygulamadan veya uzaktan bir sunucu proxy'si üzerinden kullanılabilen web hizmeti

Kullanıcılara sitenizden veya uygulamalarınızdan yol tarifi gösterdiğinizde kullanıcılarınızın sitenizden ayrılıp diğer sayfalarla dikkatinin dağılması veya haritadaki rakipleri görmesi gerekmez. Hatta sahip olabileceğiniz bir karbon veri kümesini kullanarak belirli bir seyahat şeklinin karbon emisyonlarını ve belirli bir yolculuğun etkisini gösterebilirsiniz.

Yol Tarifi Hizmeti'nde, sonuçları işleyip haritada kolayca görüntülemenizi sağlayan işlevler de bulunur.

Aşağıda, yol tarifi panelinin gösterildiği bir örnek verilmiştir. Sana Özel bölümündeki örnekler hakkında daha fazla bilgi için Metin talimatlarını görüntüleme başlıklı makaleyi inceleyin.

Kullanıcıların bir yere ulaşmasını daha da kolaylaştırmak için onlara yol tarifi bağlantısı gönderebilirsiniz. Kullanıcılar bu bağlantıyı tıkladığında, telefonlarında yüklüyse Google Haritalar uygulaması açılır veya cihazları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 rehberlik de dahil olmak üzere adım adım yol tarifi kullanma seçeneği sunar.

destination parametresi olarak URL kodlamalı yer adının ve destination_place_id parametresi olarak yer kimliğinin yer aldığı aşağıdaki gibi bir yol tarifi URL'si oluşturmak için Haritalar URL'lerini kullanın. Haritalar URL'lerini oluşturmanın veya kullanmanın maliyeti yoktur. 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, hedefle aynı adres biçimini kullanarak bir origin sorgu parametresi sağlayabilirsiniz. Ancak bu parametre atlanırsa yol tarifi, kullanıcının mevcut konumundan başlar. Bu konum, Ürün Bulucu uygulamanızı kullandıkları yerden farklı olabilir. Haritalar URL'leri, yol tarifini navigasyon açıkken başlatmak için travelmode ve dir_action=navigate gibi ek sorgu parametresi seçenekleri sunar.

Yukarıdaki örnek URL'yi genişleten bu tıklanabilir bağlantı, origin değerini Londra'daki bir futbol stadyumu olarak ayarlar ve hedefe giden toplu taşıma yol tariflerini sağlamak için travelmode=transit değerini kullanır.

Bu URL'yi içeren bir kısa mesaj veya e-posta göndermek için şu anda twilio gibi bir üçüncü taraf uygulamasını kullanmanızı öneririz. App Engine kullanıyorsanız SMS mesajları veya e-posta göndermek için üçüncü taraf şirketleri kullanabilirsiniz. Daha fazla bilgi için Üçüncü Taraf Hizmetler ile Mesaj Gönderme başlıklı makaleyi inceleyin.

Dinamik haritaları kullanma

Bu örnekte şunlar kullanılır: Maps JavaScript API

Ayrıca kullanılabilir: Android | iOS

Konum bulma özelliği, kullanıcı deneyiminin önemli bir parçasıdır. Ancak bazı sitelerde basit bir harita bile bulunmayabilir. Bu durumda kullanıcıların yakın bir konum bulmak için siteden veya uygulamadan çıkması gerekir. Bu, ihtiyaç duydukları bilgileri almak için sayfalar arasında gezinmesi gereken kullanıcılar için ideal olmayan bir deneyim anlamına gelir. Bunun yerine, haritaları uygulamalarınıza yerleştirip özelleştirerek bu deneyimi iyileştirebilirsiniz.

Sayfanıza dinamik bir harita (yani kullanıcıların hareket edebileceği, yakınlaştırıp uzaklaştırabileceği ve farklı konumlar ile önemli yerler hakkında ayrıntılı bilgi alabileceği bir harita) eklemek birkaç kod satırı ile yapılabilir.

Öncelikle sayfaya Maps JavaScript API'yi eklemeniz gerekir. Bu işlem, aşağıdaki komut dosyasını HTML sayfanıza 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, sayfa yüklendiğinde çalışan JavaScript initMap işlevine referans verir. URL'de, haritanızın 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. Bir bölge ayarlamak, ABD dışında kullanılan uygulamaların davranışının, belirlediğiniz bölgeye göre şekillenmesini de sağlar. Desteklenen dillerin ve bölgelerin tam listesi için Google Haritalar Platformu Kapsam Ayrıntıları'nı görüntüleyin ve regionparametre kullanımı hakkında daha fazla bilgi edinin.

Ardından, haritanızı sayfaya yerleştirmek için bir HTML div öğesine ihtiyacınız vardır. Bu, haritanın gösterileceği yerdir.

<div id="map"></div>

Sonraki adımda haritanızın temel işlevini ayarlarsınız. Bu işlem, 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 kullanıcılarınız için haritada hangi kontrollerin kullanılabileceğini ayarlayabilirsiniz. getElementById()'ün yukarıdaki "harita" div kimliğine referans verdiğini unutmayın.

function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 51.485925, lng: -0.129500 },
zoomControl: false
});
}

Konum belirleyici için genellikle ilk konumu, merkez noktasını veya sınırlarını ve yakınlaştırma düzeyini (haritanın ilgili konuma ne kadar yakınlaştırıldığını) ayarlarsınız. Harita ile etkileşim düzeyini siz belirlediğiniz için kontrollerin ayarlanması gibi diğer öğelerin çoğu isteğe bağlıdır.

Haritanızı özelleştirme

Haritanızın görünümünü ve ayrıntılarını çeşitli şekillerde değiştirebilirsiniz. Örneğin, şunları yapabilirsiniz:

• Varsayılan harita raptiyelerinin yerini alacak 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östereceğinizi kontrol ederek kullanıcıların dikkatini konumlarınıza odaklamanızı sağlarken kullanıcıların en yakın konuma ulaşmalarına yardımcı olan önemli yerleri öne çıkarır.

Özel harita işaretçileri oluşturma

Yer işaretlerinizi, varsayılan rengi değiştirerek (bir konumun şu anda açık olup olmadığını göstermek için) veya yer işaretini markanızın logosu gibi özel bir resimle değiştirerek ö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. Ayrıca raster, vektör, sürüklenebilir ve hatta animasyonlu özel işaretçiler de oluşturabilirsiniz.

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

Ayrıntılı bilgi için JavaScript (web), Android ve iOS işaretçi belgelerine bakın.

Haritanıza stil uygulama

Google Haritalar Platformu, haritanızı kullanıcıların en yakın konumu bulmasına, oraya en hızlı şekilde ulaşmasına ve markanızı güçlendirmenize yardımcı olacak şekilde biçimlendirmenize olanak tanır. Örneğin, harita renklerini markanızla eşleşecek ş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ının seyahat, lojistik, emlak ve perakende gibi farklı sektörler için optimize edildiği çeşitli harita başlangıç şablonları da sunar.

Harita stilleri oluşturmak veya mevcut stilleri değiştirmek için projenizdeki Google Cloud Console Harita Stilleri sayfasını kullanabilirsiniz.

Her harita stilinin kendine ait bir kimliği vardır. Cloud Console'da bir stil yayınladıktan sonra kodunuzda bu harita kimliğine referans verirsiniz. Bu sayede, uygulamanızı yeniden düzenlemeden harita stilini gerçek zamanlı olarak güncelleyebilirsiniz. Yeni görünüm, mevcut uygulamada otomatik olarak görünür ve platformlar arasında kullanılır. Aşağıdaki örneklerde, Maps JavaScript API'yi kullanarak bir web sayfasına harita kimliğinin nasıl ekleneceği gösterilmektedir.

Komut dosyası URL'sine bir veya daha fazla map_ids ekleyerek Maps JavaScript API, bu stilleri kodunuzda çağırdığınızda daha hızlı harita oluşturması için 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_productlocator_v1_a">
</script>

Aşağıdaki kod, web sayfasında stilize bir harita gösterir. (Sayfada haritanın görüneceği HTML <div id="map"></div> öğesi gösterilmemiştir.)

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

Bulut tabanlı harita stilini JavaScript (web), Android ve iOS'e dahil etme hakkında daha fazla bilgi edinin.

Önceki Konumlarınızı etkileşimli bir haritada gösterme bölümünde, kullanıcılara konumlarınızla ilgili çalışma saatleri, fotoğraflar ve yorumlar gibi zengin düzeyde bilgi vermek için yer ayrıntılarını kullanmayı ele aldık.

Temel, İletişim ve Atmosfer Verileri olarak sınıflandırılan Yer Ayrıntıları'ndaki farklı veri alanlarının maliyetini anlamak faydalı olacaktır. Maliyetlerinizi yönetmek için kullanabileceğiniz bir strateji, konumlarınızla ilgili mevcut bilgilerinizi Google Haritalar'daki güncel bilgilerle (genellikle Temel ve İletişim Verileri) birleştirmektir. Bu bilgiler arasında geçici kapanış, tatil çalışma saatleri, kullanıcı puanları, fotoğraflar ve yorumlar yer alır. Mağazalarınızın iletişim bilgilerine zaten sahipseniz bu alanları Yer Ayrıntıları'ndan istemeniz gerekmez ve isteğinizi, görüntülemek istediğiniz bilgilere bağlı olarak yalnızca Temel veya Atmosfer Verileri alanlarını getirmek üzere kısıtlayabilirsiniz.

Yer Ayrıntıları yerine kullanabileceğiniz veya bu verileri tamamlayacak kendi yer verileriniz olabilir. Tam yığın bulucu için codelab, kendi konum ayrıntılarınızı depolamak ve almak için GeoJSON'i bir veritabanı ile kullanma örneği sağlar.