Ürün Bulucu - uygulama kılavuzu

Genel bakış

Kullanıcılarınız internette ürünlerinizi gördüğünde siparişlerini almanın en iyi ve en kolay yolunu bulmak ister. Bu konuda sunduğumuz Ürün Bulucu uygulama kılavuzu ve özelleştirme ipuçları, mükemmel ürün bulma aracı kullanıcı deneyimleri oluşturmak için Google Haritalar Platformu API'lerinin optimum kombinasyonu olarak önerilerimizdir.

Bu uygulama kılavuzundan yararlanarak, müşterilerin ürünlerinizi bulmak için ihtiyaç duydukları ayrıntılı bilgileri görmelerine yardımcı olabilir ve ürünlerinin bulunduğu mağazanın (arabayla, bisikletle, yürüyerek veya toplu taşımayla seyahat ederken) 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üler, seçtiğiniz proje için her bir API'yi etkinleştirmek üzere sizi Google Cloud Console'a yönlendirir:

• Maps JavaScript API
• Places API
• Coğrafi Kodlama API'si
• 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 uygulama adımlarından biridir.
• stars Yıldız simgesi isteğe bağlı ancak çözümü geliştirmek için ö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ştirin.
check_circle_filled	Kullanıcının konumunu belirleme	Tüm platformlarda kullanıcı deneyimini iyileştirmek ve minimum tuş vuruşlarıyla adres doğruluğunu iyileştirmek için "Kullandıkça yazma" 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 çok başlangıç noktası ve hedef için seyahat mesafesini ve seyahat süresini hesaplayın.
check_circle_filled	Mağaza bilgilerini görüntüleme	Kullanıcıların mağazalarınıza daha kolay ulaşabilmesi için mağazalarınızda veri açısından zengin bilgiler gösterin.
stars	Navigasyon için yol tarifi verme	Yürüme, araba, bisiklet ve toplu taşıma gibi çeşitli ulaşım türlerini kullanarak bir yerden hedefe giden yol tarifi verilerini alın.
stars	Cep telefonuna yol tarifi gönderme	Web sayfanızda yol tariflerini göstermenin yanı sıra, hareket halindeyken Google Haritalar'ı kullanarak navigasyon için bir kullanıcının telefonuna da yol tarifi gönderebilirsiniz.
stars	Yerlerinizi etkileşimli bir haritada gösterme	Konumlarınızın öne çıkmasına yardımcı olmak için özel harita işaretçileri oluşturun ve harita stilini markanızın renkleriyle eşleşecek şekilde değiştirin. Kullanıcıların kendilerini daha iyi yönlendirmelerine 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.
stars	Özel konum verilerini Yer Ayrıntıları ile birleştirme	Karar vermeleri için kullanıcılara zengin bir veri kümesi sunmak üzere kendi özel konum ayrıntılarınızı Yer Ayrıntıları ile birleştirin.

Yer kimlikleri alınıyor

Bu örnekte kullanılan alan: Places API

Ayrıca kullanılabilir: JavaScript

Mağazalarınızın bulunduğu konumun adı, adresi ve telefon numarası gibi temel bilgileri içeren bir veritabanınız olabilir ve bu veritabanını Google Haritalar Platformu'ndaki bir yerle, kullanıcılarınızın ürünleri teslim alabilecekleri nihai hedeflerden oluşan bir küme olarak ilişkilendirmek isteyebilirsiniz. Google Haritalar Platformu'nun coğrafi koordinatlar ve kullanıcıların katkıda bulunduğu bilgiler dahil olmak üzere söz konusu yer hakkında sahip olduğu bilgileri getirmek için veritabanınızdaki mağazaların her birine karşılık gelen yer kimliğini bulun. Places API Yer Arama'daki Find Place uç noktasına çağrı yapabilir ve yalnızca place_id alanını isteyebilirsiniz.

Aşağıda Google Londra ofisi için yer kimliği istemeyle ilgili 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, diğer mağaza verilerinizle birlikte veritabanınızda depolayabilir ve mağaza hakkında bilgi istemek için etkili bir yol olarak kullanabilirsiniz. Aşağıda, yer kimliğini coğrafi kodlamak, Yer Ayrıntılarını almak ve yer için yol tarifi istemek üzere kullanma talimatları verilmiştir.

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

Bu örnekte kullanılan: Geocoding API

Ayrıca kullanılabilir: JavaScript

