google map

نقشه های گوگل در HTML

سرویس Google Map به شما این امکان را می دهد تا نقشه ها را در صفحه وب خود به نمایش در بیاورید.

صفحه وب پایه برای نمایش نقشه های گوگل

برای نمایش نقشه های گوگل داخل صفحه ابتدا از یک صفحه پایه شروع می کنیم:

<!DOCTYPE html>
<html>
<body>

<h1>اولین نقشه</h1>

<div id="map">نقشه در این قسمت قرار می گیرد.</div>

</body>
<html>
 


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

از طریق کد زیر اندازه نقشه را مشخص می نماییم:

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


ایجاد تابعی جهت تنظیم مشخصات نقشه

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

function myMap() {
    var mapOptions = {
        center: new google.maps.LatLng(35.7, 51.4),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
 


در خصوص مثال فوق داریم:

mapOptions: برای تعریف مشخصات نقشه به کار می رود.

Center : با استفاده از مقادیر طول و عرض جغرافیایی (latitude و longitude) مشخص می کند کجا مرکز نمایش نقشه باشد.

zoom: میزان بزرگنمایی نقشه را تعیین می کند.

mapTypeId: نوع نقشه نمایش داده شده را مشخص می کند. در گوگل این مقادیر پشتیبانی می شود: ROADMAP، SATELLITE، HYBRID وTERRAIN.

کدvar map=new google.maps.Map(document.getElementById(“map“), mapOptions) یک نقشه را درون عنصر <div> که با شناسه id=map تعریف شده با مشخصاتی که در بالا توضیح دادیم ایجاد می کند.

افزودن API نقشه گوگل به صفحه

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

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


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

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