ASP.NET’te Google Harita Ekleme
Google Haritalar, dünyanın en popüler harita servislerinden biridir. Kullanıcıların konumlarını bulmalarına, yol tarifi almalarına ve ilgi çekici yerleri keşfetmelerine olanak tanır. ASP.NET web uygulamalarına Google Haritalar eklemek, kullanıcı deneyimini iyileştirmenin ve web sitenizin işlevselliğini artırmanın harika bir yoludur.
Google Haritalar API’sini Kullanma
ASP.NET’te Google Haritalar kullanmak için, öncelikle Google Haritalar API’sini etkinleştirmeniz gerekir. Bunu yapmak için, Google Cloud Platform konsoluna gidin ve bir proje oluşturun. Projenizi oluşturduktan sonra, “API’ler ve Hizmetler” bölümüne gidin ve “Haritalar API’si”ni etkinleştirin.
Google Haritalar API’sini etkinleştirdikten sonra, API anahtarınızı almanız gerekir. Bunu yapmak için, “API’ler ve Hizmetler” bölümüne gidin ve “Kimlik bilgileri” sekmesine tıklayın. Ardından, “API Anahtarları” bölümüne gidin ve “Anahtar Oluştur” düğmesine tıklayın.
API anahtarınızı aldıktan sonra, ASP.NET web uygulamanıza ekleyebilirsiniz. Bunu yapmak için, aşağıdaki adımları izleyin:
- ASP.NET web uygulamanızda, “Web.config” dosyasını açın.
- Aşağıdaki satırı “appSettings” bölümüne ekleyin:
xml
<add key="GoogleMapsApiKey" value="YOUR_API_KEY" />
- ASP.NET web uygulamanızda, bir ASP.NET sayfası oluşturun.
- ASP.NET sayfasında, aşağıdaki satırı ekleyin:
“`html
“`
- ASP.NET sayfasında, aşağıdaki satırı ekleyin:
“`html
“`
- ASP.NET sayfasında, aşağıdaki JavaScript kodunu ekleyin:
“`javascript
var map;
function initMap() {
var myLatLng = {lat: -34.397, lng: 150.644};
map = new google.maps.Map(document.getElementById(‘map’), {
center: myLatLng,
zoom: 8
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: ‘Hello World!’
});
}
“`
- ASP.NET sayfasını kaydedin ve çalıştırın.
Google Haritalar’ı Özelleştirme
Google Haritalar’ı özelleştirmek için, Google Haritalar API’sinin sunduğu çeşitli özellikleri kullanabilirsiniz. Örneğin, haritanın merkezini, yakınlaştırma seviyesini, harita türünü ve işaretçileri özelleştirebilirsiniz.
Google Haritalar’ı özelleştirmek için, aşağıdaki adımları izleyin:
- ASP.NET web uygulamanızda, “Web.config” dosyasını açın.
- Aşağıdaki satırı “appSettings” bölümüne ekleyin:
xml
<add key="GoogleMapsCustomizationOptions" value="YOUR_CUSTOMIZATION_OPTIONS" />
- ASP.NET web uygulamanızda, ASP.NET sayfasını açın.
- ASP.NET sayfasında, aşağıdaki satırı ekleyin:
“`html
“`
- ASP.NET sayfasında, aşağıdaki satırı ekleyin:
“`html
“`
- ASP.NET sayfasında, aşağıdaki JavaScript kodunu ekleyin:
“`javascript
var map;
function initMap() {
var myLatLng = {lat: -34.397, lng: 150.644};
var customizationOptions = JSON.parse(document.getElementById(‘GoogleMapsCustomizationOptions’).value);
map = new google.maps.Map(document.getElementById(‘map’), customizationOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: ‘Hello World!’
});
}
“`
- ASP.NET sayfasını kaydedin ve çalıştırın.
Faydalı Siteler ve Dosyalar
- Google Haritalar API’si
- Google Haritalar API’si Belgeleri
- Google Haritalar API’si Örnekleri
- Google Haritalar API’si Kütüphaneleri