اساس‌های نقشه‌های گوگل

بنیادی گوگل نقشہ قائم کرنا

یہ مثال برطانیہ لندن کا مرکز والا گوگل نقشہ قائم کرتا ہے:

مثال

<!DOCTYPE html>
<html>
<body>
<h1>میری پہلی گوگل نقشہ</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
  center: new google.maps.LatLng(51.508742,-0.120850),
  زوم:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>

آگے، ہم سلسلے میں اس مثال کو جائزو میں لائیں گے。

نقشہ کا کانٹینر اور اہمیت

نقشہ کو آپریشن کرنے کیلئے ایک HTML عنصر کی ضرورت ہے:

<div id="googleMap" style="width:100%;height:400px"></div>

اور نقشہ کی اہمیت بھی ترتیب دیں。

ایک فونکشن قائم کریں تا نقشہ کی امتیازیات ترتیب دیں

function myMap() {
var mapProp = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    زوم:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

mapProp متغیر نقشات کی ویژگیوں کا تعریف کرتی ہے。

مرکز ویژگی نقشات کی مرکز مقام کو طے کرتی ہے (استفاده میں طول و عرض کا استعمال کیا جاتا ہے)。

زوم ویژگی کا تعریف نقشات کی زوم سطح (نقشات کو زوم کریئے)。

ایک بار دیکھیئے:

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

یہ وسیع پیمانے سے پارامتروں کو استعمال کرتا ہے (mapProp) id="googleMap" کا <div> عناصر میں ایک نئی نقشات کی تشکیل کریں.

کثیر نقشات

درج ذیل مثال میں چار مختلف نوعیت کی نقشات کی نقشات کا تعریف کیا گیا ہے:

مثال

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);

مفت گوجل API کلید

گوجل یہ اجازت دیتا ہے کہ ویب سائٹز کسی بھی گوجل API کو مفت میں بغیر محدودیت کی تعداد میں بلاک کریں، روزانہ ہزاروں بار.

ایک بار آپ کا لینک دیکھیئے، تاکہ آپ کو معلوم ہو کہ کس طرح API کلید حاصل کیا جائے:

https://developers.google.com/maps/documentation/javascript/get-api-key

گوجل ماپ کی لوج کے دوران کلید پارامتر میں اس API کلید کو پائیدار:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>