ساخت Google Map

ساخت Google Map

چگونه یک نقشه Google را به یک صفحه وب اضافه کنید ؟

اولین نقشه گوگل

با یک صفحه وب ساده شروع کنید.
یک عنصر <div> که می خواهید نقشه نمایش داده شود را اضافه کنید:

ساخت Google Map
 <!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:100%;height:400px;"> 
مشاهده مثال

یک تابع JavaScript برای نمایش نقشه ایجاد کنید:

جاوا اسکریپت در نقشه گوگل
function myMap() {
    var mapCanvas = document.getElementById("map");
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.2),
        zoom: 10
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
} 
مشاهده مثال

متغیر mapCanvas عنصر HTML نقشه است.
متغیر mapOptions خواص نقشه را مشخص می کند.
ویژگی center  مشخص می کند که کدام نقشه مرکزی است (با استفاده از مختصات عرض جغرافیایی و طول جغرافیایی).
ویژگی Zoom سطح زوم برای نقشه را مشخص می کند (سعی کنید با سطح زوم آزمایش کنید).
 object google.maps.Map با mapCanvas و mapOptions به عنوان پارامتر ایجاد می شود.

 Google API را اضافه کنید

قابلیت نقشه توسط یک کتابخانه جاوا اسکریپت در Google ارائه شده است

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

 

نظر شما

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

مقالات و دروس

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

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

مقالات مرتبط