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

ایجاد نقشه گوگل پایه

این مثال یک نقشه گوگل با مرکز انگلستان لندن ایجاد می‌کند:

مثال

<!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 این ویژگی تعیین می‌کند موقعیت مرکزی نقشه (از طریق کوordinate‌های عرض و طول).

zoom این ویژگی تعیین می‌کند سطح بزرگنمایی نقشه (لطفاً نقشه را بزرگنمایی کنید).

لطفاً به این خط نگاه کنید:

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

این یکی از پارامترهای ارسالی را استفاده می‌کند (mapProp) یک نقشه جدید در داخل علامت <div> با id="googleMap" ایجاد کنید.

نقشه‌های چندگانه

در اینجا مثالی از چهار نوع مختلف نقشه‌های گوگل آورده شده است:

مثال

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 رایگان Google

Google به وب‌سایت‌ها اجازه می‌دهد تا هر روزه数千 بار از هر API Google رایگان استفاده کنند.

لطفاً به این لینک زیر مراجعه کنید تا بفهمید چگونه API key را دریافت کنید:

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

Google Maps نیاز دارد که در هنگام بارگذاری API در key در پارامترها این کلید API را پیدا کنید:

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