نقشه گوگل html
نقشه گوگل html یا Google Maps چیست ؟
آموزش گرافیک html درس سوم
نقشه گوگل به شما اجازه می دهد تا نقشه را در صفحه وب خود نمایش دهید.
یک صفحه وب پایه
برای نشان دادن نحوه اضافه کردن یک نقشه گوگل به یک صفحه وب، ما از یک صفحه HTML ساده استفاده خواهیم کرد:
مثال:
[php]
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map">My map will go here</div>
</body>
<html>
[/php]
اندازه نقشه را تنظیم کنید
اندازه نقشه را تنظیم کنید:
مثال:
[php]
<div id="map" style="width:400px;height:400px">
[/php]
برای تنظیم خواص نقشه، یک تابع ایجاد کنید
در این مثال یک نقشه گوگل محور در لندن، انگلستان تعریف می کند:
مثال:
[php]
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
[/php]
مثال توضیح داده شده
متغیر mapOptions ویژگی های نقشه را مشخص می کند.
ویژگی center مشخص می کند که کدام نقشه مرکزی است (با استفاده از مختصات عرض جغرافیایی و طول جغرافیایی).
ویژگی zoom سطح زوم برای نقشه را مشخص می کند (سعی کنید با سطح زوم آزمایش کنید).
ویژگی mapTypeId نوع نقشه را برای نمایش نشان می دهد. انواع نقشه زیر پشتیبانی می شوند: ROADMAP، SATELLITE، HYBRID، و TERRAIN.
خط: var map = new google.maps.Map (document.getElementById (“map”)، mapOptions)؛ با استفاده از پارامترهایی که منتقل می شوند، یک نقشه جدید درون عنصر <div> با id = “map” ایجاد می شود (mapOptions).
API Google Maps را اضافه کنید
سرانجام نقشه را در صفحه نشان دهید
قابلیت نقشه توسط یک کتابخانه جاوا اسکریپت در Google ارائه شده است. یک اسکریپت برای اشاره به API Google Maps برای فراخوانی توابع myMap اضافه کنید:
مثال:
[php]
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
[/php]
10 کاری که گوگل مپ می تواند برای شما انجام دهد:
مسیرهای حمل و نقل را دریافت کنید
ایجاد یک نقشه
اندازه گیری فاصله و ETA
مخلوط کردن اطلاعات نقشه ها
پیدا کردن مکان شما
تنظیم مسیرها
گرفتن اطلاعات ترافیکی
دستورالعمل های کلامی
اشتراک گذاری موقعیت مکانی
ویرایش موقعیت مکانی
دیدگاهتان را بنویسید