Ü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. Ürün Konum Belirleyici uygulama kılavuzu ve bu konuda sağladığımız özelleştirme ipuçları, mükemmel ürün bulucu kullanıcı deneyimleri oluşturmak için Google Haritalar Platformu API'lerinin optimum kombinasyonu olarak önerilir.

Bu uygulama kılavuzunu izleyerek müşterilerin ürünlerinizi bulmak için ihtiyaç duydukları ayrıntılı bilgileri görmesine yardımcı olabilir ve onlara araba ile, bisikletle, yaya olarak veya toplu taşıma kullanırken, ürünlerinin bulunduğu mağazanın yol tarifini verebilirsiniz.

API'ler etkinleştiriliyor

Ürün Locator'ı uygulamak için Google Cloud Console'da aşağıdaki API'leri etkinleştirmeniz gerekir. Aşağıdaki köprüler, seçtiğiniz projede her bir API'yi etkinleştirmek için sizi Google Cloud Console'a yönlendirir:

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

Kurulum hakkında daha fazla bilgi için Google Haritalar Platformu'nu kullanmaya başlama bölümüne bakın.

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ımlarından biridir.
• stars Yıldız simgesi isteğe bağlı olsa da çözümü iyileştirmek için önerilen bir özelleştirme seçeneğidir.

check_circle_filled	Mağaza konumlarını Google Haritalar Platformu yerleriyle ilişkilendirme	Google Haritalar Platformu'nda bir mağaza konumunu yerle eşleştirin.
check_circle_filled	Kullanıcını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.
check_circle_filled	En yakın mağazaları belirleme	Birden çok kalkış ve varış noktası için seyahat mesafesini ve seyahat süresini hesaplayın. İsteğe bağlı olarak yürüyüş, araba, toplu taşıma veya bisiklet gibi çeşitli ulaşım şekillerini de belirtebilirsiniz.
check_circle_filled	Mağaza bilgilerini gösterme	Kullanıcıların mağazanıza daha kolay ulaşabilmesi için mağazalarınızda veri açısından zengin bilgiler gösterin.
stars	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 alın.
stars	Mobil cihaza yol tarifi gönderme	Yol tariflerini web sayfanızda 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	Konumlarınızı etkileşimli haritada gösterme	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 ayarlayın. 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.
stars	Ö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.

Yer kimlikleri alınıyor

Bu örnekte şu kullanımlar kullanılmıştır: Places API

Ayrıca kullanılabilir: JavaScript

Mağazalarınıza ait, söz konusu konumun adı, adresi ve telefon numarası gibi temel bilgileri içeren bir veritabanınız olabilir ve bu veritabanını, kullanıcılarınızın ürünleri teslim alabilecekleri bir dizi nihai hedef grubu olarak Google Haritalar Platformu'ndaki bir yerle ilişkilendirmek isteyebilirsiniz. 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 mağazaya 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.

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 veritabanınızın geri kalanıyla birlikte veritabanınızda depolayabilir ve mağaza hakkında bilgi istemek için etkili bir yöntem olarak kullanabilirsiniz. Aşağıda, coğrafi kodlama yapmak, Yer Ayrıntılarını almak ve yer için yol tarifi istemek üzere yer kimliğini 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

Mağaza veritabanınızda açık adresler bulunuyor ancak coğrafi koordinatlar bulunmuyorsa bu adresin enlem ve boylam bilgilerini almak için Geocoding API'yi kullanın. Böylece müşterilerinize en yakın olan mağazaları hesaplayabilirsiniz. Mağazanın coğrafi kodlamasını sunucu tarafında yapabilir, enlem ve boylam değerlerini veritabanınızda depolayabilir 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 amacıyla Geocoding API'nin kullanılmasına dair 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_productlocator_v1_a

Bu örnekte kullanım alanı: Haritalar JavaScript API'deki Yerler Otomatik Tamamlama Kitaplığı

Diğer ürünler: Android | iOS

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

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

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. Bir kullanıcı bir adres yazdığında otomatik tamamlama, widget'ları kullanarak geri kalan alanları doldurur. 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 Yer Otomatik 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. Otomatik tamamlama tahminlerini coğrafi kodlama türlerine göre kısıtlamak, 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ı tanımlamak için herhangi bir belirlilik düzeyini 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. 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", searchFromOrigin);
}

Bu örnekte, kullanıcı adresi seçtiğinde searchFromOrigin() işlevi başlar. Bu işlem, kullanıcı konumu olan eşleşen sonucun geometrisini alır ve 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 konumu kullanılıyor

HTML5 tarayıcıda coğrafi konumu istemek ve işlemek için Konumumu kullan penceresini nasıl etkinleştireceğinize bakın:

Bu örnekte kullanımlar: Mesafe Matrisi Hizmeti, Maps JavaScript API

