Bu yazımda Google Maps Api V3 hakkında kısaca bilgi vereceğim. Sonra ki makalelerimde bu konu ile ilgili farkı uygulamalara da yer vermeyi düşünüyorum. Google Maps artık günlük hayatımızda özellikte webte adres bulma gibi işlemlerde sıklıkla kullanılmaktadır. Birçok kişi de artık web sitesindeki özellikle de iletişim kısmında bu haritaları kullanarak adreslerini görüntülüyorlar. Peki biz Google Maps’ı sitemizde nasıl entegre edeceğiz. Google maps’ı web sitenizde kullanmak için V3 sürümü öncesinde google sitesinde key edinmeniz gerekiyordu.Ancak V3 sürümüyle bu bağımlılığı ortadan kaldırmışlar.
Öncelikle bu yapıyı kullanabilmek için gereken javascript dosyasını aşağıda şekilde sayfamıza ekliyoruz.
Harita sayfasını oluşturmak ve gereken parametreleri belirlemek için aşağıdaki şekilde javascript oluşturuyoruz.
Uygulama dosyasını indirebilirsiniz..
1 |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> |
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> function load() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 5, center: new google.maps.LatLng(38.75408327579141, 36.38671875), mapTypeId: google.maps.MapTypeId.HYBRID }); } </script> |
Yukardaki scripti kısaca açıklamak gerekirse :
Öncelikle yeni bir harita nesnesi tanımlıyoruz ve bu harita id si map olan html div nesnesinin içerisinde görüntülenecek.
zoom, haritaya yaklaşma ölçeği,
center,enlem ve boylam olarak coğrafi koordinatlardır. Bu koordinatlar yaklaşık olarak Türkiye’nin orta noktasını göstermektedir. Harita ekranda görüntülendiğinde bu merkezi baz alarak ekrana yerleştirilecek.
mapTypeld ise harita tipini belirliyoruz. Sonra ki makalelerimde bu konuya da değineceğim.
Ardında html tarafındaki haritanın yerleşeceğiz div i ve body onload eventindeki load fonksiyonunu aşağıdaki şekilde düzenliyoruz.
1 2 3 |
<body onload="load()"> <div id="map" style="width:600px; height:600px"></div> </body> |