Google Maps - Class 1 Introduction
Assalam o aliekum dosto kesay hain aap sab
aaj may aap sab k lye laya hu Google Maps k tutorials.
Google Maps: google ki bnai hui ek API(Application programming Interface) hy jo humy humary web pages may google k graphic maps use karny deti hy. esko intemaal karty huye hum apny web pages may google maps ko use kar sakty hain, us may pins or destinations wghera bta sakty hain, street view bhi use akr sakty hain.
sab say zaruri bat ye hy k aap ka internet connected hona chahiye warna ye map show nahi hota.
Dosto aaj kal almost har client ki ye demand hy k unki website pe unky business ki koi na koi destination mention zaroor ki jaye or esky sath he google maps ki bhi demand ki jati hy taaky webpage visit karny wala ksi bhi jagah ka aram say andaza lga k wahn pohnch jaye. En tutorials may main Google maps ko details say explain karu ga. umeed hy aap sab ko pasand ain gay.
Sab say pehly hum ek general web page bna lety hain.... uski file extension ya to aap .html rakh sakty hain ya .php..... may .php ko zehan may rakhty huye bnaa rha hu kyu k jb website web pe jani hy to behtar hy hum php may he kam akrein.
<!DOCTYPE html>
<html>
<head>
<title>google maps</title>
</head>
<body>
<div id="googleMap" style="height:500px;width:600px;margin:0 auto;"></div>
</body>
</html>
es may main ny ek div bnai hy jiska id hy googleMap, ye wo div hy jis may humara map show hoga. Dusri bat uski height 500 pixels or width 600px hy aap jitni marzi rakh laein aapki marzi hy, phr margin say may div ko screen k mid may ly aya hu. agay barhty hain.
Ab aap head may title k baad javascript ka ye code lga dein dono he.
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap "),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
dosto ye javascript ki files hain jo hum jahn apny webpage may jis may hum ny map show karwana hy include kar rahy hain... yahn may ye bta du k body may end pe production level pe scripts ko dala jata hy mgar yahn aap ko ye kaam head may he karna paray ga warna map show to ho jata hy mgar kabhi kabhi bht nakhray karta hy... ye code lganay k baad aapky webpage may google ka map show ho jaye ga or uska center hoga London.. ye len pura code:
<!DOCTYPE html>
<html>
<head>
<title>google maps</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap "),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="height:500px;width:600px;margin:0 auto;"></div>
</body>
</html>
Ab hum es java script k code thora explain kar deta hu k es may actually kia ho rha hy kyu k asal may esi ko edit kar k hum apni destination es may set karein gay.
1-yahn javascript files lagi hain, pehli file to google say maps ki javascript file ko include kar leti hy yani k maps ki sari library. agar aap es url pe jo src may di hui hy jaein to aaapky samny google map ki javascript file open ho jye ge screen per text k tor per... usko copy kar k aap new js file bna k bhi include kar sakty hain mgar yehi taria behtar hy kyu k google es may fixing karta rehta hy.
2-dusri script darasal es library ko use karty huye ek map generate karti phr phr div may chala jata hy. yahn initialize k function may hum ek object bnatay hain. es may ek javascript object bnaya jata hy jo different key/value pairs leta hy, jesa k:
us jagah ka longitude latitude jahn ka map dikhana hy
zoom level
pointer/marker/pin
dialog box yani pin k uper jo text ata hy k ye jagah ka naam ye hy
map ki type kia hogi, road map ya sattlelite....
3-Phr google map API ko use kar k ek new map object bnaya jata hy or usay humari div may insert kar dia jata hy uska id use karty huye.
dosto ye technology AJAX ko use karti hy or sara kaam google ki wo library khud kar deti hy jo hum ny include ki hy, bas hum bas es function may jo hum ny object bnaya hy us may key/value pairs may wo information dete hain jo hum ny map may generate karni hy jesay jagah konsi hogi, marker etc or map show ho jata hy.
sab say zaruri bat ye hy k aap ka internet connected hona chahiye warna ye map show nahi hota.
Dosto esky sath he humara pehla lecture to complete ho gya hy dusray lecture may hum apni location ko es map may show karwaein gay.
Reply With Quote
Bookmarks