Makale: Şubeler Harita Üstünde Görünsün

Birkaç gün önce, Şubeleri Harita Üstünde İşaretlemek konusuna kısa bir giriş yapmış ve klasik şube arama mantığını taşlamıştım.

Taşladığımız diğer bir konu da bilenlerin bildiklerini paylaşma konusundaki isteksizliği veya belgelendirme konusu idi.

Bu sıkıntıyı OpenOffice/LibreOffice konusunda 2 yıldır yaşarken Tübitak tarafından hazırlanmış kitaplar ve çevirimiçi yardım içerikleri sayesinde aşıldı.

/* Emeği geçen herkese tekrar sonsuz teşekkürler

Konumuza geri dönersek; Bir franchise zincirinin şubelerini listelememiz gerekiyordu ve bunu harita üstünde yapmamız gerekiyordu.

Örnek olarak sunulan uygulamayı inceleyip ilgili firmayla iletişime geçtik.

Merhaba Sabri Bey, Bizim xyz isimli bir uygulamamız var. Bu uygulama web sitenize eklenebiliyor. Ücreti, kiralama yöntemiyle senelik 3000 TL, satın alma yöntemiyle ise 12.500 TL.

Teklifini işitince alternatif yöntemlere doğru kanalize olduk…

Sonuçta ortaya şu güzel görüntü çıktı.

Peki nasıl yaptık?

Sır değil, tamamen özgür ve ücretsiz araçlarla. Birkaç yazı okuduk, biraz çay içtik, biraz kod yazdık.

Öncelikli olarak;

Sitemizdeki Body etiketini şöyle değiştirdik.

< body onload= "initialize()" >

Sonrasında gerekli çağırma işlemlerini yaptık



Util.js dosyası şunları içeriyor

/**
* Returns an XMLHttp instance to use for asynchronous
* downloading. This method will never throw an exception, but will
* return NULL if the browser does not support XmlHttp for any reason.
* @return {XMLHttpRequest|Null}
*/
function createXmlHttpRequest()
{
	try
	{
		if (typeof ActiveXObject != 'undefined')
		{
			return new ActiveXObject('Microsoft.XMLHTTP');
		}
		else if (window["XMLHttpRequest"])
		{
			return new XMLHttpRequest();
		}
	}
	catch (e)
	{
		changeStatus(e);
	}
	return null;
};

/**
* This functions wraps XMLHttpRequest open/send function.
* It lets you specify a URL and will call the callback if
* it gets a status code of 200.
* @param {String} url The URL to retrieve
* @param {Function} callback The function to call once retrieved.
*/
function downloadUrl(url, callback)
{
	var status = -1;
	var request = createXmlHttpRequest();
	if (!request)
	{
		return false;
	}

	request.onreadystatechange = function()
	{
		if (request.readyState == 4)
		{
			try
			{
				status = request.status;
			}
			catch (e)
			{
				// Usually indicates request timed out in FF.
			}
			if (status == 200)
			{
				callback(request.responseXML, request.status);
				request.onreadystatechange = function() {};
			}
		}
	}
	request.open('GET', url, true);
	try
	{
		request.send(null);
	}
	catch (e)
	{
		changeStatus(e);
	}
};

/**
* Parses the given XML string and returns the parsed document in a
* DOM data structure. This function will return an empty DOM node if
* XML parsing is not supported in this browser.
* @param {string} str XML string.
* @return {Element|Document} DOM.
*/
function xmlParse(str)
{
	if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined')
	{
		var doc = new ActiveXObject('Microsoft.XMLDOM');
		doc.loadXML(str);
		return doc;
	}
	if (typeof DOMParser != 'undefined')
	{
		return (new DOMParser()).parseFromString(str, 'text/xml');
	}
	return createElement('div', null);
}

/**
* Appends a JavaScript file to the page.
* @param {string} url
*/
function downloadScript(url)
{
	var script = document.createElement('script');
	script.src = url;
	document.body.appendChild(script);
}

Sonrasında biraz Js kodu eklememiz gerekiyor sayfamıza


	

Bu kodlarda birkaç nokta önemli, lakin en önemlisi subelerdata.xml kısmı; burada şube bilgilerimizi çekiyoruz.

Bunun dışında şu kısımlar çeşitli ayarlar içeriyor: başlangıç kordinatları, zoom seviyesi, harita tipi vs, sonra kurcalarsınız.

		var myLatlng = new google.maps.LatLng(20,10);
		var myOptions =
		{
			zoom: 2,
			center: myLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			mapTypeControl: true,
			panControl: false,
			zoomControl: false,
			scaleControl: false,
			streetViewControl: false
		}

Geldik XML dosyamıza. XML dosyamız proje için özelleştirilmiş durumda. İhtiyacınız olmayacak kısımları createMarker jscript fonksiyonunu →

createMarker(name, latlng, adres, adres2,url)

← ve XML dosyasını kurcalayarak kaldırabilirsiniz.

< ?xml version="1.0" encoding="UTF-8"?>

	
	
	

Geriye katmanımızı yerleştirmek kaldı

Çalışırsa çalışır, çalışmazsa neden çalışmadığını bana sormayın 🙂

Son ipucum, XML dosyasındaki koordinatları nasıl bulacağınız konusunda olsun

		lat="40.219581" 
		lng="29.061592" 

Şu araç İşinize yarayacaktır.

Çalışan uygulama: http://mrkumpir.elluga.com/subeler.php adresindedir; bakıp inceleyebilirsiniz.

/*Malezya, GeorgeTown’dan selamlar, sevgiler…

Not: Çok ilginç işler; test site yayından kaldırıldığı için demo siteye erişemiyoruz. Proje kabul edilmediği için de gerçek siteye erişemiyoruz 🙂 Tasarım başkalarına ait olduğu için demo site olarak biryerlerde de yayınlayamıyorum 🙂

2 yorum

  1. hocam
    anlattığınız bilgileri tamamıyle uygulamama rağmen herhangi bir sonuç alamadım.. ayrıca verdiğiniz linkteki ornekte çalışmamaktadır.. daha doğrusu sayfa açılmamaktadır. İlgili projeyi yükleyerek tüm dosyaları indirmemiz için bir link verebilirmisiniz..

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir