ستاسو د ویب پاڼې لپاره د گوگل نقشې څنګه کولی شئ

01 of 05

د ستاسو د ویب پاڼې لپاره د Google Maps API کلید ترلاسه کړئ

ستاسو د ویب پاڼې لپاره د ګوګل نقشه زیاتولو غوره لاره د Google Maps Maps API استعمالول دي. او ګوګل سپارښتنه کوي چې تاسو د نقشه کارولو لپاره د API کیلي ترلاسه کړئ.

تاسو اړتیا نلرئ چې د Google Maps API v3 کارولو لپاره د API کلید ترلاسه کړئ، مګر دا خورا ګټور دی ځکه چې دا تاسو ته د تاسو د ګټې نظارت کولو او اضافي لاسرسي لپاره پیسو ورکولو ته اجازه درکوي. د ګوګل نقشه API v3 د هرې فیصدي کارونکي 1 غوښتنه د ورځې هره ورځ د 25،000 غوښتنو غوښتنه کوي. که ستاسو پاڼې د دې حدودو څخه ډکې وي، نو تاسو به د دې لپاره چې نور ترلاسه کولو لپاره د بل کولو توان ولرئ.

څنګه د Google Maps API کیلي ترلاسه کړئ

1. ستاسو د ګوګل ګڼون په کارولو سره ګوګل ته ننوتل.
2. د پراختیا کونکي کنسول ته لاړ شئ
3. د لیست له لارې سکولول او د Google Maps API v3 ومومئ، بیا یې "Turn" تڼۍ په کلیک وکړئ کلیک وکړئ.
4. د شرایطو لوستل او موافق.
5. د APIs کنسول ته لاړ شئ او د بائیں لاس مینو څخه "API Access" انتخاب کړئ
6. په "ساده API Access" برخه کې، "د نوي سرور کلید ..." تڼۍ باندې کلیک وکړئ.
7. د خپل ویب سایټ IP پته ولیکئ. دا IP دی چې ستاسو نقشې غوښتنه به یې له کوم ځای څخه راځي. که تاسو خپل IP پته نه پوهیږئ، تاسو کوالی شئ دا وګورئ.
8. د "API key:" لین کې متن کاپي کړئ (د دې سرلیک په شمول نه.). دا ستاسو د نخشو لپاره ستاسو د API کلیدی دی.

02 of 05

همغږي ته ستاسو پته بدل کړئ

په خپلو ویب پاڼو کې د ګوګل نقشه کارولو لپاره، تاسو اړتیا لرئ چې د موقعیت لپاره طول او عرضه لرئ. تاسو کولی شئ دا د GPS څخه ترلاسه کړئ یا تاسو کولی شئ د جیوکوډر.us په څیر د آنلاین وسایلو څخه کار واخلی ترڅو تاسو ته ووایاست.

1. Geocoder.us ته لاړ شئ او د پلټنې په خوند کې ستاسو پته ولیکئ.
2. د طریقت لپاره لومړی نمبر کاپي کړئ (مخکې په لیک کې پرته) او د متن دوتنې ته یې وټاکئ. تاسو د درجې (º) شاخص ته اړتیا نلري.
3. د لمړیتوب لپاره لمړی نمبر کاپي کړئ (بیا په مخ کې پرته له خط څخه) او خپل متن متن کې یې وخورئ.

ستاسو عرضې او اوږد مهاله حالت به داسې شي لکه:

40.756076
-73.990838

Geocoder.us یوازې د متحده ایالاتو د پته لپاره کار کوي، که تاسو اړتیا لرئ چې په بل هیواد کې همغږي ترلاسه کړئ، تاسو باید په خپل سیمه کې ورته ورته وسیله وپلټئ.

03 of 05

ستاسو د ویب پاڼې ته نقشه زیاتېدل

لومړی، د نقشې لپ اره ته

ستاسو د لاسوند

خپل ویب پاڼه پرانیزئ او د خپلې سند د سر سر ته لاندې اضافه کړئ.

په نښه شوي برخه طریقت او طول الته ته هغه شمیره چې تاسو یې په دویم پړاو کې لیکلي دي بدل کړئ.

دوهم، خپل مخ ته د نقشه عنصر زیات کړئ

یوځل چې تاسو د متن ټول عناصر لرئ ستاسو د سند په سر کې اضافه شوي، تاسو باید په نقشه کې خپل نقشه وضع کړئ. تاسو دا د id = "map-canvas" خصوصیت سره د DIV عنصر زیاتولو له لارې ترسره کوئ. زه سپارښتنه کوم چې تاسو دا ډېچ د اندازې او لوړوالی سره ډک کړئ کوم چې ستاسو په پاڼه کې به راشي:

په پای کې، اپیل او ازموینه

