Kendi Sayfanıza Google Haritası eklemek için ne yapmalısınız…

Google haritalarının kullanım açısından çok popüler olduğunu söylememize gerek yok sanırız.
Bu bölümde kendi sayfalarınıza Google Haritaları eklemek için yapmanız gereken basit bir kaç ipucu vereceğiz.

Google Haritalarını kendi sayfanıza eklemek için öncelikle sayfanızın

 <head></head>

kısımlarının arasına ve

<title></title>


kısmından sonra Google Harita API’sini tanıtmamız gerekiyor. Bu işlem için kısaca aşağıdaki eklemek yeterli olacaktır.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Daha sonrasında html dosyasınızın <body> etiketinizi şöyle değiştirin:

<body onload="initialize()"> 

Bu satır, birazdan tanımlayacağımız initialize() fonksiyonunun sayfa yüklendiğinde çalıştırılmasını sağlar. Bu fonksiyon bizim haritamızın başlangıç ayarlarının yapılarak ekrana gelmesini sağlayacak olan fonksiyondur. Bu fonksiyona birazdan değineceğiz fakat daha öncesinde haritayı ekrana nasıl yerleştireceğimize bir karar verelim. Bunun için

<body> </body> 

etiketleri arasında herhangi bir yere yeni bir <div> etiketi açalım…

<div id=”map_canvas”></div>

Bu

<div></div> 

etiketinin amacı tanımladığımız map_canvas kimlik kodu ile birazdan çağıracağımız ve içerisine haritayı yerleştireceğimiz alanı oluşturmaktır.

Şimdi gelelim en önemli fonksiyonumuza.
Sayfamızın ilk eklediğimiz <script> </script> satırından sonra aşağıdaki şu fonksiyonu eklememiz gerekiyor.


<script type="text/javascript">

function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

</script>

Artık sayfamızı yayına açabiliriz. Harita boyutlarını değiştirmek için map_canvas kimlik kodlu div in genişlik ve yüksekliğini değiştirebilirsiniz.
İyi denemeler…