பூமியில் நாம் தற்போது இருக்கும் இடத்தைக் கண்டறிந்து வெளிக்காட்ட HTML5 பயன்படுத்தும் ஒரு் விஷயமே Geolocation ஆகும். உதாரணத்துக்கு நாம் சுற்றுலா சென்று கொண்டிருக்கும் போது, தற்போது எங்குள்ளோம் என்பதைத் தெரிந்து கொள்ள நமது அலைபேசியில் உள்ள MAP-ஐப் பயன்படுத்துவோம் அல்லவா? அதே போன்று ஒரு MAP-ஐ நாம் உருவாக்கப் போகும் application-லும் கொண்டு வர Geolocation பயன்படுகிறது. இது அட்சரேகை தீர்க்கரேகை ஆகியவற்றின் துணை கொண்டு நாம் இருக்கும் இடத்தைக் கண்டறிந்து அதனை MAP போன்ற ஒரு் வடிவில் வெளிப்படுத்தும். இதற்கான code பின்வருமாறு.

 

File: Geolocation.htm

<!DOCTYPE html>

<html>

<head>

<script>

function showPosition(position) {

var xy = position.coords.latitude + “,” + position.coords.longitude;

var img_url = “http://maps.googleapis.com/maps/api/staticmap?center=”

+xy+”&zoom=14&size=400×300&sensor=false”;

document.getElementById(“mapholder”).innerHTML = “<img src='”+img_url+”‘>”;

}

</script>

</head>

<body>

<button onclick=”navigator.geolocation.getCurrentPosition(showPosition)”>Click It to get your position</button>

<div id=”mapholder”></div>

</body>

</html>

 

முதலில் body tag-க்குள் உள்ள <button> tag ஒரு் button-ஐ உருவாக்குவதற்கும், அதன் மீது சொடுக்கும்போது என்ன நிகழ வேண்டும் எனும் மதிப்பு அதன் onclick எனும் attribute-ன் மதிப்பாகவும் கொடுக்கப்பட்டுள்ளது. Onclick- ன் மதிப்பாக உள்ள getCurrentPosition() எனும் method, coords.latitude, coords.longitude எனும் மதிப்புகளை showPosition எனும் function-க்குள் அனுப்பி அதன் தொடர்ச்சியான வேலைகளைச் செய்கிறது.

body tag-க்குள் அடுத்து உள்ள <div> tag, ‘mapholder’ எனும் ஒரு் divition-ஐ உருவாக்கியுள்ளது.

இப்போது showPosition()-க்குள் என்ன நிகழ்கிறது என்பதைப் பார்க்கலாம். இந்த function பெற்றுக்கொண்ட latitude, longitude மதிப்புகளை xy எனும் variable- ல் செலுத்தி, பின்னர் அத்தனை Google Map-உடன் இணைத்துள்ளது. அதாவது img_url எனும் variable- ன் மதிப்பாக google map-ன் முகவரியைக் கொடுத்து, அதனுடன் xy இணைக்கப்பட்டுள்ளது.

கடைசியாக நாம் உருவாக்கிய mapholder எனும் பகுதியை getElementById() மூலமாக எடுத்து, அதன் தொடர்ச்சியாக அளிக்கப்படும் innerHTML-ன் மதிப்பாக img_url variable-ஐ அளிப்பதன் மூலம் நாம் இருக்கும் இடம் Map-ல் வெளிப்படுத்தப்பட்டுள்ளது.

 

இது error handling ஏதும் இல்லாத ஒரு் அடிப்படையான program ஆகும்.

License

Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

எளிய தமிழில் HTML Copyright © 2015 by து. நித்யா is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book