Genel Bakış
Google Haritalar Platformu; web (JS, TS), Android ve iOS'te kullanılabilir. Ayrıca yerler, yol tarifleri ve mesafeler hakkında bilgi almak için web hizmetleri API'leri sunar. Bu kılavuzdaki örnekler tek bir platform için yazılmıştır ancak diğer platformlarda uygulama için doküman bağlantıları sağlanmıştır.
Kullanıcılarınız ürünlerinizi online olarak gördüğünde siparişlerini almanın en iyi ve en uygun yolunu bulmak ister. Google, mükemmel ürün bulucu kullanıcı deneyimleri oluşturmak için Google Haritalar Platformu API'lerinin en iyi kombinasyonu olarak ürün bulucu uygulama kılavuzunu ve özelleştirme ipuçlarını önerir.
Bu uygulama kılavuzunu izleyerek müşterilerin ürünlerinizi bulmak için ihtiyaç duydukları ayrıntılı bilgileri görmelerine yardımcı olabilir ve araba, bisiklet veya toplu taşıma aracıyla ya da yürüyerek seyahat ediyor olsalar da onları ürünlerinin bulunduğu mağazaya yönlendirebilirsiniz.
API'leri etkinleştir
Ü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çili projeniz için her API'yi etkinleştirmek üzere sizi Google Cloud Console'a yönlendirir:
Kurulum hakkında daha fazla bilgi için Google Haritalar Platformu'nu kullanmaya başlama başlıklı makaleyi inceleyin.
Uygulama kılavuzunun bölümleri
Aşağıdaki uygulamalar ve özelleştirmeler burada ele alınmaktadır:
- Onay işareti simgesi, temel bir uygulama adımıdır.
- Yıldız simgesi, çözümü geliştirmek için isteğe bağlı ancak önerilen bir özelleştirmedir.
| Mağaza konumlarını Google Haritalar Platformu yerleriyle ilişkilendirme | Bir mağaza konumunu Google Haritalar Platformu'ndaki bir yerle eşleştirin. | |
| 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 yazarken arama işlevini ekleyin. | |
| En yakın mağazaları belirleme | Birden fazla başlangıç ve hedef için seyahat mesafesini ve süresini hesaplayın. İsteğe bağlı olarak yürüyüş, araba, toplu taşıma veya bisiklet gibi çeşitli ulaşım şekillerini belirtebilirsiniz. | |
| Mağaza bilgilerini gösterme | Mağazalarınızla ilgili veriler açısından zengin bilgiler göstererek kullanıcıların mağazalarınıza daha kolay gitmesini sağlayın. | |
| 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. | |
| Yol tariflerini mobil cihaza gönderme | Web sayfanızda yol tariflerini göstermenin yanı sıra, Google Haritalar'ı kullanarak hareket halindeyken navigasyon için kullanıcının telefonuna yol tarifleri de gönderebilirsiniz. | |
| Konumlarınızı etkileşimli bir haritada gösterme | Konumlarınızın öne çıkmasına yardımcı olacak özel harita işaretçileri oluşturun ve haritayı marka renklerinize uygun şekilde tasarlayın. Kullanıcıların daha iyi yön bulmasına yardımcı olmak için haritanızda belirli önemli yerleri (ÖY) gösterin (veya gizleyin). Haritanın karmaşık görünmesini önlemek için ÖY yoğunluğunu kontrol edin. | |
| Özel konum verilerini yer ayrıntılarıyla birleştirme | Kullanıcılara karar vermeleri için zengin bir veri grubu sunmak amacıyla kendi özel konum ayrıntılarınızı yer ayrıntılarıyla birleştirin. |
Mağaza konumlarını Google Haritalar Platformu yerleriyle ilişkilendirme
Yer kimliklerini alma
| Bu örnekte kullanılanlar: Places API (Yeni) | Ayrıca şunlar da mevcuttur: JavaScript |
Mağazalarınızın bulunduğu konumun adı, adresi ve telefon numarası gibi temel bilgileri içeren bir veritabanınız olabilir. Bu veritabanını, kullanıcılarınızın ürünleri teslim alabileceği nihai hedefler grubu olarak Google Haritalar Platformu'ndaki bir yerle ilişkilendirmek isteyebilirsiniz. Google Haritalar Platformu'nun bu yerle ilgili sahip olduğu bilgileri (coğrafi koordinatlar ve kullanıcı tarafından gönderilen bilgiler dahil) getirmek için veritabanınızdaki her mağazaya karşılık gelen yer kimliğini bulun.
Places API (Yeni) içindeki
Text Search (New) uç noktasına çağrı yapabilir ve alan maskesinde yalnızca places.id alanını isteyebilirsiniz (bu, Text
Search Essentials IDs Only SKU'sunu tetikler).
Aşağıda, Google Londra ofisinin yer kimliği için istekte bulunma örneği gösterilmektedir:
curl -X POST -d '{
"textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'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, yer kimliğini kullanarak coğrafi kodlama yapma, yer ayrıntılarını alma ve yere yol tarifi isteme ile ilgili talimatlar verilmiştir.
Konumlarınıza coğrafi kod ekleme
| Bu örnekte kullanılanlar: Geocoding API | Ayrıca şunlar da mevcuttur: JavaScript |
Mağaza veritabanınızda sokak adresleri var ancak coğrafi koordinatlar yoksa hangi mağazaların müşterinize en yakın olduğunu hesaplamak için Geocoding API'yi kullanarak bu adresin enlem ve boylamını elde edin. Mağazanın coğrafi kodunu sunucu tarafında oluşturabilir, 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 enlemini ve boylamını almak üzere Geocoding API'nin kullanıldığı bir örneği aşağıda bulabilirsiniz:
```html
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
```
Kullanıcının konumunu belirleme
| Bu örnekte: Maps JavaScript API'deki Yer Adı Otomatik Tamamlama kullanılır. | Ayrıca: Android | iOS |
Ürün Bulucu'nun temel bileşenlerinden biri, kullanıcınızın başlangıç konumunu belirlemektir. Kullanıcıya başlangıç konumunu belirtmesi için iki seçenek sunabilirsiniz: aramasının kaynağını yazma veya web tarayıcısı coğrafi konumuna ya da mobil konum hizmetlerine izin verme.
Yazılan girişleri otomatik tamamlama ile işleme
Günümüz kullanıcıları, Google Haritalar'ın tüketici sürümündeki otomatik tamamlama özelliğine alışkındır. Bu işlev, mobil cihazlarda ve web'de Google Haritalar Platformu Yerler kitaplıklarını kullanan tüm uygulamalara entegre edilebilir. Kullanıcı bir adres yazdığında otomatik tamamlama, widget'ları kullanarak geri kalanını doldurur. Ayrıca, Place Autocomplete Data API'yi doğrudan kullanarak kendi otomatik tamamlama işlevinizi de sağlayabilirsiniz.
Aşağıdaki örnekte, libraries=places,marker parametresini Maps JavaScript API komut dosyası URL'sine ekleyerek Places ve Marker kitaplıklarını sitenize ekleyin.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>Ardından, PlaceAutocompleteElement
widget'ının ekleneceği sayfaya bir kapsayıcı öğe ekleyin:
<div id="autocomplete-container"></div>Son olarak, PlaceAutocompleteElement widget'ını başlatın ve kapsayıcıya ekleyin. includedPrimaryTypes: ["geocode"] ile Yer otomatik tamamlama tahminlerini kısıtlama, widget'ı sokak adreslerini, mahalleleri, şehirleri ve posta kodlarını kabul edecek şekilde yapılandırır. Böylece kullanıcılar, başlangıç noktalarını açıklamak için herhangi bir ayrıntı düzeyinde giriş yapabilir. Kullanıcı bir tahmini seçtiğinde gmp-select etkinliği tetiklenir ve kullanıcının başlangıç noktasının enlem ve boylamını içeren location alanını istemek için place.fetchFields() işlevini çağırabilirsiniz. Bu harita koordinatlarını, konumlarınızın başlangıç noktasıyla ilişkisini belirtmek için kullanırsınız.
// Create the PlaceAutocompleteElement, restricting predictions to // geographical location types in the United Kingdom. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ["geocode"], includedRegionCodes: ["gb"], }); placeAutocomplete.placeholder = "Enter starting address, city, or zip code"; document.getElementById("autocomplete-container").appendChild(placeAutocomplete); // When the user selects an address from the drop-down, // fetch the place details and search for the nearest stores. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["id", "location", "formattedAddress"], }); searchFromOrigin(place); }); }
Bu örnekte, kullanıcı adresi seçtiğinde searchFromOrigin() işlevi başlar. Bu işlemde, kullanıcı konumu olan eşleşen sonucun konumu alınır. 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 aranır.
Yer otomatik tamamlama özelliğini uygulamanıza ekleme ile ilgili video açıklamaları görmek için bu bölümü genişletin:
Web sitesi
Android uygulamaları
iOS uygulamaları
Tarayıcı coğrafi konumunu kullanma
HTML5 tarayıcı coğrafi konum isteğinde bulunmak ve bu isteği işlemek için Konumumu kullan penceresini etkinleştirme başlıklı makaleyi inceleyin:
En yakın mağazaları belirleme
| Bu örnekte kullanılanlar: Routes Library, Maps JavaScript API | Ayrıca: Routes API |
Kullanıcının konumunu öğrendikten sonra bu konumu mağazalarınızın bulunduğu yerlerle karşılaştırabilirsiniz. Bunu, Routes Library, Maps JavaScript API'deki RouteMatrix
class ile (veya Routes API'deki Compute Route
Matrix özelliğiyle) yapmak, kullanıcılarınızın sürüş süresine veya yol mesafesine göre 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, kullanıcıdan konuma düz bir çizgi çekilerek hesaplanır ancak bu yanıltıcı olabilir. Düz çizgi, geçilemez bir nehrin üzerinden veya başka bir konumun daha uygun olabileceği bir zamanda yoğun yollardan geçiyor olabilir. Bu, özellikle birbirine birkaç kilometre mesafede birden fazla konumunuz varsa önemlidir.
RouteMatrix.computeRouteMatrix yöntemi, başlangıç ve hedef konumların listesini alarak çalışır ve yalnızca seyahat mesafesini değil, aynı zamanda aralarındaki seyahat süresini de döndürür. Kullanıcılar için başlangıç noktası, bulundukları yer veya istedikleri başlangıç noktası, hedefler ise konumlar olur. Başlangıç ve varış noktaları koordinat çiftleri, yer kimlikleri veya adresler olarak belirtilebilir. Mevcut veya gelecekteki sürüş sürelerine göre sonuçları göstermek için RouteMatrix.computeRouteMatrix gibi yönlendirme tercihleriyle birlikte TRAFFIC_AWARE kullanabilirsiniz.
Aşağıdaki örnekte, kullanıcının başlangıç noktasını ve aynı anda en fazla 25 mağaza konumunu belirterek Routes Library, Maps JavaScript API'de RouteMatrix.computeRouteMatrix çağrısı yapılıyor.
async function getDistances(originLocation) { const { RouteMatrix } = await google.maps.importLibrary("routes"); const request = { origins: [originLocation], destinations: stores.slice(0, 25).map((store) => store.location), travelMode: google.maps.TravelMode.DRIVING, routingPreference: "TRAFFIC_AWARE", fields: ["distanceMeters", "durationMillis", "condition"], }; return RouteMatrix.computeRouteMatrix(request); } 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(({ matrix }) => { const items = matrix.rows[0].items; for (let i = 0; i < items.length; i++) { if (items[i].condition === "ROUTE_EXISTS") { stores[i].travelDistance = items[i].distanceMeters; stores[i].travelDuration = items[i].durationMillis; } } }) .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österebilirsiniz.
Mağaza bilgilerini gösterme
| Bu örnekte kullanılanlar: Yer Kitaplığı, Maps JavaScript API | Ayrıca şunlar da mevcuttur: Android için Yerler SDK'sı | iOS için Yerler SDK'sı | Places API (Yeni) |
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/kapalı durumu gibi zengin yer ayrıntılarını paylaşabilirsiniz.
Yer Ayrıntılarını almak için Maps JavaScript API'ye yapılan bir çağrıdan sonra yanıtı filtreleyip 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 kimliklerini alma başlıklı makaleyi inceleyin.
Aşağıdaki Yer Ayrıntıları isteğinde, Google Londra yer kimliği için ad, koordinatlar, web sitesi, telefon numarası, puan ve çalışma saatlerini döndürmek üzere Yer sınıfı kullanılır:
const place = new google.maps.places.Place({ id: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU', });await place.fetchFields({ fields: [ 'displayName', 'nationalPhoneNumber', 'location', 'regularOpeningHours', 'rating', 'utcOffsetMinutes', 'websiteURI', ], });
createMarker(place);
Ürün Bulucu'yu geliştirme
İşletmenizin veya kullanıcılarınızın ihtiyaçlarına bağlı olarak kullanıcı deneyimini daha da iyileştirebilirsiniz.
Navigasyonla yol tarifi alma
| Bu örnekte kullanılanlar: Routes Library, Maps JavaScript API | Ayrıca: Routes API Android ve iOS'te doğrudan uygulamadan veya uzaktan bir sunucu proxy'si aracılığıyla 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ılması ve diğer sayfalarla dikkati dağılması ya da haritada rakipleri görmesi gerekmez. Routes API ile yakıt veya enerji kullanımını tahmin etmek ve bir yolculuğun çevre üzerindeki etkisini göstermek için çevre dostu rotalar da isteyebilirsiniz.
Routes Library, Maps JavaScript API'deki Route
class'ında, sonuçları işlemenize ve haritada görüntülemenize olanak tanıyan createPolylines() ve createWaypointAdvancedMarkers() gibi yöntemler de bulunur.
Aşağıda, haritada rota isteme ve görüntüleme örneği verilmiştir. Örnek hakkında daha fazla bilgi için Rota alma başlıklı makaleyi inceleyin.
Yol tariflerini mobil cihaza gönderme
Kullanıcıların bir konuma 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 Google Haritalar uygulaması yüklüyse uygulama açılır. Yüklü değilse cihazlarının web tarayıcısında maps.google.com yüklenir. Bu deneyimlerin her ikisinde de kullanıcıya, hedefe ulaşmak için sesli yönlendirme de dahil olmak üzere adım adım navigasyonu kullanma seçeneği sunulur.
destination parametresi olarak URL ile kodlanmış yer adı ve destination_place_id parametresi olarak yer kimliği ile aşağıdaki gibi bir yol tarifi URL'si oluşturmak için
Haritalar URL'lerini kullanın. 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, hedefle aynı adres biçimini kullanarak bir origin sorgu parametresi sağlayabilirsiniz. Ancak bu parametre atlandığında yol tarifleri, kullanıcının mevcut konumundan başlar. Bu konum, kullanıcının Ürün Yer Bulma Aracı uygulamanızı 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 sunar.
Önceki örnek URL'yi genişleten
bu tıklanabilir bağlantı, origin öğesini Londra'daki bir futbol stadyumu olarak ayarlar ve travelmode=transit öğesini kullanarak hedefe toplu taşıma yol tarifleri sağlar.
Bu URL'yi içeren bir metin 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 Hizmetleriyle Mesaj Gönderme başlıklı makaleyi inceleyin.
Konumlarınızı etkileşimli bir haritada gösterme
Dinamik haritaları kullanma
| Bu örnekte kullanılanlar: Maps JavaScript API | Ayrıca: Android | iOS |
Yer bulma aracı, kullanıcı deneyiminin önemli bir parçasıdır. Ancak bazı sitelerde basit bir harita bile bulunmayabilir. Bu durumda kullanıcıların yakındaki bir konumu bulmak için siteden veya uygulamadan ayrılması gerekir. Bu durum, ihtiyaç duydukları bilgilere ulaşmak için sayfalar arasında gezinmek zorunda kalan 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 eklemek için birkaç satır kod yazmanız yeterlidir. Dinamik harita, kullanıcıların üzerinde hareket edebileceği, yakınlaştırıp uzaklaştırabileceği ve farklı konumlar ile ilgi çekici yerler hakkında ayrıntılı bilgi alabileceği bir haritadır.
Öncelikle Maps JavaScript API'yi sayfaya eklemeniz gerekir.
Bu işlem, HTML sayfanıza aşağıdaki komut dosyasını bağlayarak yapılır. Böylece libraries=marker ekleyerek haritaya gelişmiş işaretçiler ekleyebilirsiniz.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>URL, sayfa yüklendiğinde çalışan JavaScript initMap işlevine referans veriyor. URL'de, hedeflediğiniz ülkeye göre doğru şekilde biçimlendirildiğinden emin olmak için haritanızın dilini veya bölgesini de tanımlayabilirsiniz. Bölge ayarlamak, ABD dışında kullanılan uygulamaların davranışlarının da ayarladığınız bölgeye göre şekillenmesini sağlar. Desteklenen dillerin ve bölgelerin tam listesi için Google Haritalar Platformu Kapsam Ayrıntıları'nı inceleyin ve region
parametre kullanımı hakkında daha fazla bilgi edinin.
Ardından, haritanızı sayfaya yerleştirmek için bir HTML div gerekir.
Haritanın gösterileceği yerdir.
<div id="map"></div>Bir sonraki adım, haritanızın temel işlevini 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, başlangıç konumunu, harita kimliğini (gelişmiş işaretçiler ve bulut tabanlı harita stili için gereklidir), harita türünü ve kullanıcılarınızın haritada hangi kontrolleri kullanabileceğini ayarlayabilirsiniz. getElementById() öğesinin, önceki "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 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
Yer bulma aracı için genellikle başlangıç konumunu, odak noktasını veya sınırlarını ve yakınlaştırma seviyesini (haritanın bu konuma ne kadar yakınlaştırıldığı) ayarlamak istersiniz. Kontrollerin ayarlanması gibi diğer öğelerin çoğu, haritayla etkileşim düzeyini belirlediğiniz için 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 işaretçilerinin yerine kendi özel işaretçilerinizi oluşturun.
- Markanızı yansıtmak için harita özelliklerinin renklerini değiştirin.
- Hangi ilgi çekici yerleri (turistik yerler, yemek, konaklama vb.) ve hangi yoğunlukta göstereceğinizi kontrol edebilirsiniz. Böylece, kullanıcıların dikkatini konumlarınıza odaklayabilir ve kullanıcıların en yakın konuma ulaşmasına yardımcı olan önemli noktaları öne çıkarabilirsiniz.
Özel harita işaretçileri oluşturma
Varsayılan raptiye arka planını, kenarlığını veya glif rengini değiştirerek (örneğin, bir yerin şu anda açık olup olmadığını belirtmek için), işaretçiyi markanızın logosu gibi bir özel grafik resimle değiştirerek ya da özel HTML ve CSS işaretçileri oluşturarak gelişmiş işaretçilerinizi özelleştirebilirsiniz. Bilgi pencereleri veya açılır pencereler, kullanıcılara çalışma saatleri, telefon numarası veya fotoğraflar gibi ek bilgiler sağlayabilir.
Aşağıda, özel grafik işaretçiler kullanan örnek bir harita verilmiştir. ( Maps JavaScript API'de özel grafik işaretçiler konusundaki kaynak koduna bakın.)
Ayrıntılı bilgi için JavaScript (web), Android ve iOS ile ilgili gelişmiş işaretçi belgelerine bakın.
Haritanızın stilini ayarlama
Google Haritalar Platformu, haritanızı kullanıcıların en yakın konumu bulmasına, oraya mümkün olduğunca hızlı ulaşmasına ve markanızı güçlendirmenize yardımcı olacak şekilde stilize etmenize olanak tanır. Örneğin, harita renklerini markanıza uygun şekilde değiştirebilir ve kullanıcılara gösterilen ö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.
Google Cloud Console'daki Harita Stilleri sayfasında proje harita stilleri oluşturabilir veya değiştirebilirsiniz.
Cloud Console'da harita stili oluşturma ve stil verme animasyonlarını görmek için genişletin:
Sektör haritası stilleri
Bu animasyonda, kullanabileceğiniz önceden tanımlanmış sektöre özel harita stilleri gösterilmektedir. Bu stiller, her sektör türü için optimum bir başlangıç noktası sağlar. Örneğin, Perakende harita stili, haritadaki önemli yerleri azaltarak kullanıcıların konumlarınıza odaklanmasına olanak tanır. Ayrıca, en yakın konuma olabildiğince hızlı ve güvenli bir şekilde ulaşmalarına yardımcı olacak önemli yerleri de gösterir.
Önemli yerleri kontrol etme
Bu animasyon, önemli yerlerin işaretçi rengini ayarlar ve harita stilindeki ÖY yoğunluğunu artırır. Yoğunluk ne kadar yüksek olursa haritada o kadar çok ÖY işaretçisi görünür.
Her harita stilinin kendi 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 anında 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 eklediğinizde Maps JavaScript API, bu stilleri kodunuzda çağırdığınızda haritanın daha hızlı oluşturulması için 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 stil uygulanmış bir harita gösterir. (Haritanın sayfada görüneceği bir 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.
Özel konum verilerini yer ayrıntılarıyla birleştirme
Önceki Konumlarınızı etkileşimli bir haritada gösterin bölümünde, kullanıcıların konumlarınız hakkında çalışma saatleri, fotoğraflar ve yorumlar gibi zengin bilgiler edinmesi için yer ayrıntılarının nasıl kullanılacağı açıklanmaktadır.
Places API (Yeni) içindeki farklı veri alanlarının fiyatlandırma ve SKU katmanlarını anlamak faydalıdır. Maliyetlerinizi yönetmek için bir strateji olarak, konumlarınızla ilgili mevcut bilgileri Google Haritalar'daki yeni bilgilerle (ör. geçici kapanma, tatil günlerinde çalışma saatleri, kullanıcı puanları, fotoğrafları ve yorumları) birleştirebilirsiniz. Mağazalarınızın iletişim bilgileri zaten varsa bu alanları Yer Ayrıntıları'ndan istemeniz gerekmez. Alan maskenizi yalnızca göstermek istediğiniz alanları getirecek şekilde kısıtlayabilirsiniz.
Yer Ayrıntıları yerine kullanmak veya bunları desteklemek için kendi yer verilerinizi kullanabilirsiniz. Tam yığınlı konum belirleyici codelab'i, kendi konum ayrıntılarınızı depolamak ve almak için GeoJSON'u bir veritabanıyla kullanma örneği sunar.