ایس وی جی تیچر

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

یہ مثال برطانیہ لندن کے اطراف کا گوگل خارچہ قائم کرتا ہے:

ਉਦਾਹਰਣ

<!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),
  zoom: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),
    zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

mapProp ਇਹ ਵਰਗਾਂ ਨੂੰ ਮੈਪ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਨ.

center ਇਹ ਪ੍ਰਾਪਰਟੀ ਮੈਪ ਦੇ ਕੇਂਦਰ ਸਥਾਨ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ (ਲਾਂਗਤ ਅਤੇ ਅਕਸ਼ਾਂਸ਼ ਸਥਾਨ ਵਰਤਕੇ).

zoom ਇਹ ਪ੍ਰਾਪਰਟੀ ਮੈਪ ਦੀ ਜ਼ੂਮ ਲੈਵਲ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ (ਮੈਪ ਨੂੰ ਜ਼ੂਮ ਕਰੋ ਅਨੁਭਵ ਕਰੋ).

ਇਸ ਪਲਾਸੇ ਨੂੰ ਦੇਖੋ:

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 Key

ਗੂਗਲ ਵੈੱਬਸਾਈਟਾਂ ਨੂੰ ਗੂਗਲ ਐਪੀ ਆਈ ਕੀ ਮੁਫਤ ਵਰਤਣ ਦੀ ਇਜਾਜਤ ਦਿੰਦੇ ਹਨ, ਹਰ ਦਿਨ ਹਜ਼ਾਰਾਂ ਵਾਰ ਤੋਂ ਵੱਧ.

ਹੇਠ ਲਿਖੇ ਲਿੰਕ ਨੂੰ ਦੇਖੋ ਕਿ ਕਿਵੇਂ API key ਹਾਸਲ ਕਰੋ:

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

ਗੂਗਲ ਮੈਪਸ ਨੂੰ API ਲੋਡ ਕਰਨ ਦੇ ਸਮੇਂ key ਪੈਰਾਮੀਟਰਾਂ ਵਿੱਚ ਇਹ API ਕੀ ਮਿਲਦਾ ਹੈ:

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