Google Map ile Marker ve GeoCode Servisleri
Merhabalar,
Google Map kullanımı için Google Developer Console kaydınızın olması gerekiyor. Bu kayıtta adınınza bir proje açıyorsunuz. Projeyi açtığınızda önünüze aşağıdaki gibi bir console geliyor.
Biz browser üzerinde google map kullanacağımız için "Google Map Javascript API" yi enable ediyoruz. Daha sonra sayfamızda kullanmak üzere bu API için key alacağız. "Credentials" kısmını tıklıyoruz.
"Add Credentials" dan key alıyoruz."Browser Key" i seçiyoruz ve hangi adreste çalışacak ise o URL i veriyoruz. Artık kullanılmak üzere bir anahtarımız oldu. Sayfaya haritamızı ekleyelim.
Sayfamıza scriptimizi eklememiz gerekiyor.
script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false&key=****">
"***" kısma aldığımız key i koyuyoruz. Haritayı aktiflemek için ;
google.maps.event.addDomListener(window, 'load', initialize);
Google Map harita kütüphanesi bizim için aktif. Harita yı çalıştırmak için html kısmına;
div id="map" style="width:100%; height:100%">
ekliyoruz.Script olarak initialize methodu içerisine
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
Load edilen harita map id li div içerine yüklenecektir. Böylece haritamız eklendi. Marker ise yine aynı kütüphaneden çağrılıp eklenebilir.
var marker= new google.maps.Marker(
{
position : new google.maps.LatLng(Math.random()*50, Math.random()*50),
map: map,
title: "Stat",
icon : 'playingMatch.png',
animation: google.maps.Animation.DROP
});
Marker ın örneğini oluşturduğunuzda otomatik olarak eklendiğini göreceksiniz.
Gelelim geocode servislerine... Atatürk Olimpiyat Stadını sorgulayalım.
Aşağıdaki url nin adres kısmına ekleme yaptık.
http://maps.google.com/maps/api/geocode/json?address=Atat%C3%BCrk_Olimpiyat_Stadyum
Servis bize http den bir JSON dönüyor.
Gelelim geocode servislerine... Atatürk Olimpiyat Stadını sorgulayalım.
Aşağıdaki url nin adres kısmına ekleme yaptık.
http://maps.google.com/maps/api/geocode/json?address=Atat%C3%BCrk_Olimpiyat_Stadyum
Servis bize http den bir JSON dönüyor.
{
"results" : [
{
"address_components" : [
{
"long_name" : "Atatürk Olimpiyat Stadyumu",
"short_name" : "Atatürk Olimpiyat Stadyumu",
"types" : [ "point_of_interest", "establishment" ]
},
{
"long_name" : "İstanbul",
"short_name" : "İstanbul",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Ziyagökalp Mahallesi",
"short_name" : "Ziyagökalp",
"types" : [ "administrative_area_level_4", "political" ]
},
{
"long_name" : "Başakşehir",
"short_name" : "Başakşehir",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "İstanbul",
"short_name" : "İstanbul",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "Türkiye",
"short_name" : "TR",
"types" : [ "country", "political" ]
},
{
"long_name" : "34306",
"short_name" : "34306",
"types" : [ "postal_code" ]
}
],
"formatted_address" : "Ziyagökalp Mahallesi, Atatürk Olimpiyat Stadyumu, 34306 Başakşehir/İstanbul, Türkiye",
"geometry" : {
"location" : {
"lat" : 41.0759488,
"lng" : 28.7661776
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 41.0772977802915,
"lng" : 28.7675265802915
},
"southwest" : {
"lat" : 41.0745998197085,
"lng" : 28.7648286197085
}
}
},
"place_id" : "ChIJNcJQGQqmyhQRwiz9KgJWVHo",
"types" : [ "stadium", "point_of_interest", "establishment" ]
},
{
"address_components" : [
{
"long_name" : "Stadyum",
"short_name" : "Stadyum",
"types" : [ "route" ]
},
{
"long_name" : "Yenimahalle Mahallesi",
"short_name" : "Yenimahalle",
"types" : [ "administrative_area_level_4", "political" ]
},
{
"long_name" : "Canik",
"short_name" : "Canik",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "Samsun",
"short_name" : "Samsun",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "Türkiye",
"short_name" : "TR",
"types" : [ "country", "political" ]
},
{
"long_name" : "55080",
"short_name" : "55080",
"types" : [ "postal_code" ]
}
],
"formatted_address" : "Yenimahalle Mahallesi, Stadyum, 55080 Canik/Samsun, Türkiye",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 41.2717198,
"lng" : 36.355226
},
"southwest" : {
"lat" : 41.269215,
"lng" : 36.3537347
}
},
"location" : {
"lat" : 41.27111499999999,
"lng" : 36.35425499999999
},
"location_type" : "GEOMETRIC_CENTER",
"viewport" : {
"northeast" : {
"lat" : 41.2718163802915,
"lng" : 36.3558293302915
},
"southwest" : {
"lat" : 41.2691184197085,
"lng" : 36.3531313697085
}
}
},
"partial_match" : true,
"place_id" : "ChIJH7VOWyN2iEARzSO6G_rLIxc",
"types" : [ "route" ]
},
{
"address_components" : [
{
"long_name" : "Olimpiyat Stadı Yolu",
"short_name" : "Olimpiyat Stadı Yolu",
"types" : [ "route" ]
},
{
"long_name" : "Başakşehir",
"short_name" : "Başakşehir",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "İstanbul",
"short_name" : "İstanbul",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "Türkiye",
"short_name" : "TR",
"types" : [ "country", "political" ]
}
],
"formatted_address" : "Olimpiyat Stadı Yolu, Başakşehir/İstanbul, Türkiye",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 41.10417340000001,
"lng" : 28.7803087
},
"southwest" : {
"lat" : 41.0631467,
"lng" : 28.7677317
}
},
"location" : {
"lat" : 41.08372200000001,
"lng" : 28.7731777
},
"location_type" : "GEOMETRIC_CENTER",
"viewport" : {
"northeast" : {
"lat" : 41.10417340000001,
"lng" : 28.7803087
},
"southwest" : {
"lat" : 41.0631467,
"lng" : 28.7677317
}
}
},
"partial_match" : true,
"place_id" : "ChIJE3d7D_mlyhQRxdQXY4z45sQ",
"types" : [ "route" ]
}
],
"status" : "OK"
}
JSON da location kısmında lat,lng ile bize coğrafi kordinatlar veriliyor. Marker içerisinde position olarak bu kordinatları verdiğinizde stat üzerine konduğunu göreceksiniz.
Yorumlar
Yorum Gönder