021-20483015

نقشه گوگل در 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 ارائه شده است. یک اسکریپت برای اشاره به API Google Maps با یک عملکرد myMap اضافه کنید:

api گوگل
 <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script> 
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط