Google Maps JavaScript API Kullanımı Bölüm 2

Using Google Maps Api Part 2
15:05 Okunma: 5368

Merhaba arkadaşlar bu Google Map JavaScript Api kullanımına devam ediyorum.
Gerekliler

1) jQuery

2) Önceki makalede anlattığım üzere Kopyaladığımız API KEY Kopyalamadıysan Credentials altında API Key'i alabilirsiniz.

Sayfamınız head kısmına önce jQuery sonra google map javascript api kütüphanemizi api key ile beraber ekliyoruz.

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDit4G0bMDP54KRwVqRTzvFtFGMNPRt_mo"></script>

Harita için zorunlu iki değişken var zoom ve center
zoom: 0-19 arası değer alır
center: Harita ilk açıldığında nereye odaklanması gerektiğini belirtir.

Harita için MAP ID'li bir div açıyoruz. (Haritaya genişlik ve yükseklik vermeyi unutmayın.)

<div id="MAP"></div>

Global bir map değişkeni tanımlayıp oluşturacağımız initialize methodunda değerini atıyoruz ve bunun yanında zorunlu olan center ve zoom değişkenlerini de atıyoruz.
Sonrasında document ready'de yani sayfa yüklendiğinde bu methodu çağırıyoruz.
Merkez lokasyonumuzu oluşturmamız gerekiyor bunun için aşağıdaki kod parçacığını kullanıyoruz.

var lokasyon = new google.maps.LatLng('latitude','longitude');

var myCenter = new google.maps.LatLng(40.775925, 30.388059);
var map;
function initialize()
{
var mapProp = {
center: myCenter,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("MAP"), mapProp);
}
$(document).ready(function()
{ initialize();
});

MapTypeId Harita tipidir ve 4 çeşittir.
ROADMAP: Yol Haritası
SATELLITE: Uydu
HYBRID: Karışık
TERRAIN: Arazi Görünümü

Bu değişkenleri ilgili alan ile değiştirirek görünümü değiştirebilirsiniz.

Görünüm



Haritamıza Pin Eklemek istersek initialize methodu içinde marker veya markerlar oluşturmalıyız.

position: Center pozisyonumuz ya da yeni lokasyon oluşturup bunu atayabilirsiniz.
map: Global tanımladığımız map değişkenimiz
icon: Yer işaretçimiz. Kendimiz verebilir ya hiç girmeyip default tanımlı kırmızı pin olmasını sağlayabiliriz. (Örn: icon: '/dosyayolu/icon.png')
title: İşaretçi başlığı
animation: Pin'e animasyon vermek kullanabilirsiniz. Bu örnekte Zıplama efekti bulunmaktadır. (BOUNCE)
var marker = new google.maps.Marker({
position: myCenter,
map: map,
icon: '/assets/img/icons/' + icn,
title: 'TEST PROJECT',
animation: google.maps.Animation.BOUNCE
});


Görünüm



Eklediğimiz pin bilgi penceresi eklemek istersek bir info window eklememiz gerekiyor.
content: Bilgi penceresi içeriğidir. HTML veride basabilirsiniz.
var infowindow = new google.maps.InfoWindow({
content: '<strong>Lorem ipsum</strong>'
});

Pin'e tıklandığında bu pencereyi açabilmek için Pin'e click event listener ekliyoruz.

google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});


Görünüm
İyi Kodlar!