Mağaza veritabanınızda açık adresler bulunuyor ancak coğrafi koordinatlar bulunmuyorsa hangi mağazaların müşterilerinize en yakın olduğunu hesaplamak amacıyla Coğrafi Kodlama API'sini kullanarak söz konusu adresin enlem ve boylamını alın. Sunucu tarafında mağazanın coğrafi kodlamasını yapabilir, enlemleri ve boylamları veritabanınızda saklayabilir ve en az 30 günde bir yenileyebilirsiniz.

Aşağıda, Google Londra ofisi için döndürülen yer kimliğinin enlem ve boylamını elde etmek üzere Coğrafi Kodlama API'sinin kullanılmasına ilişkin bir örnek 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 kullanım: Haritalar Otomatik Tamamlama Kitaplığı'nı Maps JavaScript API'deki Yerler

Diğer seçenekler: Android | iOS

Ürün Bulucu'daki temel bileşenlerden biri, kullanıcınızın başlangıç konumunu tanımlamaktır. Başlangıç konumunu belirtmesi için kullanıcıya iki seçenek sunabilirsiniz: aramanın kaynağını yazma veya web tarayıcısı coğrafi konum 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 özelliğiyle önceden tamamlama özelliğine alışkın. 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, kalan kısmı widget'lar kullanarak doldurur. Ayrıca, doğrudan Rehber 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>

Daha 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. Yer Otomatik Tamamlama tahminlerini coğrafi kod türleriyle sınırlandırmak, giriş alanınızı açık adresleri, mahalleleri, şehirleri ve posta kodlarını kabul edecek şekilde yapılandırır. Böylece kullanıcılar, başlangıç noktalarını tanımlamak için istedikleri düzeyde belirli bir bilgi girebilir. Yanıtın, kullanıcının kaynağının enlem ve boylamını içermesi için geometry alanını istemeyi unutmayın. Bu harita koordinatlarını, konumlarınızın kalkış noktası ile 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çtiğinde searchFromOrigin() işlevi başlar. Bu işlem, eşleşen sonucun kullanıcı konumu olan geometrisini alır ve ardından, En yakın mağazaları belirleme bölümünde açıklanan başlangıç noktası olarak bu koordinatlara göre en yakın konumları arar.

Tarayıcı coğrafi konumunu kullanma

HTML5 tarayıcının coğrafi konumunu istemek ve işlemek için Konumumu kullan penceresini nasıl etkinleştireceğinizi öğrenin:

Bu örnek şunları kullanır: Mesafe Matrisi Hizmeti, Maps JavaScript API

Ayrıca mevcut: Uzaklık Matrisi API

Kullanıcının konumunu öğrendikten sonra, bunu mağaza 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üresini veya yol mesafesini kullanarak kendileri için en uygun konumu seçmesine yardımcı olur.

Konum listesini düzenlemenin standart yolu, konumları mesafeye göre sıralamaktır. Çoğunlukla bu mesafe, bir kullanıcıdan konuma uzanan düz bir çizgi kullanılarak basitçe hesaplanır, ancak bu yanıltıcı olabilir. Düz bir çizgi, başka bir konumun daha uygun olduğu bir zamanda, geçilemez bir nehrin üzerinden veya trafiğin yoğun olduğu yollardan geçebilir. Birbirine birkaç kilometre uzaklıkta birden çok yeriniz olduğunda bu önemlidir.

Mesafe Matrisi Hizmeti olan Maps JavaScript API, kalkış ve varış noktalarının listesini alıp yalnızca seyahat mesafesini değil, aynı zamanda bunlar arasındaki süreyi de döndürerek çalışır. Bir kullanıcının söz konusu olduğunda kaynak, kullanıcının şu anda bulunduğu konum veya istediği başlangıç noktasıdır. Hedefler ise konumların bulunduğu konum olur. Başlangıç noktaları ve varış noktaları, koordinat çiftleri veya adres olarak belirtilebilir. Hizmeti aradığınızda, hizmet adreslerle eşleşir. Mevcut veya gelecekteki sürüş sürelerine dayalı sonuçları göstermek için Mesafe Matrisi Hizmeti ve Haritalar JavaScript API'sini ek parametrelerle kullanabilirsiniz.

Aşağıdaki örnek, aynı anda kullanıcının başlangıç noktasını ve 25 mağaza konumunu belirten Mesafe Matrisi Hizmeti ve Maps JavaScript API'yi çağırı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 envanter veritabanınıza göre ürünün stok durumunu görüntüleyebilirsiniz.

Bu örnekte kullanım: Yer Kitaplığı, Maps JavaScript API

