Genel Bakış
Google Haritalar Platformu; web (JS, TS), Android ve iOS için ve yerler, yol tarifleri ve Google'dan hakkında bilgi edinmek için web hizmetleri API'leri görebilirsiniz. Bu kılavuzdaki örnekler bir platform için yazılmıştır ancak belge bağlantıları diğer platformlarda uygulanmak üzere sağlanmıştır.
Kullanıcılarınız internette ürünlerinizi gördüğünde en iyi ve en iyi ürünleri bulmak ister. almanın kolay bir yolunu sunuyor. Ürün Bulucu uygulama kılavuzu Bu konuda sağladığımız özelleştirme ipuçlarının yanı sıra mükemmel bir ürün oluşturmak için Google Haritalar Platformu API'lerinin optimum kombinasyonu kullanıcı deneyimleri sunmak istiyoruz.
Bu uygulama kılavuzunu izleyerek müşterilerin ürünlerinizi bulmaları için ihtiyaç duydukları bilgileri sağlar ve onlara (arabayla, bisikletle, yürüyerek veya bisikletle) ilgili ürünlerinin bulunduğu bir mağaza toplu taşıma.
API'ler etkinleştiriliyor
Ürün Konum Belirleyici'yi uygulamak için Google Cloud Console. Aşağıdaki köprüler sizi Google Cloud Console'a yönlendirir API'yi etkinleştirmek için:
Kurulum hakkında daha fazla bilgi için Başlarken Google Haritalar Platformu'nu kullanmaya başladı.
Uygulama kılavuzu bölümleri
Aşağıda, bu konuda ele alacağımız uygulama ve özelleştirme işlemleri belirtilmiştir.
- . Onay işareti simgesi, temel uygulama adımıdır.
- . Yıldız simgesi isteğe bağlıdır ancak çözümü geliştirir.
| Mağaza konumlarını Google Haritalar Platformu yerleriyle ilişkilendirme | Google Haritalar Platformu'nda bir mağaza konumunu yerle eşleştirin. | |
| Kullanıcının konumunu belirleme | Kullanıcı deneyimini tüm platformlarda iyileştirmek için kullandıkça yaz özelliği platformlara olanak tanır ve minimum tuş vuruşlarıyla adres doğruluğunu iyileştirir. | |
| En yakın mağazaları belirleme | Birden fazla başlangıç noktası için seyahat mesafesini ve seyahat süresini hesaplayarak isteğe bağlı olarak çeşitli ulaşım şekillerini belirtmek, örneğin arabayla, arabayla, toplu taşımayla veya bisikletle | |
| Mağaza bilgilerini gösterme | Kullanıcıların şu adrese gidebilmesi için mağazalarınızda veri açısından zengin bilgiler gösterin kolaylaştırabilirsiniz. | |
| Navigasyon yol tarifi sağlama | Çeşitli formları kullanarak kalkış noktasından hedefe yol tarifi verileri alın arabayla, arabayla, bisikletle ve toplu taşıma gibi ulaşım imkanlarını kullanabilirsiniz. | |
| Mobil cihaza yol tarifi gönderme | Web sayfanızda yol tarifi göstermenin yanı sıra, Hareket halindeyken Google Haritalar'ı kullanarak navigasyon için bir kullanıcının telefonuna yol tarifi. | |
| Konumlarınızı etkileşimli haritada gösterme | Konumlarınızın göze çarpmasını ve tarzın değişmesini sağlamak için özel harita işaretçileri oluşturun eşleştirmeye karar verin. Belirli noktaları görüntüleme (veya gizleme) kullanıcıların kendilerini daha iyi yönlendirmelerine yardımcı olmak için haritanızda önemli yerlerin (ÖY) ve ÖY yoğunluğunu kontrol edin. | |
| Özel konum verilerini Yer Ayrıntılarıyla birleştirme | Yer ayrıntıları ile birleştirerek özel konum ayrıntıları karar vermelerine yardımcı olan zengin bir veri kümesidir. |
Mağaza konumlarını Google Haritalar Platformu yerleriyle ilişkilendirme
Yer kimlikleri alınıyor
| Bu örnekte şunlar kullanılmaktadır: Places API | Sunulan diğer seçenekler: JavaScript |
Mağazalarınızın adı gibi temel bilgileri içeren bir veritabanınız olabilir.
söz konusu konumu, adresini ve telefon numarasını ilişkilendirmeniz gerekir.
Google Haritalar Platformu'nda bir yerle sağladığınızda, bu hedeflerle
kullanıcılar ürünleri teslim alabiliyor. Bilgileri getirmek için
coğrafi bilgiler de dahil olmak üzere, Google Haritalar Platformu'nun bu yer hakkında
koordinatlarını ve kullanıcı tarafından eklenen bilgileri bulmak için, veritabanınızdaki her bir mağazaya karşılık gelen yer kimliğini bulun.
Şu numarayı arayabilirsiniz:
Places API Yer Arama'da Yer uç noktası bulun ve
yalnızca place_id alanını isteyin.
Aşağıda, Google Londra için yer kimliği istemeye ilişkin bir örnek gösterilmektedir ofis:
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
Bu yer kimliğini saklayabilirsiniz diğer mağaza verilerinizle veritabanınıza eklemeli ve bu verileri mağaza hakkında bilgi isteme. Aşağıda, yer kimliğini almak, Yer Ayrıntılarını almak ve yer.
Konumlarınızın coğrafi kodlamasını yapma
| Bu örnekte şunlar kullanılmaktadır: Coğrafi Kodlama API'si | Sunulan diğer seçenekler: JavaScript |
Mağaza veritabanınızda açık adresler bulunuyorsa ancak coğrafi koordinatlar yoksa coğrafi kodlama API'sini kullanarak söz konusu yerin enlem ve boylamını mağazanıza en yakın olan mağazaları hesaplamak amacıyla kullanılır. yardımcı olur. Mağazanın kodunu sunucu tarafında coğrafi olarak ayarlayabilir, enlemleri boylamlar ve yenile en azından 30 günde bir.
Geocoding API'nin kullanılmasına ilişkin bir örnek Google Londra için döndürülen yer kimliğinin enlem ve boylamı ofis:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
Kullanıcının konumunu belirleme
| Bu örnekte şunlar kullanılmaktadır: Haritalar JavaScript API'deki Yerler Otomatik Tamamlama Kitaplığı | Sunulan diğer seçenekler: Android | iOS |
Ürün Bulma Aracı'nın temel bileşenlerinden biri, kullanıcılarınızın konum. Kullanıcıya başlangıç tarihini belirlemesi için iki seçenek sunabilirsiniz konum: yaptıkları aramanın kaynağını yazma veya web'e erişim izni verme tarayıcı coğrafi konumu veya mobil konum hizmetleri.
Otomatik tamamlama özelliğini kullanarak yazılan girişleri işleme
Bugünün kullanıcıları, Google Haritalar'da önceden yazılmış otomatik tamamlama Google Haritalar'ın tüketici sürümü. Bu işlev, herhangi bir cihaza mobil cihazlarda Google Haritalar Platformu Yer kitaplıklarını kullanarak uygulama web'de kullanılabilir. Bir kullanıcı adresi yazdığında otomatik tamamlama diğer alanları doldurur widget'larla daha verimli bir şekilde kontrol edebilirsiniz. Kendi otomatik tamamlamanızı da sağlayabilirsiniz işlevini kullanmanız gerekir.
Aşağıdaki örnekte, Otomatik Yer Tamamlama kitaplığını sitenize eklemek için
libraries=places parametresi
Maps JavaScript API komut dosyası URL'si.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>Ardından, kullanıcı girişi için sayfanıza bir metin kutusu ekleyin:
<input id="autocomplete" placeholder="Enter
starting address, city, or zip code" type="text"></input>Son olarak, Otomatik tamamlama hizmetini başlatmanız ve
adlandırılmış metin kutusu görünür. Otomatik Yer Tamamlama tahminlerini coğrafi kodlama türleriyle kısıtlama
giriş alanınızı açık adresleri, mahalleleri, şehirleri ve
ve posta kodları (kullanıcıların açık alanları tanımlamak için belirli bir düzeyde
kaynak. Yanıtın doğru olması için geometry alanını istediğinizden emin olun
kullanıcının başlangıç noktasının enlem ve boylamını içerir. Bu haritaları kullanacaksınız
yerlerinizin ilişkisini belirtmek için koordinatlar
başlangıç noktası.
// Create the autocomplete object, restricting the search predictions to // geographical location types. const autocomplete = new google.maps.places.Autocomplete( document.getElementById("autocomplete"), { types: ["geocode"], componentRestrictions: {'country': ['gb']}, fields: ['place_id', 'geometry', 'formatted_address'] } ); // When the user selects an address from the drop-down // zoom to the select location and add a marker. autocomplete.addListener("place_changed", searchFromOrigin); }
Bu örnekte, kullanıcı adresi seçtiğinde
searchFromOrigin() işlevi başlar. Bu, şu geometriyi alır:
kullanıcının konumu olan eşleşen sonuç, ardından en yakındaki
başlangıç noktası olarak bu koordinatlara dayalı yerleri
En yakın mağazaları belirleme bölümü
Yer eklemeyle ilgili adım adım açıklamalı videoları görmek için bunu genişletin Uygulamanız için otomatik tamamlama:
Web sitesi
Android uygulamaları
iOS uygulamaları
Tarayıcı coğrafi konumu kullanılıyor
HTML5 tarayıcı coğrafi konumu istemek ve işlemek için şuraya bakın: Konumumu kullan penceresini etkinleştirme:
En yakın mağazaları belirleme
| Bu örnekte aşağıdakiler kullanılmaktadır: Mesafe Matrisi Hizmeti, Maps JavaScript API | Sunulan diğer seçenekler: Mesafe Matrisi API'si |
Kullanıcının konumunu öğrendikten sonra, bunu mağazanızın yeriyle karşılaştırabilirsiniz. size yardımcı olabilir. Bu, Mesafe Matrisi Hizmeti, Maps JavaScript API, kullanıcılarınızın sürüş süresi veya yol mesafesi gibi onlar için en uygun konum belirlenebilir.
Konum listesini düzenlemenin standart yolu, konumları dokunun. Bu mesafe, çoğu zaman düz çizgi kullanılarak hesaplanır konumuz olabilir, ancak bu yanıltıcı olabilir. Düz çizgi geçilmez bir nehrin üzerinden veya trafiğin yoğun olduğu yolların üzerinden geçmelisiniz. daha uygun olabilir. Bu önemli, birden fazla mesafedeki konumları belirleyebilirsiniz.
Mesafe Matrisi Hizmeti, Maps JavaScript API'nin çalışması için kalkış ve varış konumlarının listesi ile sadece seyahatin değil, hem de aralarındaki süreyi gösterir. Bir kullanıcının kaynağı ise istedikleri başlangıç noktasını ve ulaşabilecekleri hedefleri alakalı yerler olabilir. Kalkış ve varış noktaları şu şekilde belirtilebilir: koordinat çiftleri veya adres olarak; çağrısı yaptığınızda, hizmet emin olun. URL parametrelerinin Google tarafından nasıl ele alınmasını istediğinizi belirtmek için Mesafe Matrisi Hizmeti, Maps JavaScript API ve ilave parametrelerini kullanabilirsiniz.
Aşağıdaki örnekte Mesafe Matrisi Hizmeti, Haritalar JavaScript API'si, kullanıcının başlangıç noktası ve 25 mağaza konumu bulunmalıdır.
function getDistances(place) { let distanceMatrixService = new google.maps.DistanceMatrixService(); const origins = [place]; return new Promise((resolve, reject) => { const callback = (response, status) => { if (status === google.maps.DistanceMatrixStatus.OK && response) { resolve(response); } else { reject(status); } }; distanceMatrixService.getDistanceMatrix( { origins, destinations: stores.slice(0, 25).map((store) => store.location), travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.IMPERIAL, }, callback ); }); } function update(location) { if (!location) { return; } // ... // sort by spherical distance stores.sort((a, b) => { return ( google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(a.location), location ) - google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(b.location), location ) ); }); // display travel distance and time getDistances(location) .then((response) => { for (let i = 0; i < response.rows[0].elements.length; i++) { stores[i].address = response.destinationAddresses[i]; stores[i].travelDistance = response.rows[0].elements[i].distance.value; stores[i].travelDistanceText = response.rows[0].elements[i].distance.text; stores[i].travelDuration = response.rows[0].elements[i].duration.value; stores[i].travelDurationText = response.rows[0].elements[i].duration.text; } }) .finally(() => { renderCards(stores); autocompleteInput.disabled = false; isUpdateInProgress = false; }); }
Yakındaki her konum için şu ayrıntılara göre ürünün stok durumunu gösterebilirsiniz: emin olmanız gerekir.
Mağaza bilgilerini gösterme
| Bu örnekte kullanımlar: Yer Kitaplığı, Maps JavaScript API | Sunulan diğer kaynaklar: Android için Yerler SDK'sı | iOS için Yerler SDK'sı | Places API |
İletişim bilgileri, çalışma saatleri, müşterilerin tercih ettikleri konumu veya mevcut açık durumu seçmesine yardımcı olmak için siparişlerini sonlandırıyor.
Yer Ayrıntılarını almak için Maps JavaScript API yanıtı filtreleyebilir ve oluşturabilirsiniz.
Yer Ayrıntılarını istemek için konumlarınızın her birinin yer kimliğine ihtiyacınız vardır. Cihazınızın yer kimliğini almak için Yer kimliklerini alma konusuna bakın konum.
Aşağıdaki Yer Ayrıntısı isteği; adres, koordinatları, web sitesini Google Londra yer kimliği için telefon numarası, derecelendirme ve çalışma saatleri:
var request = { placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU', fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website'] };service = new google.maps.places.PlacesService(map); service.getDetails(request, callback);
function callback(place, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { createMarker(place); } }
Ürün Bulucu'yu İyileştirme
İşletmenizin veya kullanıcılarınızın özelliklerine bağlı olarak kullanıcının ihtiyaçlarını daha da sunmaktır.
Rota izleme için yol tarifi sağlama
| Bu örnekte aşağıdakiler kullanılmaktadır: Maps JavaScript API Yol Tarifi Hizmeti | Sunulan diğer kaynaklar: Directions API doğrudan uygulamadan veya uzaktan Android ve iOS'te kullanım için bir web hizmeti sunucu proxy'si aracılığıyla |
Kullanıcılara siteniz veya uygulamalarınızın içinden yol tarifi gösterdiğinizde, kullanıcılarınız Bu sayede sitenizden ayrılıp diğer kullanıcıların dikkatinin dağılması gerekmez. veya haritadaki rakipleri görebilir. Mesela yıl boyunca 2000'den bu yana ve belirli bir yolculuğun etkisini göstermek için bu araçtan yararlanmak üzere sahip olabileceğiniz karbon veri kümesidir.
Yol Tarifi Hizmeti ayrıca sonuçları işlemenize ve harita üzerinde kolayca görüntüleyebilirsiniz.
Aşağıda, bir yol tarifi panelinin görüntülenmesi örneği gösterilmektedir. Okuyucu Gelirleri Yöneticisi'ni örnekte Metin yol tariflerini görüntüleme bölümüne bakın.
Mobil cihaza yol tarifi gönderiliyor
Kullanıcıların bir konuma ulaşmasını daha da kolaylaştırmak için kısa mesaj veya e-posta gönderebilirsiniz bir yol tarifi bağlantısı ekleyin. Kullanıcı bu düğmeyi tıkladığında Google Haritalar uygulaması yüklüyse kullanıcının telefonunu veya maps.google.com adresini kullanıcının cihazına yükleyecektir. web tarayıcısı. Bu deneyimlerin her ikisi de kullanıcıya Hedefe ulaşmak için sesli yardım da dahil olmak üzere adım adım navigasyon.
kullan
aşağıdaki gibi bir yol tarifi URL'si oluşturmak için
destination parametresi ve yer olarak URL kodlamalı yer adı
destination_place_id parametresi olarak kimlik. Bu projenin
Haritalar URL'leri oluşturun veya kullanın, böylece API anahtarı eklemenize gerek kalmaz
gelir.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
İsterseniz bir origin sorgu parametresi için aynı
adresi biçimini hedef olarak ayarlayın. Ancak bunu atladığınızda talimatlar,
kullanıcının bulunduğu yerden farklı olabilir.
uygulamanızı indirin.
Haritalar URL'leri
travelmode ve benzeri ek sorgu parametresi seçenekleri sağlar
Navigasyon açıkken yol tariflerini başlatmak için dir_action=navigate
beklemeye gerek yoktur.
Yukarıdaki örnek URL'yi genişleten bu tıklanabilir bağlantı,
origin şehrini Londra futbol stadyumu olarak
Şu konum için toplu taşıma yol tarifini sağlamak için travelmode=transit:
seçeceğiz.
Bu URL'yi içeren bir kısa mesaj veya e-posta göndermek için şu anda üçüncü taraf uygulaması (örneğin, twilio ile giriş yapın. App Engine kullanıyorsanız SMS göndermek için üçüncü taraf şirketlerden yararlanabilirsiniz tercih edebilirsiniz. Daha fazla bilgi için bkz. Üçüncü Taraf Hizmetler ile Mesaj Gönderme
Konumlarınızı etkileşimli haritada gösterme
Dinamik haritaları kullanma
| Bu örnekte şunlar kullanılmaktadır: Maps JavaScript API | Sunulan diğer kaynaklar: Android | iOS |
Bulucu, kullanıcı deneyiminin önemli bir parçasıdır. Ancak bazı siteler kullanıcıların aradıklarını bulmak için siteden veya uygulamadan ayrılmalarını gerektiren basit bir haritanın dahi yakındaki konum. Bu durumda da gereken bilgileri almak için sayfalar arasında gezinebilir. Bunun yerine doğrudan uygulamanıza haritalar yerleştirerek ve bunları özelleştirerek izin verir.
Sayfanıza dinamik harita (kullanıcıların taşıyabileceği bir harita) ekleme yakınlaştırma ve uzaklaştırma yapabilir, farklı konumlar ve yerler hakkında yalnızca birkaç satır kodla yapılabilir.
Öncelikle, sayfaya Maps JavaScript API'yi eklemeniz gerekir. Bu işlem, aşağıdaki komut dosyasını HTML sayfanızda bağlayarak yapılır.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>URL,initMap
sayfa yüklenir. URL'de ayrıca,
haritanızın doğru şekilde biçimlendirildiğinden emin olmak için dil veya bölge
hedeflemenize yardımcı olur. Bölge ayarlamak,
ABD dışında kullanılan uygulamaların davranışı, ABD dışında kullanılan
seçtiğiniz bölgeye göre belirlenir. Google Haritalar Platformu Kapsamı Ayrıntıları'nı görüntüleyin.
desteklenen diller ve bölgelerin tam listesini gözden geçirin ve
region
hakkında daha fazla bilgi edinin.
Ardından, haritanızı sayfaya yerleştirmek için bir HTML div koduna ihtiyacınız vardır.
Burası haritanın görüntüleneceği yer.
<div id="map"></div>Sonraki adım, haritanızın temel işlevselliğini ayarlamaktır. Bu işlem
Komut dosyası URL'sinde initMap komut dosyası işlevi belirtildi. Bu komut dosyasında
aşağıdaki örnekte gösterildiği gibi, ilk konumu;
harita türünü ve
Harita üzerinde kullanıcılarınızın hangi denetimleri kullanabileceğini belirleyin. Not:
getElementById(), "harita"yı referans alıyor div kimliği yukarıda.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, zoomControl: false }); }
Bir bulucu için, genellikle ilk konumu, yakınlaştırma düzeyini (haritanın bu sınıra ne kadar yakınlaştırıldığı) yer). Denetimlerin ayarlanması gibi diğer öğelerin çoğu, kullandığınız Haritayla etkileşim düzeyini belirleyin.
Haritanızı özelleştirme
Haritanızın görünümünü ve ayrıntılarını çeşitli yöntemlerle değiştirebilirsiniz. Örneğin, Örneğin şunları yapabilirsiniz:
- Varsayılan harita raptiyelerinin yerine geçecek kendi özel işaretçilerinizi oluşturun.
- Harita özelliklerinin renklerini markanızı yansıtacak şekilde değiştirin.
- Gösterilecek önemli yerleri kontrol edin (turistik yerler, yemek, konaklama vb.) Böylece, hangi yoğunlukta olduğunu vurgular ve kullanıcıların dikkatini konumlarınıza odaklamanızı sağlar. Kullanıcıların en yakın konuma gitmelerine yardımcı olan önemli noktalar.
Özel harita işaretçileri oluşturma
İşaretçilerinizi, varsayılan rengi değiştirerek özelleştirebilirsiniz (büyük olasılıkla bir konumun şu anda açık olup olmadığı) ya da işaretçiyi özel bir bir resim (ör. markanızın logosu) Bilgi pencereleri veya pop-up pencereler, Kullanıcılara çalışma saatleri, telefon numarası, telefon numarası ve ve hatta fotoğraflardan bile. Ayrıca kafes, vektör, animasyonlu hatta sürüklenebilir.
Aşağıda, özel işaretçilerin kullanıldığı örnek bir harita verilmiştir. (Kaynak koduna bakın: Maps JavaScript API özel işaretçileri konusu).
Ayrıntılı bilgi için JavaScript (web) Android ve iOS
Haritanızın stilini belirleme
Google Haritalar Platformu, haritanızı, kullanıcıların daha kolay bulacağı şekilde şekillendirmenize olanak tanır oraya olabildiğince kısa sürede varmak ve bulunduğunuz konumu markanız. Örneğin, harita renklerini markanıza uygun şekilde değiştirebilir ve önemli yerleri kontrol ederek haritadaki dikkat dağıtıcı unsurları azaltabilirsiniz görebileceğiz. Google Haritalar Platformu'nda sunulan bir dizi çeşitli sektörler için optimize edilmiş yeni harita başlangıç şablonları seyahat, lojistik, emlak ve perakende gibi birçok alanda kullanılabilir.
Google Cloud Console'da harita stillerini oluşturabilir veya değiştirebilirsiniz Harita Stilleri sayfasını belirler.
Harita stili oluşturma ve harita stili oluşturma animasyonlarını görmek için stil özelliklerini ayarlamalısınız:
Sektör haritası stilleri
Bu animasyonda, kullanabileceğiniz önceden tanımlanmış sektöre özgü harita stilleri pek de iyi olmadığını unutmayın. Bu stiller her tür türü için en uygun başlangıç zamanlar olacaktır. Örneğin, Perakende harita stili önemli yerleri azaltıyor Bu şekilde, kullanıcıların hem konumunuza hem de Google Haritalar'da ve en yakın konuma hızlı ve kolay bir şekilde gidebilmeleri için kendinize güvenerek yapabilirsiniz.
Önemli yer kontrolü
Bu animasyon önemli yerler için işaretçi rengini belirler ve harita stilinde ÖY yoğunluğunu artırır. Yoğunluk ne kadar yüksek olursa Haritada daha fazla ÖY işaretçisi görünür.
Her harita stilinin kendi kimliği vardır. Şurada bir stil yayınladıktan sonra: kodunuzda bu harita kimliğine referans verirsiniz. Bu kimlik, uygulamanızı yeniden düzenlemeden harita stilini gerçek zamanlı olarak güncelleyebileceğiniz anlamına gelir. İlgili içeriği oluşturmak için kullanılan yeni görünüm otomatik olarak mevcut uygulamada görünecek ve yardımcı olabilir. Aşağıdaki örneklerde, web sayfasına harita kimliği ekleme işlemi gösterilmektedir nasıl kullanacağınızı göstereceğim.
Komut dosyası URL'sine bir veya daha fazla map_ids eklediğinizde
Maps JavaScript API, bu stilleri otomatik olarak kullanıma sunar
Böylece, kodunuzda bu stilleri çağırdığınızda daha hızlı harita oluşturabilirsiniz.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a">
</script>Aşağıdaki kod, web sayfasında stilize edilmiş bir harita görüntüler. (Bir HTML kodu gösterilmez
Haritanın görüneceği <div id="map"></div> öğe
sayfada.)
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
Google Cloud'a bulut tabanlı harita stilleri ekleme JavaScript (web) Android, ve iOS
Özel konum verilerini Yer Ayrıntılarıyla birleştirme
Önceki Etkileşimli harita üzerinde yerlerinizi gösterme bölümünde, kullanıcılara zengin bir deneyim seviyesi sunmak için Yer Ayrıntılarını çalışma saatleri, fotoğraflar ve yorumlar gibi konumlarınızla ilgili bilgiler.
Proje zaman çizelgesini maliyeti Farklı veri alanları vardır. Bunlar Temel, İletişim ve Atmosfer Verileri. Maliyetlerinizi yönetmek için bir strateji, konumlarınız hakkında sahip olduğunuz bilgiler yeni bilgilerle (Genellikle Temel ve İletişim Verileri) Google Haritalar'dan alınan, geçici süreyle kapalı olma gibi, çalışma saatleri ve kullanıcı puanları, fotoğrafları ve yorumları. Mevcut mağazalarınızın iletişim bilgilerini sağlamak için bu alanları Yer Ayrıntıları ve isteğinizi yalnızca Temel veya Atmosfer öğelerini getirecek şekilde kısıtlayabilir Görüntülemek istediğiniz verilere bağlı olarak veri alanları.
Google'ın değil, aynı zamanda Google Haritalar'daki yer verilerini kullanmak yerine Yer Ayrıntıları. İlgili içeriği oluşturmak için kullanılan kod laboratuvarı tam yığın bulucu için GeoJSON'u bir veritabanıyla konum bilgilerinizi saklayıp alabilirsiniz.