اپنے ویب پیج پر Google Map کیسے شامل کریں

01 کے 05

اپنی سائٹ کے لئے Google Maps API کلید حاصل کریں

اپنی ویب سائٹ پر Google نقشہ شامل کرنے کا بہترین طریقہ Google Maps API استعمال کرنا ہے. اور Google کی سفارش کی جاتی ہے کہ نقشے کو استعمال کرنے کے لئے آپ API کو حاصل کریں.

آپ کو Google Maps API v3 استعمال کرنے کیلئے API کی کلید حاصل کرنے کی ضرورت نہیں ہے، لیکن یہ بہت مفید ہے کیونکہ اس سے آپ کو آپ کے استعمال کی نگرانی اور اضافی رسائی کے لئے ادائیگی کرنے میں مدد ملتی ہے. گوگل نقشہ جات API v3 فی سیکنڈ فی درخواست ایک فی گھنٹہ درخواست ہے جس میں فی دن کی زیادہ سے زیادہ 25،000 درخواستیں ہیں. اگر آپ کے صفحات ان کی حد سے تجاوز کرتے ہیں تو آپ کو مزید حاصل کرنے کے لئے بلنگ کو فعال کرنے کی ضرورت ہوگی.

گوگل نقشہ API کی کلید کیسے حاصل کریں

1. اپنے Google اکاؤنٹ کا استعمال کرتے ہوئے Google میں لاگ ان کریں.
2. ڈویلپرز کنسول پر جائیں
3. فہرست کے ذریعہ سکرال کریں اور Google Maps API v3 تلاش کریں، پھر اسے تبدیل کرنے کیلئے "آف" بٹن پر کلک کریں.
4. شرائط سے پڑھیں اور متفق ہوں.
5. API کنسول پر جائیں اور بائیں ہاتھ کے مینو سے "API رسائی" کو منتخب کریں
6. "سادہ API رسائی" سیکشن میں "نئی سرور کی کلید بنائیں ..." بٹن پر کلک کریں.
7. اپنے ویب سرور کے آئی پی ایڈریس درج کریں. یہ آئی پی ہے جہاں آپ کے نقشے کی درخواستیں آئیں گی. اگر آپ اپنا آئی پی ایڈریس نہیں جانتے تو آپ اسے دیکھ سکتے ہیں.
8. "API کلیدی:" لائن پر متن کاپی کریں (اس عنوان کو شامل نہیں). یہ آپ کے نقشوں کے لئے آپ کی API کلید ہے.

02 کی 05

آپ کے ایڈریس کو تبدیل کرنے کے لئے

اپنے ویب صفحات پر Google Maps استعمال کرنے کے لئے، آپ کی جگہ کے لئے طول و عرض اور طول و عرض کی ضرورت ہے. آپ ان GPS کو حاصل کرسکتے ہیں یا آپ جیوکوڈ.س جیسے آپ کو بتانے کے لئے آن لائن آلے کا استعمال کرسکتے ہیں.

1. Geocoder.us پر جائیں اور تلاش کے خانے میں آپ کے ایڈریس میں ٹائپ کریں.
2. طول و عرض کے لئے پہلی نمبر کاپی کریں (سامنے ایک خط کے بغیر) اور متن ٹیکسٹ میں پیسٹ کریں. آپ کو ڈگری (º) اشارے کی ضرورت نہیں ہے.
3. لمبی حد تک (پہلے ایک خط کے بغیر) کے لئے پہلی نمبر کاپی کریں اور اسے اپنی ٹیکسٹ فائل میں چسپاں کریں.

آپ کی طول و عرض اور طول و عرض اس طرح کچھ نظر آئے گی:

40.756076
-73.990838

Geocoder.us صرف امریکی پتے کے لئے کام کرتا ہے، اگر آپ کسی اور ملک میں ہم آہنگی حاصل کرنے کی ضرورت ہے، تو آپ کو اپنے علاقے میں اسی طرح کے آلے کی تلاش کرنا چاہئے.

03 کے 05

آپ کے ویب پیج میں نقشہ شامل کرنا

سب سے پہلے، نقشہ سکرپٹ میں شامل کریں

آپ کے دستاویز کا

اپنے ویب صفحہ کو کھولیں اور اپنے دستاویز کے سربراہ پر مندرجہ ذیل شامل کریں.

نمایاں کردہ حصے میں طول و عرض اور طول و عرض کی تعداد میں آپ کو دو قدموں میں لکھا گیا.

دوسرا، آپ کے صفحے پر نقشہ عنصر شامل کریں

