Skip to main content

මොකක්ද මේ Google Map API කියන්නේ?


ඔන්න මේ දවස් ටිකේ පොඩි වැඩකට අත ගහුවා 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) එක පෙන්වයි.
ඔබට මෙයට Zoom Function එක්කර ගැනීමට උවමනානම් java Script function එක මේ ආකාරයට වෙනස්කර ගන්න

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>
<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

Comments

Unknown said…
Thanx! This is great!

Popular posts from this blog

How to enable proxy service security in ESB 4.9.0?

Security is  one of the major concern when we developing API base integrations or application developments. WSO2 supports WS Security , WS-Policy and WS-Security Policy specifications. These specifications define a behavior model for web services. Proxy service security requirements are different from each others. WSO2 ESB providing pre-define commonly used twenty security scenarios to choose based on the security requirements. This functionality is provided by the security management feature which is bundled by default in service management feature in ESB. This configuration can be done via the web console until ESB 4.8.1 release, but this has been removed from the ESB 4.9.0. Even though this feature isn't provided by the ESB web console itself same functionality can be achieved by the new WSO2 Dev Studio . WSO2 always motivate to use dev studio to prepare required artifacts to the ESB rather than the web console. Better way to explain this scenario is by example. Following...

How to preserving HTTP headers in WSO2 ESB 4.9.0 ?

Preserving HTTP headers are important when executing backend services via applications/middleware. This is because most of the time certain important headers are removed or modified by the applications/middleware which run the communication. The previous version of our WSO2 ESB, version 4.8.1, only supported “ server ” and “ user agent ” header fields to preserve with, but with the new ESB 4.9.0, we’ve introduced a new new property ( http.headers.preserve ) for the passthru ( repository/conf/ passthru-http.properties ) and Nhttp( repository/conf/ nhttp.properties ) transporters to preserve more HTTP headers. Passthru transporter – support header fields               Location Keep-Alive Content-Length Content-Type Date Server User-Agent Host Nhttp transport – support headers Server User-Agent Date You can specify header fields which should be preserved in a comma-separated list, as shown below. http.headers.p...

How to monitor the Thread CPU usage in the WSO2 Products?

1. Download JConsole topthreads Plugin. 2. Add following entries to the PRODUCT_HOME/bin/wso2server.sh     -Dcom.sun.management.jmxremote \     -Dcom.sun.management.jmxremote.port=PORT \     -Dcom.sun.management.jmxremote.ssl=false \     -Dcom.sun.management.jmxremote.authenticate=false \     -Djava.rmi.server.hostname=IP_ADDRESS \ Define your IP_ADDRESS address and PORT (port should be not used anywhere in that instance) 3. Run the JConsole using following command.     jconsole -pluginpath PATH_TO_JAR/topthreads-1.1.jar 4. Copy "JMXServerManager JMX Service URL" from the wso2carbon logs after restart the Wso2 Server (Eg:- service:jmx:rmi://localhost:11111/jndi/rmi://localhost:9999/jmxrmi) to the Remote process with the username and password. 5. Under Top Threads tab you can monitor the thread CPU usage.