ඔන්න මේ දවස් ටිකේ පොඩි වැඩකට අත ගහුවා Google Map API එක්ක.ඇත්තටම වෙනස්ම අත්දැකීමක් ඒක.මොකද සාමානයෙන් මම කරන්නෙ මුදුකාංග වල back end එක්ක වැඩ කරන එක.ඉතින් ඒක ටිකක් කම්මැලි හිතෙන වැඩක්.නමුත් මේ Google Map API එක්ක කරපු වැඩේ ටිකක් වෙනස් මොකද මේක Front end වැඩක් හන්ද.මම හිතන්නේ ඔයාලා හැමොම දැකල ඇති Google Map එක.ඉතින් මේ සේවාව ලබාදෙන්නෙ Google සමාගම.Google සමාගම මේ සේවාව ලබාදෙනවා පමනක් නෙමෙයි ඒක, අනිත් පුද්ගලයින්ටත් එම සේවාව තමන්ගේ වෙබ් පිටුවට හෝ තමන් කැමති ඔනැම තැනකට පාවිචික් කිරීමට අවස්ථාව ලබාදී තිබෙනවා.
අපි බලමු කොහොමද අපිට ඔන විදියට Google Map පාවිචිකරන්නෙ සහ මොනවද තියන Facility කියලා.ඔන්න ඔතනදි තමයි Google Map API කරලියට එන්නෙ.Google Map API මගින් එය පාවිචිකරන්නාට Google Map හි ඇති Function පාවිචියට ගැනීමට මාර්ගයක් සකසා දෙනවා.එමගින් ඉතා පහසුවෙන් අපට වුවමනා ආකාරයට එය හසුරවා ගත හැක.එය Java script යොදාගෙන සංවර්දනය කර ඇත.එම නිසා ඉතා පහසුවෙන් මෙය Web තාක්ෂණයත් සමග යොදා ගත හැක.
මෙය ඉතා සරල නිදසුනක් මගින් මේ ආකාරයට එය යොදාගන්නා ආකාරය පැහැදිලිකල හැක.මෙම නිදසුන මගින් මම පෙන්වීමට උත්සහ කරන්නේ.Google Map එකක් එහි ඇති Zooming facility සමගින් ඔබගේ පිටුවකට යොදාගන්නා ආකාරයයි.මේ සදහා ඔබට Java Script පිලිබදව යම් දැනුමක් තිබීම අවශයයි.මුලින්ම ඒසදහා එකක් මෙ ආකාරයට සරල Java Script එකක් ලියා ගත යුතුයි.
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
- මුලින්ම if (GBrowserIsCompatible()) මගින් Web browser එක මේසදහා දක්වන සහය පිලිබදව සොයා බලයි.
- var map = new GMap2(document.getElementById("map_canvas")) මගින් පෙන්වීමට් වුවමනා පසුබිම සකස්යි.
- map.setCenter(new GLatLng(37.4419, -122.1419), 13);මගින් Map එම එක තුල පෙන්වන ස්ථානයේ මැද((37.4419, -122.1419)) සහ Zoom level(13) එක පෙන්වයි.
function initialize() { if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map_canvas")) map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl());
} }
ඔබට එය මේ ආකාරයට ඔබගේ වෙබ් පිටුවට දමාගත හැක
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API Sampletitle>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=<
<script type="text/javascript">
function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")) map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); } }
script>
head>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
<div id="map_canvas" style="width: 500px; height: 300px">div>
body>
html>
ඔබට මෙසදහා වැඩිදුර විස්තර උවමනානමි.http://code.google.com/apis/ajax/playground/?exp=maps#map_simple