ایک بار جب آپ کے تمام سکرپٹ کے عناصر کو آپ کے دستاویز کے سربراہ میں شامل ہونے کے بعد، آپ کو اپنے نقشے کو صفحے پر تعین کرنا ہوگا. آپ id = "map-canvas" خصوصیت کے ساتھ ایک ڈیو عنصر شامل کرکے آپ کرتے ہیں. میں آپ کو اس ڈویژن کو اپنی چوڑائی اور اونچائی سے بھی مشورہ دیتا ہوں جو آپ کے صفحے پر فٹ ہوجائے گا.

آخر میں، اپ لوڈ اور ٹیسٹ

کرنے کی آخری بات آپ کا صفحہ اپ لوڈ کر رہا ہے اور آپ کا نقشہ دکھایا جاتا ہے. یہاں صفحے پر Google نقشہ کا ایک مثال ہے. نوٹ، اس طرح کے بارے میں جس سائٹ کے بارے میں CMS کام کرتا ہے، آپ کو نقشہ لینے کے لئے ایک لنک پر کلک کرنا ہوگا. یہ آپ کے صفحے پر معاملہ نہیں ہوگا.

اگر آپ کا نقشہ نہیں دکھایا جاتا ہے تو، اس کی ابتدائی خصوصیات کے ساتھ ابتدا کرنے کی کوشش کریں:

اوورلوڈ = "ابتداء ()" >

آپ کے نقشے لوڈ نہیں کر رہے ہیں تو یہ چیک کرنے کے لئے دیگر چیزیں شامل ہیں:

• آپ کے جاوا اسکرپٹ میں ٹائپس کی تلاش کریں، کیس سمیت. جاوا اسکرپٹ کیس حساس ہے.
• اس بات کو یقینی بنائیں کہ آپ کے پاس زوم اور مرکز کے اختیارات مقرر ہیں.
• اس بات کو یقینی بنائیں کہ آپ کے ڈی ویو عنصر صفحے پر صحیح شناخت کے ساتھ ہے.
• اس بات کو یقینی بنائیں کہ آپ کے DIV عنصر کی اونچائی ہے.

04 کے 05

اپنے نقشے میں ایک مارکر شامل کریں

لیکن اگر آپ کے محل وقوع کا کوئی نقشہ اچھا نہیں ہے تو کوئی مارکر ایسے لوگوں سے کہہ رہا ہے جہاں انہیں جانا چاہیئے؟

ایک معیاری Google نقشے کو سرخ مارکر شامل کرنے کے لئے مندرجہ بالا آپ کے سکرپٹ میں مندر نقشہ درج ذیل میں شامل کریں ... ... لائن:

var myLatlng = new google.maps.LatLng ( طول و عرض، طول و عرض )؛
var مارکر = 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 ({
پوزیشن: لاطینی 2 ،
نقشہ: نقشہ،
عنوان: " ایپل کمپیوٹر "
})؛

مارکر کے ساتھ Google نقشے کا ایک مثال یہ ہے. نوٹ، اس طرح کے بارے میں جس سائٹ کے بارے میں CMS کام کرتا ہے، آپ کو نقشہ لینے کے لئے ایک لنک پر کلک کرنا ہوگا. یہ آپ کے صفحے پر معاملہ نہیں ہوگا.

05 کے 05

دوسرا (یا زیادہ) آپ کے صفحے پر نقشہ شامل کریں

اگر آپ نے اپنے مثال کے طور پر Google نقشے کے صفحے کو دیکھا ہے تو آپ کو یہ نوٹس مل جائے گا کہ میرے صفحے پر ظاہر کردہ ایک سے زائد نقشہ موجود ہیں. یہ کرنا بہت آسان ہے. یہاں کیسے ہے

1. اس ٹیوٹوریل کے مرحلے 2 میں سیکھا جیسا کہ آپ ڈسپلے کرنا چاہتے ہیں تمام نقشوں کی طول و عرض اور طول و عرض حاصل کریں.
2. جیسا کہ ہم نے اس سبق کے مرحلے 3 میں سیکھا پہلے نقشہ داخل کریں. اگر آپ چاہتے ہیں کہ نقشہ مارکر ہو تو، مارکر کو 4 مرحلہ میں شامل کریں.
3. دوسرے نقشے کے لئے، آپ کو اپنے ابتدائی () سکرپٹ میں 3 نئی لائنیں شامل کرنے کی ضرورت ہوگی.
   var latlng2 = new google.maps.LatLng ( دوسرا نفاذ )؛
   var myOptions2 = {زوم: 18، مرکز: latlng2، نقشہ ٹائپ آئی ڈی: google.maps.MapTypeId.ROADMAP}؛
   var نقشہ 2 = 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. جب آپ کا صفحہ بوجھ آتا ہے تو، دو نقشے دکھائے جائیں گے

یہاں دو گوگل نقشے کے ساتھ ایک صفحہ کا کوڈ ہے: