ورود به کارتابل مشتریان وب مهراز
نقشه گوگل در 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 ارائه شده است. یک اسکریپت برای اشاره به API Google Maps با یک عملکرد myMap اضافه کنید:
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
نظرات