۲۰
مهر

جلسه ۵۱ : کار با Google Maps در html

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در آخرین مطالب ارائه شده در ادامه آموزشهای کامل html ، پس از آشنایی با مبحث html5 و ساختار کد نویسی این نسخه ، و همچنین ارائه مطالبی در مورد عناصر جدید در html5، و در مبحث گرافیک در html5 شدیم. و اشاره ای داشتیم به موضوع کار با تگ SVG در html ،اکنون در ادامه بحث گرافیک در html ، در این بخش قصد داریم به موضوع کار با Google Maps در html یا کار با گوگل مپ در html ، بپردازیم.

دسترسی به نقشه Google Maps در html ، با استفاده از تگ های html و کدهای جاوااسکریپت امکان پذیر است.

google-map

کار با Google Maps در html

Google Maps ، به شما اجازه می دهد تا نقشه ها را در وب سایت خود نمایش دهید.

صفحه وب پایه برای نمایش Google Maps

برای نشان دادن نحوه اضافه کردن یک نقشه گوگل به یک صفحه وب، از یک صفحه ساده HTML استفاده خواهیم کرد:

مثال :

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="map">My map will go here</div>

</body>
<html>

<!DOCTYPE html>

<html>

<body>

<h1>My First Google Map</h1>

</body>

<html>

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

مثال:

مثال :

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

1	<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);
}

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 نیز نوع نمایش نقشه را تعیین می کند.

ایجاد نقشه های چندگانه

ایجاد ۴ نقشه با انواع مختلف:

مثال :

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);

var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);

var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);

var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);

تنظیم API برای نمایش نقشه گوگل

سرانجام نقشه در صحفحه شما نمایش داده می شود.

قابلیت نمایش نقشه در وب ، توسط یک کتابخانه جاوااسکریپت در گوگل ارائه شده است. اکنون باید API نمایش نقشه را نیز اضافه کنید:

مثال :

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

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

QR: جلسه ۵۱ : کار با Google Maps در html

به اشتراک بگذارید

Google Maps در html ,آشنایی با HTML5 ,آموزش گرافیک در HTML ,رسم گرافیک در html ,نقشه گوگل در html ,نمایش نقشه گوگل در وب سایت

دیدگاه کاربران

تعداد دیدگاه : 1

mehdi
بهمن ۲۸, ۱۳۹۷
ممنون از توضیحاتتون. یک سوال داشتم. اگه بخواهیم موقعیت مکان فعلی را ببینیم چه باید کرد؟
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۵۱ : کار با Google Maps در html

مقدمه

کار با Google Maps در html

صفحه وب پایه برای نمایش Google Maps

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

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

بررسی کد مثال بالا

ایجاد نقشه های چندگانه

تنظیم API برای نمایش نقشه گوگل

لیست مطالب دوره

آموزش HTML

فرم در HTML

HTML5

گرافیک در HTML

چند رسانه ای در html

APIs در HTML

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