021-28423015
021-28423015

نقشه گوگل در 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> 
مشاهده مثال

 


نظر شما

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

نظرات

اصف احمدی سلام تشکر مطالب مفیدی بودبنده می خواهم در وب سایتم موقعیت جغرافیایی خود را در توسط گوگل مپ نشان بدهم. گوگل مپ را هم اظافه کردم اما وقتی صفحه را می بینم موقعیت آمریکا را نشان می دهم نه موقعیت خودم را چگونه می توانم این مشکل را حل کنم؟
مهدی احدی با سلام جناب احمدیممکن است سیستم شما دارای gps نیست در این صورت در گوشی خود تست کنید ببینید که مکان رو درست نشون میده یا خیر

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

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

مقالات مرتبط