Ayrıca kullanılabilir: 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 durum gibi zengin Yer Ayrıntılarını paylaşabilirsiniz.

Yer Ayrıntılarını almak için Maps JavaScript API'yi çağırdıktan sonra yanıtı filtreleyebilir ve oluşturabilirsiniz.

Yer Ayrıntıları 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 bölümüne bakın.

Aşağıdaki Yer Ayrıntıları isteği, Google Londra yer kimliğinin adresini, koordinatlarını, web sitesini, telefon numarasını, derecelendirmesini 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 Bulma Aracı Geliştiriliyor

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

Bu örnek şunları kullanır: Maps JavaScript API Yol Tarifi Hizmeti

Ayrıca mevcut: Android ve iOS'te doğrudan uygulamadan veya bir sunucu proxy'si aracılığıyla uzaktan kullanım için Directions API web hizmeti

Kullanıcılara sitenizden veya uygulamalarınızdan yol tarifi gösterdiğinizde, kullanıcılarınızın sitenizden uzaklaşması ve diğer sayfalarla ilgilenmesi veya haritada rakipleri görmesi gerekmez. Hatta belirli bir ulaşım şeklinin karbon emisyonlarını ve sahip olduğunuz bir karbon veri kümesini kullanarak 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şlevlere de sahiptir.

Aşağıda, yol tarifleri panelinin gösterildiği bir örnek verilmiştir. Örnekle ilgili daha fazla bilgi için 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 onlara kısa mesaj veya e-posta ile yol tarifi bağlantısı gönderebilirsiniz. Kullanıcı bu simgeyi tıkladığında, yüklüyse telefonunda Google Haritalar uygulaması açılır veya maps.google.com kullanıcının cihazının web tarayıcısına 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.

destination parametresi olarak URL kodlamalı yer adı ve destination_place_id parametresi olarak yer kimliği olmak üzere, aşağıdaki gibi bir yol tarifi URL'si oluşturmak için Haritalar URL'lerini kullanın. Haritalar URL'leri 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, hedefle aynı adres biçimini kullanan bir origin sorgu parametresi sağlayabilirsiniz. Ancak, bunu atlarsanız yol tarifleri kullanıcının mevcut konumundan başlar. Bu konum, kullanıcının Ürün Bulma Aracı uygulamanızı kullandığı yerden farklı olabilir. Haritalar URL'leri, gezinme özelliği açıkken yol tariflerini 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 özelliğini Londra futbol stadyumu olarak ayarlar ve hedefe toplu taşıma yol tarifi vermek için travelmode=transit 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 şirketlerden yararlanabilirsiniz. Daha fazla bilgi için Üçüncü Taraf Hizmetlerle Mesaj Gönderme bölümüne bakın.

Dinamik haritaları kullanma

Bu örnek şunları kullanır: Maps JavaScript API

Diğer seçenekler: Android | iOS

Konum bulma aracı, kullanıcı deneyiminin önemli bir parçasıdır. Ancak bazı sitelerde basit bir harita bile olmayabilir ve kullanıcıların yakın bir konumu bulmak için siteden veya uygulamadan ayrılması gerekebilir. Bu da, ihtiyaç duydukları bilgileri almak için 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.

Sayfanıza dinamik harita, yani kullanıcıların hareket ettirebileceği, yakınlaştırabileceği ve uzaklaştırabileceği ve farklı konumlar ve önemli yerler hakkında ayrıntılı bilgi alabileceği bir harita ekleyebilirsiniz. Bu işlem birkaç satır kodla yapılabilir.

Öncelikle, sayfaya Maps JavaScript API'yi eklemeniz gerekir. Bu, 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 başvuruda bulunur. Hedeflediğiniz ülke için doğru şekilde biçimlendirildiğinden emin olmak amacıyla, URL'de 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 yönelik önyargılı olmasını da sağlar. Desteklenen dillerin ve bölgelerin tam listesi için Google Haritalar Platformu Kapsam Ayrıntıları'nı görüntüleyin ve region parametre kullanımı hakkında daha fazla bilgi edinin.

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

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

Bir sonraki adım, haritanızın temel işlevselliğini ayarlamaktır. Bu işlem, komut dosyası URL'sinde belirtilen initMap komut dosyası işlevinde gerçekleştirilir. Aşağıdaki örnekte gösterilen bu komut dosyasında, ilk konumu, harita türünü ve harita üzerinde kullanıcılarınız için hangi denetimlerin kullanılacağı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 belirlediğiniz için kontrollerin ayarlanması gibi diğer birçok öğe 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 yöntemlerle değiştirebilirsiniz. Örneğin, şunları yapabilirsiniz:

