نقشه گوگل
نقشه گوگل با کد جاسازی و اسکریپت های API استفاده می شود
برای اطلاعات بیشتر لطفا از گوگل کلود دیدن کنید.
نقشه با جاسازی
برای استفاده از نقشه با کد جاسازی، باید به سایت نقشه گوگل بروید. مکان خود را تنظیم کنید و اسکریپت جاسازی را برای نمایش موقعیت مکانی خود بگیرید.
مثال کد
<div class="card w-100"> <iframe src="https://www.google.com/maps/[Your Location]" class="google-map border-0" allowfullscreen="" loading="lazy"></iframe> </div>
نقشه با API
برای استفاده از نقشه با اسکریپت API جاوااسکریپت باید به پلتفرم نقشه های گوگل بروید. اسکریپت API خود را تنظیم کنید و کد جاوااسکریپت را برای نمایش موقعیت مکانی خود اضافه کنید.
استفاده از دستورالعمل
از آنجایی که از نقشه با API در سیستم ما استفاده می کنید، باید مراحل دیگری را مانند زیر انجام دهید.
اسکریپت نقشه ها
شما می توانید به سادگی <script> را به تگ <body> در هر صفحه به عنوان مرجع زیر اضافه کنید.
<!-- اسکریپت API نقشه -->
<script src="https://maps.google.com/maps/api/js?key=[API key]"></script>
اسکریپت API جاوااسکریپت
برای ویرایش نقشه، باید فایل /js/example-map.js را ویرایش کنید. برای ویرایش می توانید دستورالعمل زیر را دنبال کنید.
// وقتی بارگذاری پنجره تمام شد، نقشه گوگل خود را در زیر ایجاد کنید
google.maps.event.addDomListener(window, 'load', init);
// از تابع استفاده کنید
// می خواهید نقشه از چه اندازه ای بزرگ نمایی شود (همیشه الزامی است)
zoom: 14,
// طول و عرض جغرافیایی برای مرکز نقشه (همیشه الزامی است)
center: new google.maps.LatLng(35.700938745179165, 51.337440268313735), // تهران
// عنصر HTML DOM را دریافت کنید که شامل نقشه شما است
var mapElement = document.getElementById('gMap');
// نشانگرها مکان ها را روی نقشه شناسایی می کنند
// عنصر را می توان کشید
draggable: true,
// با کلیک بر روی نشانگر، انیمیشن بین یک پرش (BOUNCE) تغییر وضعیت می دهد
animation: google.maps.Animation.DROP,
// هنگام ایجاد شی نشانگر می توانید از یک LatLng به جای شی google.maps.LatLng استفاده کنید.
// به عنوان مثال، موقعیت آن به عنوان یک شی google.maps.LatLng در دسترس خواهد بود.
position: new google.maps.LatLng(35.700938745179165, 51.337440268313735),
// می توانید از لینک تصویر در این کوتیشن استفاده کنید
icon: '' // null = default icon