Ayrıca kullanılabilir: Measure Matrix API

Kullanıcının konumunu öğrendikten sonra, bu konumu 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üresi veya yol mesafesi ile kendileri için en uygun konumu seçmelerine yardımcı olur.

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, yanıltıcı olabilir. Başka bir konumun daha uygun olabileceği bir zamanda, geçit gidilemez bir nehrin üzerinden veya trafiğin yoğun olduğu yolların üzerinden düz bir çizgi alınabilir. Bu, birbirine birkaç kilometre mesafede birden fazla konum olduğunda önemlidir.

Mesafe Matrisi Hizmeti olan Maps JavaScript API, 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 istenen başlangıç noktası, hedefler ise konumların bulunduğu konumdur. Kalkış noktaları ve hedefler, koordinat çiftleri veya adres olarak belirtilebilir. Hizmeti çağırdığınızda hizmet, adreslerle eşleşir. Mevcut veya gelecekteki sürüş sürelerine göre sonuçlar göstermek için Mesafe Matrisi Hizmeti ve Maps JavaScript API'yi ek parametrelerle birlikte kullanabilirsiniz.

Aşağıdaki örnek, Mesafe Matrisi Hizmeti, Maps JavaScript API'yi çağırarak kullanıcının başlangıç noktasını ve bir seferde 25 mağaza konumunu belirtir.

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ımlar: 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'ye çağrı yaptıktan sonra 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. Konumunuzun yer kimliğini almak için Yer kimlikleri alma konusuna bakın.

Aşağıdaki Yer Ayrıntıları isteği, Google Londra yer kimliğine ait adres, koordinatları, web sitesini, telefon numarasını, derecelendirmeyi 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 İyileştirme

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

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 sitenizden veya uygulamalarınızdan yol tarifi gösterdiğinizde, kullanıcıların sitenizden uzaklaşması ve diğer sayfaların dikkatinin dağılması ya da haritadaki rakipleri görmesi gerekmez. Hatta belirli bir ulaşım şeklinin karbon emisyonlarını bile gösterebilir ve sahip olduğunuz bir karbon veri kümesini kullanarak belirli bir yolculuğun etkisini gösterebilirsiniz.

Yol Tarifi Hizmeti, sonuçları işlemenizi ve harita üzerinde kolayca görüntülemenizi sağlayan işlevler de sunar.

Aşağıda, bir yol tarifi panelinin görüntülenmesi örneği gösterilmektedir. Örnek hakkında 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 yoluyla bir yol tarifi bağlantısı gönderebilirsiniz. Kullanıcı bu uygulamayı tıkladığında, yüklüyse telefonunda Google Haritalar uygulaması başlatılır veya kullanıcının cihazının web tarayıcısına 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 Ürün Bulma Aracı uygulamasını 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 bağlantısını 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ı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 Hizmetler ile Mesaj Gönderme bölümüne bakın.

Dinamik haritaları kullanma

Bu örnekte kullanım alanı: Maps JavaScript API

Diğer ürünler: Android | iOS

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ın bir konumu bulmak için siteden veya uygulamadan ayrılması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.

Sayfanıza dinamik harita (kullanıcıların etrafta gezinebilecekleri, yakınlaştırıp uzaklaştırabilecekleri ve farklı konumlar ve önemli yerler hakkında ayrıntılı bilgi alabilecekleri 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_productlocator_v1_a"></script>

URL, sayfa yüklendiğinde çalışan JavaScript initMap işlevine referans verir. 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ı görüntüleyin 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 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 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.

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 imkan 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 stilleri oluşturabilir veya mevcut stilleri değiştirebilirsiniz.

Her harita stilinin kendi kimliği vardır. Cloud Console'da bir stil yayınladığınızda, kodunuzda bu harita kimliğine referans verirsiniz. Bu sayede, uygulamanızı yeniden düzenlemeye gerek kalmadan harita stilini gerçek zamanlı olarak güncelleyebilirsiniz. Yeni görünüm otomatik olarak mevcut uygulamada görünür ve platformlarda 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 bu 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_productlocator_v1_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'a bulut tabanlı harita stilleri ekleme hakkında daha fazla bilgi edinin.

Bir önceki Konumlarınızı etkileşimli haritada gösterme bölümünde, kullanıcılara konumlarınız hakkında çalışma saatleri, fotoğraflar ve yorumlar gibi kapsamlı bilgi sunmak üzere Yer Ayrıntılarını kullanmayı 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 kullanacağınız strateji, 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ı kalma, tatil günlerinde çalışma saatleri, kullanıcı puanları, fotoğrafları ve yorumları) birleştirmektir. 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ı alacak şekilde sınırlandırabilirsiniz.

Yer Ayrıntıları yerine bu verileri tamamlamak veya kullanmak için 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 kullanmayla ilgili bir örnek sunar.