طراحی وب

نقشه گوگل html

نقشه گوگل html  یا Google Maps چیست ؟

آموزش گرافیک  html  درس سوم

نقشه گوگل به شما اجازه می دهد تا نقشه را در صفحه وب خود نمایش دهید.

نقشه گوگل html
نقشه گوگل html

یک صفحه وب پایه

برای نشان دادن نحوه اضافه کردن یک نقشه گوگل به یک صفحه وب، ما از یک صفحه HTML ساده استفاده خواهیم کرد:

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="map">My map will go here</div>

</body>
<html>

اندازه نقشه را تنظیم کنید

اندازه نقشه را تنظیم کنید:

مثال:

 <div id="map" style="width:400px;height:400px">

برای تنظیم خواص نقشه، یک تابع ایجاد کنید

در این مثال یک نقشه گوگل محور در لندن، انگلستان تعریف می کند:

مثال:

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);
} 

مثال توضیح داده شده

متغیر 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 اضافه کنید:

مثال:

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

۱۰ کاری که گوگل مپ می تواند برای شما انجام دهد:

     مسیرهای حمل و نقل را دریافت کنید
ایجاد یک نقشه
اندازه گیری فاصله و ETA
مخلوط کردن اطلاعات نقشه ها
پیدا کردن مکان شما
تنظیم مسیرها
گرفتن اطلاعات ترافیکی
دستورالعمل های کلامی
اشتراک گذاری موقعیت مکانی
ویرایش موقعیت مکانی

برچسب ها

دیدگاه یا سوال خود را با ما درمیان بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره رایگان کسب و کار اینترنتی

10 جلسه به همراه فایل صوتی و ویدیویی
همین حالا شروع کنید
تا امروز بیش از 4000 نفر در این دوره شرکت کرده‌اند
بستن پیام
هفته‌نامه بهترین ایده

به جمع 30,000 مشترک ما بپیوندید!

اشتراک رایگان
همین حالا یک ویدیو آموزشی دریافت کنید
بستن