• Varsayılan harita raptiyelerini değiştirmek için kendi özel işaretçilerinizi oluşturun.
• Harita özelliklerinin renklerini markanızı yansıtacak şekilde değiştirin.
• Hangi önemli noktaları (ör. turistik yerler, yiyecek, konaklama vb.) ve hangi yoğunlukta gösterdiğinizi kontrol edin. Böylece, kullanıcıların en yakın konuma gitmesine yardımcı olan önemli noktaları vurgularken kullanıcıların dikkatini konumlarınıza odaklayabilirsiniz.

Özel harita işaretçileri oluşturma

Varsayılan rengi değiştirerek (muhtemelen bir konumun açık olup olmadığını göstererek) 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. Ayrıca, kafes, vektör, sürüklenebilir ve hatta animasyonlu özel işaretçiler oluşturabilirsiniz.

Aşağıda, özel işaretçilerin kullanıldığı örnek bir harita gösterilmektedir. ( Haritalar JavaScript API'si özel işaretçiler konusundaki kaynak koduna bakın.)

Ayrıntılı bilgi için JavaScript (web), Android ve iOS ile ilgili işaretçiler dokümanlarına bakın.

Haritanızın stilini belirleme

Google Haritalar Platformu, kullanıcıların en yakın konumu bulmalarına, oraya mümkün olduğunca hızlı ulaşmalarına ve markanızı güçlendirmenize yardımcı olacak şekilde haritanızı şekillendirmenize olanak tanır. Örneğin, harita renklerini markanızla eşleşecek şekilde değiştirebilir ve kullanıcıların gördüğü önemli yerleri kontrol ederek haritadaki dikkat dağıtıcı unsurları azaltabilirsiniz. Google Haritalar Platformu ayrıca, bazıları seyahat, lojistik, emlak ve perakende gibi farklı sektörler için optimize edilmiş çeşitli harita başlangıç şablonları da sunar.

Google Cloud Console'daki projenizdeki Harita Stilleri sayfasında harita stillerini oluşturabilir veya değiştirebilirsiniz.

Her harita stilinin kendi kimliği vardır. Cloud Console'da bir stil yayınladıktan sonra, kodunuzda bu harita kimliğine başvurursunuz. Bu, uygulamanızı yeniden düzenlemeden harita stilini gerçek zamanlı olarak güncelleyebileceğiniz anlamına gelir. 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'yi kullanarak bir web sayfasına harita kimliğinin nasıl ekleneceğini göstermektedir.

Komut dosyası URL'sine bir veya daha fazla map_ids eklediğinizde Maps JavaScript API, kodunuzda bu stilleri çağırdığınızda harita oluşturma işleminin daha hızlı yapılması için bu stilleri otomatik olarak kullanılabilir hale getirir.

<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 stili bir harita görüntüler. (Haritanın sayfada görüneceği bir HTML<div id="map"></div> öğesi gösterilmiyor.)

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'te kullanma hakkında daha fazla bilgi edinin.

Önceki Etkileşimli haritada yerlerinizi 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 sağlamak için Yer Ayrıntıları özelliğini kullanmayı ele aldık.

Temel, Kişi ve Atmosfer Verileri olarak sınıflandırılan Yer Ayrıntıları'ndaki farklı veri alanlarının maliyetini anlamak yararlıdır. Maliyetlerinizi yönetmek için stratejilerden biri, konumlarınızla ilgili elinizdeki bilgileri, Google Haritalar'daki yeni bilgilerle (genellikle Temel ve İletişim Verileri) (ör. geçici olarak kapanma saatleri, tatil saatleri, kullanıcı puanları, fotoğraflar ve yorumlar) birleştirmektir. Mağazalarınızın iletişim bilgilerine zaten sahipseniz Yer Ayrıntıları'ndan bu alanları istemenize gerek yoktur ve görüntülemek istediklerinize bağlı olarak isteğinizi yalnızca Temel veya Atmosfer Verileri alanlarını getirecek şekilde kısıtlayabilirsiniz.

Yer Ayrıntıları yerine tamamlayacak veya kullanabileceğiniz kendi yer verileriniz olabilir. Tam yığın bulucunun codelab'i, kendi konum ayrıntılarınızı depolamak ve almak için GeoJSON'nin bir veritabanıyla birlikte kullanılmasına ilişkin bir örnek sunar.