Elbette bir kroki çizebilir, veya Google Maps'e girerek PrintScreen ile ekran görüntüsünü yakalayıp bunu da kullanabilirsiniz. Ancak bu sabit resim, Google Maps'in etkileşimli harita hizmetlerinin yanında bir hiç. Örnek olarak Türkiye Büyük Millet Meclisi'nin tarifini yapabileceğim bir Google Maps haritası hazırlayacağım.
Önce Google Maps üzerinde TBMM'nin yerini ve koordinatlarını bulmalıyım. maps.google.com'a girip Türkiye Büyük Millet Meclisi'ni arattım. Sonuçta Google Maps TBMM'nin yerini buldu ve gösterdi. Harita üzerinde TBMM'nin alanında istediğim bir yeri sağ tıkladım ve menüden "What's Here?" komutunu verdim. Yeşil bir ok o noktanın koordinatlarını verdi. Yeşil oka bir kez daha tıklayarak minik açıklama balonundan UTM koordinatlarını kopyaladım. Örneğin TBMM'nin UTM koordinatları
39.909450, 32.849715
çıktı. Bunları not edelim, çünkü sayfamızdaki script'lerde kullanacağız.
Bundan sonraki adımlar şöyle. Önce <head> kısmına şunları ekledim.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Burada sensor=false, bir GPS alıcısının kullanılmadığını belirtiyor. Ancak benim sayfamda meta tagını doğrudan ekleme şansım yoktu. Bu yüzden javascript'i kullanarak şu şekilde yaptım:
<script type="text/javascript">
var objMeta;
if (document.createElement && (meta=document.createElement('meta')))
{
meta.name="viewport";
meta.content="initial-scale=1.0, user-scalable=no";
document.getElementsByTagName("Head").item(0).appendChild(meta);
}
if (document.createElement && (meta=document.createElement('meta')))
{
meta.name="viewport";
meta.content="initial-scale=1.0, user-scalable=no";
document.getElementsByTagName("Head").item(0).appendChild(meta);
}
</script>
Bunun hemen altına initialize fonksiyonumuzu yerleştiriyoruz.
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(39.909450, 32.849715);
var settings = {
zoom: 13,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Kısa bir açıklama. LatLng metoduna geçilen parametreler, daha önce bulduğum TBMM'nin UTM koordinatları. zoom sayısı ne kadar büyükse o kadar yakından bir görüntü oluşur. center ile latlng değişkeni ile verilen koordinatların haritanın ortasında olması sağlanıyor. mapTypeControl ile haritanın Map, Satellite, Hybrid, Terrain gibi seçimin yapılabilmesi için menünün gözükmesi ve DROPDOWN_MENU ile bunun aşağı açılan bir menü ile görüntülenmesi sağlanıyor. Varsayılan olarak ROADMAP seçilmiş, yani bu MapType olarak Map'e karşılık geliyor. Alternatif olarak SATELLITE, HYBRID, TERRAIN yapılabilir.
Bundan sonra map değişkenimizi oluşturabiliriz.
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
}
</script>
Bundan sonra <body> içinde haritanın gözükmesini istediğimiz uygun bir yere <div> tagı yaratacağız.
<body onload="initialize()">
<div id="map_canvas" style="width:800px; height:500px"></div>
</body>
Elbette benim durumumda <body> tagına doğrudan erişimim yoktu (üst sayfası olan bir ASP kodu). Bu sebeple alt sayfadan body tagına erişmek için script kullandım. En basit yöntemle yukarıda initialize() fonksiyonunun tanımlamasının yapıldığı satırı şu şekilde değiştirdim:
window.onload=function initialize() {
Bu, body tagının onload özelliğini değiştirmeye eşdeğer.
Sıra geldi TBMM'nin logosunu yerleştirmeye. Google'da yaptığım resim aramasında şu TBMM logosunu buldum.
Benim oluşturduğum bu logonun kendiliğinden bir gölgesi var. Referans aldığım kaynakta gölgeyi ayrı bir resim olarak oluşturarak iki resmi haritaya eklemiş. Ben böyle yapmadım. Ayrıca logoya biraz şeffaflık kattım. Ardından şu satırlarla logoyu haritaya ekledim.
var TBMMLogo = new google.maps.MarkerImage('tbmm_logo.png',
new google.maps.Size(100,100),
new google.maps.Point(0,0),
new google.maps.Point(87,165)
);
var TBMMPos = new google.maps.LatLng(39.909450, 32.849715);
var TBMMMarker = new google.maps.Marker({
position: TBMMPos,
map: map,
icon: TBMMLogo,
title:"Türkiye Büyük Millet Meclisi"
});
Yukarıdaki script, resmin HTML dosyası ile aynı klasörde olduğunu varsayıyor. Buradaki
Size(244,167) resmimizin boyutlarını, Point'ler ise referans noktasını ve resmin haritada verdiğimiz koordinata denk gelecek pikselin koordinatlarını gösteriyor ki, bu da balonun en alt noktasına denk geliyor.
Eğer benim gibi üst sayfası olan bir ASP değil de düz bir HTML sayfası yaratıyor olsaydınız kodunuz şu şekilde olabilirdi:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(39.909450, 32.849715);
var settings = {
zoom: 13,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var TBMMPos = new google.maps.LatLng(39.909450, 32.849715);
var TBMMLogo = new google.maps.MarkerImage('tbmm_logo.png',
new google.maps.Size(244,167),
new google.maps.Point(0,0),
new google.maps.Point(87,165)
);
var TBMMMarker = new google.maps.Marker({
position: TBMMPos,
map: map,
icon: TBMMLogo,
title:"Türkiye Büyük Millet Meclisi"
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:800px; height:500px"></div>
</body>
</html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(39.909450, 32.849715);
var settings = {
zoom: 13,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var TBMMPos = new google.maps.LatLng(39.909450, 32.849715);
var TBMMLogo = new google.maps.MarkerImage('tbmm_logo.png',
new google.maps.Size(244,167),
new google.maps.Point(0,0),
new google.maps.Point(87,165)
);
var TBMMMarker = new google.maps.Marker({
position: TBMMPos,
map: map,
icon: TBMMLogo,
title:"Türkiye Büyük Millet Meclisi"
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:800px; height:500px"></div>
</body>
</html>
ve sayfanın görünüşü şu şekilde olurdu:
Referans : http://stiern.com/tutorials/adding-custom-google-maps-to-your-website#download
Hiç yorum yok:
Yorum Gönder