Google Maps එක්ක පොඩි පොඩි වැඩ.

Posted by පහන් on ඔක්තෝබර් 16, 2010 Leave a comment (8) Go to comments

මාස දෙකකට පස්සෙ විතර තමයි ආයෙ බ්ලොග් පොස්ට් එකක් ලියන්න හිතුනේ. සති දෙකතුනක්ම ගෙදරට වෙලා හිටියත් බ්ලොග් එකට නං අත තියන්නවත් හිතුනෙ නෑ. අවුරුදු දෙකකට ආසන්න කාලයක් ආසාවෙන් කරගෙන ආපු බ්ලොග් ලිවිල්ල දැන් ටිකක් එපා වේගෙන එන්නෙ. මොනව උනත් බ්ලොග් කියවිල්ල නම් තාම එපා වෙලා නැහැ. විශේෂයෙන් මේ දවස්වල නැගලා යන One | Zero | Zero සහ තෙලාස්ට්‍රෝ ගොඩක් වෙලාවට කියවනවා.

හරි මාතෘකාවට බහිමු , google maps එක්ක වැඩ කරන්නෙ කොහොමද කියලා. අපේ බ්ලොග් පෝස්ට් එකකට / වෙබ් අඩවියක ස්තානයක් ගැන එහෙම විස්තර කරගන්න ඕන උනොත් google maps පාවිච්චි කරන්න පුළුවන්. මේකට google maps API කිහිපයක්ම තිබෙනවා අපේ අවශ්‍යතාවය අනුව එකක් තෝරාගන්න පුළුවනි. මේක image එකක් විදියට විතරක් දානවා නම් Google Static Maps API එකෙන් මේ විදියට ලේසියෙන්ම කරන්න පුළුවන්.

උ‍දා:- කොළඹ නගරය මැප් එකක ලකුණු කරලා පෙන්වන්න ඕන කියලා හිතමු. කරන්න තියෙන්නෙ img tag එකක් ලියන්නයි.

<img src="http://maps.google.com/maps/api/staticmap?center=colombo,sri+lanka&zoom=14&size=400x400&sensor=false" alt="" />

ඔය center කියන එකෙන් අපිට පෙන්වන්න ඕන ස්තානයත්, size කියන එකෙන් image එකේ දිග පළලත්, zoom කියන එකෙන් විශාලයත් දැක්වෙනවා. sensor කියන එකනම් අපේ වැඩේට අදාල නැති එකක්. (device එකකින් location එකක් ගන්නවා නම් මේක true කරන්න ඕන කියල තමයි මම අහල තියෙන්නෙ.)

මේක හරියට කලොත් මේවගේ එකක් ඒවි

හරි දැන් ටිකක් සංකීර්ණ එකක් කරමු. Google Maps JavaScript API V3 එක්ක javascript වලින්. මේ ක්‍රමයේදි address එකක් දෙනවට වැඩිය අක්ෂාංශ දේශාංශ පාවිච්චි කරනවා නම් ලේසියි. (address එකක්ම mark කරන්න ඕන නම් Geocoding API එක පාවිච්චි කරන්න වේවි. ) මෙන්න උදාහරණයක්.
<div id="map_canvas" style="width:500px; height:500px;"></div>

<script type="text/javascript"

src="http://maps.google.com/maps/api/js?sensor=false">

</script>

<script type="text/javascript">

window.onload=initialize;

function initialize() {

var latlng = new google.maps.LatLng(6.929068172376261, 79.84820365905762);


var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>

වැඩේ හරි නම් මේ විදියට පෙනේවි.(wordpress කාරයා මගේ javascript code එක කමෙන්ට් කරන නිසා මේක වෙන තැනක දැම්මේ.)

පොඩි පොඩි සළකුණු හෙම දාලා මැප් එකේ මාක් කරන්න ඕන නම් Overlays කියලා තියෙන ටික බලන්න. Events මඟින් අපිට මැප් එකේ එක ක්ලික් කලාම message box එකක් වගේ එන්න හදන්න පුළුවනි. උත්සහ කරලා බලන්න .

Get Shareaholic

Tipsflash, google, javascript, maps, maps api, tutorials

← OLPC ගැන වචනයක්.

සිංහල බ්ලොග්කරණයේ වසර දෙකක්. →

8 Comments.

දයියා ඔක්තෝබර් 16, 2010 දින ප.ව. 10:31 ට

බ්ලොග් ලිවීමට කම්මැලි වෙන්න එපා. ඉඩ ලද විටක ලියන්න අපි කියවනවා.

පිළිතුරු සැපයීම
Niranjan ඔක්තෝබර් 16, 2010 දින ප.ව. 11:00 ට

blog liweema hemihita unath kara gena yanna. malli oyaa nisayi maat blog ekak karanna patan gaththe.
mamath ida thiyena welaawata thamaa blog posts liyanne..
eda wagema adath mama me blog eka ida lada witaka kiyawanawaa..
keep it up!!

(malli mage blog eke nama daala comment eka wadinne nee; oyaage me post eke.)

Regards,
http://www.niraarts.blogspot.com
Niranjan

පිළිතුරු සැපයීම
bunny ඔක්තෝබර් 17, 2010 දින පෙ.ව. 11:14 ට

ශා…මේක නම් හරි වැදගත්…නියමයී..
මාත් මේක උත්සාහා කරලා බැලුවා මෙන්න මේකේ
http://www.w3schools.com/js/tryit.asp?filename=tryjs_switch
හික් හික් හික්

පිළිතුරු සැපයීම
- පහන් අප්‍රේල් 14, 2011 දින ප.ව. 12:58 ට
  
  http://jsfiddle.net/ මේකත් සිරා
  
  පිළිතුරු සැපයීම
Dar[K] ඔක්තෝබර් 17, 2010 දින ප.ව. 12:38 ට

එල ආයි ඇවිල්ලා නේද? නියම පොස්ට් එක ! google chrome extension වැඩේට මොකො වෙන්නේ ? ඒකත් කරගෙන යන්න

පිළිතුරු සැපයීම
කණිෂ්ක ඔක්තෝබර් 17, 2010 දින ප.ව. 7:17 ට

මුල ටික නං තේරුනා. අග ටික පිස්සු වගේ

පිළිතුරු සැපයීම
කැළණිතිස්ස ඔක්තෝබර් 27, 2010 දින ප.ව. 7:16 ට

මම google maps ගැන හොය හොය හිටියා විතරයි.. මගෙත් ප්‍රොජෙක්ට් එකකට google maps ගැන වැඩි විස්තර ටිකක් ඕන.. උදව් කරන්න පුලුවන්ද? email එක හොයාගන්න පුලුවන් කියලා හිතනවා

පිළිතුරු සැපයීම
- පහන් ඔක්තෝබර් 27, 2010 දින ප.ව. 7:18 ට
  
  pahanඇට්pahans.com
  
  පිළිතුරු සැපයීම

Pahan's Diary| පහන්ගේ දින සටහන්