Xarita asoslari
Oddiy Google xaritasini yaratish
Ushbu misol markazi London (Angliya) bo‘lgan Google xaritasini yaratadi:
Misol
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</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>
Ushbu sahifaning qolgan qismida yuqoridagi misol bosqichma-bosqich tushuntiriladi.
Xarita konteyneri va o‘lchami
Xaritani joylashtirish uchun HTML element kerak:
<div id="googleMap" style="width:100%;height:400px"></div>
Shuningdek, xarita o‘lchamini ham belgilang.
Xarita xususiyatlarini o‘rnatish uchun funksiya yaratish
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 o‘zgaruvchisi xarita xususiyatlarini belgilaydi.
center xususiyati xarita markazi qayerda bo‘lishini (kenglik va uzunlik koordinatalari yordamida) belgilaydi.
zoom xususiyati xaritaning masshtab darajasini belgilaydi (masshtab darajasini o‘zgartirib, tajriba qilib ko‘ring).
Ushbu qator: var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); uzatilgan parametrlardan (mapProp) foydalanib, id="googleMap" bo‘lgan <div> elementi ichida yangi xarita yaratadi.
Bir nechta xarita
Quyidagi misolda turli xarita turlariga ega to‘rtta xarita belgilanadi:
Misol
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);
Bepul Google API kaliti
Google veb-saytlarga istalgan Google API’ni kuniga minglab marta bepul chaqirish imkonini beradi.
API kalitini qanday olishni bilish uchun https://developers.google.com/maps/documentation/javascript/get-api-key sahifasiga o‘ting.
Google Maps API yuklanayotganda API kalitini key parametridan topishni kutadi:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!