وروستۍ شیان د خپل پاڼې اپلوډ کول دي او معاینه کوي چې ستاسو نقشه ښکاره کوي. دلته په پاڼه کې د ګوګل نخشه یوه بیلګه ده. یادونه، د دې لارې چې د.com.com CMS کار کوي د لاری له مخې، تاسو باید د نقشې د لیدلو لپاره یو لینک باندې کلیک وکړئ. دا به ستاسو په پاڼه کې قضیه نه وي.

که ستاسو نقشه ښکاره نشي، نو د BODY خاصیت سره یې پیل کول هڅه وکړئ:

آنلاین = "ابتکار ()" >

نور شیان چی چک کړی که ستاسو نقشه نده پورته کولی په لاندی ډول دی:

• په جاوا سکریپټ کې د ټایپوونو لټون، په شمول د قضیې. جاوا سکریپټس د کیس حساس دی
• ډاډ ترلاسه کړئ چې تاسو د زوم او مرکز انتخابونه لرئ.
• ډاډ ترلاسه کړئ چې ستاسو د DIV عنصر په صحیح پاڼه سره په پاڼه کې دی.
• ډاډ ترلاسه کړئ چې ستاسو د DIV عنصر لوړ وي.

04 of 05

خپل نقشه ته د مارکر اضافه کړئ

مګر ستاسو د ځای نقشه څه شی ده، که چیری نشی نشی کوالی خلک وپیژني چیرته چی دوی باید ځي؟

د یو معیاري ګوګل نقشه سرخ مارکر اضافه کولو لپاره لاندې لینډی لاندینې لاندې د نقشه نقشه = ... لینډ اضافه کړئ:

var myLatlng = new google.maps.LatLng ( طرابلس، طولال )؛
var marker = new google.maps.Marker ({
پوسټ: MyLatlng،
نقشه: نقشه،
عنوان: " پخوانۍ about.com مرکزونه "
})؛

په نښه شوي متن خپل طول طول او عرضه ته بدلون ورکړئ او هغه عنوان چې تاسو یې غواړئ هغه وخت وټاکئ کله چې خلک د مارکر څخه ډډه وکړي.

تاسو کولی شئ د پاڼې په څیر ډیری مارکرونه اضافه کړئ، یوازې د نویو همغږیو او عنوانونو سره نوې متغیرات شامل کړئ، مګر که چېرې نقشه د ټولو مارکرانو د ښودلو لپاره خورا کوچنی وي، دوی به هغه وخت ونه ښودل شي چې د لوستونکي زوم ډډه وکړي.

var latlng 2 = new google.maps.LatLng ( 37.3316591، -122.0301778 )؛
var myMarker 2 = new google.maps.Marker ({
موقف: د latlng 2 ،
نقشه: نقشه،
عنوان: " ایپل کمپیوټر "
})؛

دلته د ګوګل نقشه یوه نښه ده چې مارکر یې لري. یادونه، د دې لارې چې د.com.com CMS کار کوي د لاری له مخې، تاسو باید د نقشې د لیدلو لپاره یو لینک باندې کلیک وکړئ. دا به ستاسو په پاڼه کې قضیه نه وي.

05 of 05

دویمه برخه (یا نور) نقشه ستاسو د پاڼې لپاره

که تاسو زما د بیلګې په توګه د ګوګل نقشه وګورئ نو تاسو به وګورئ چې زما په پاڼه کې یو له هغه څخه ډیر نقش لري. دا ډیره اسانه ده. دلته دی.

1. د ټولو هغو نقشو طرابلس او طول السته راوړو چې تاسو یې غواړئ ښکاره کړئ لکه څنګه چې موږ په دې مرحله کې زده کړه کړې.
2. لومړی نقشه داخل کړئ لکه څنګه چې موږ د دې درسي مرحلې په دریم پړاو کې زده کړل. که تاسو غواړئ چې نقشه مارکر ولري، نو مارکر د څلورم ګام په توګه اضافه کړئ.
3. د دویمې نقشه لپاره، تاسو به د خپل ابتکار (3) سکرپٹ کې 3 نوي سیسټمونه اضافه کړئ.
   var latlng2 = new google.maps.LatLng ( دوهم همغږي )؛
   var myOptions2 = {zoom: 18، مرکز: latlng2، نقشه ټایپ: google.maps.MapTypeId.ROADMAP}؛
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2")، myOptions2)؛
4. که تاسو غواړی په نوی نقشه کې مارکر وغواړئ، دوهم دویمه نښه یې په دویم همغږی او دوهم نقش کې اشاره کړئ:
   var myMarker2 = new google.maps.Marker ({موقف: latlng2 ، نقشه: نقشه 2 ، عنوان: " ستاسو د مارکر سرلیک "})؛
5. بیا دویمه برخه اضافه کړئ

   چیرې چې تاسو دوهم نقش غواړئ. او ډاډه یې کړئ چې دا یو ID ورکړي "map_canvas_2" ID.

6. کله چې ستاسو د پاڼې بوټي، دوه نقشه به وښيي

دلته دلته د دوو ګوګل نقشې سره د یوې پاڼې کود دی: