در آموزش قبل توضیحات مختصری از مقدمه کار با نقشه گوگل را به عنوان استفاده از نقشه گوگل در سایت بخش اول توضیح دادیم.
در ادامه سلسله آموزش های حرفه ای طراحی وب سایت و طراحی قالب وردپرس آنفایو قصد داریم مثالی ساده از درج یک نقشه گوگل در سایت را مورد بررسی قرار دهیم.
تکه کدی که در ادامه خواهید دید نمونه ساده ای از نقشه گوگل است که سیدنی را نمایش میدهد.
<pre><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=<var>API_KEY</var>&sensor=<var>SET_TO_TRUE_OR_FALSE</var>">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html></pre>
مشاهده دمو
در همین مثال ساده هم چند نکته کلیدی و مهم وجود دارد که در زیر آمده است:
۱- نقشه با استفاده از <!DOCTYPE html> بصورت HTML5 درج شده است.
۲- توابع API جاوا اسکریپت نقشه گوگل با استفاده از تگ script درج شده است.
۳- برای نگهداری نقشه از یک div به نام “map-canvas” استفاده شده است.
۴- برای استفاده از تعدادی خصوصیات نقشه از یک شیء جاوااسکریپت استفاده شده است.
۵- همچنین یک شیء “map” نیز برای نمایش نقشه و خصوصیات آن بکار گرفته شده است.
۶- همچنین برای لود شدن نقشه از رویدادی (مانند شنود) استفاده شده است که بلافاصله پس از اتمام لود صفحه نقشه نمایش داده میشود.
این موارد را در زیر بصورت کاملا واضح توضیح خواهیم داد.
ست کردن ابزار نقشه گوگل از نوع HTML5
ما پیشنهاد میکنیم ابزار نقشه گوگل خود را با doctype تعریف کنید. در این مثال ما نیز نقشه گوگل را از نوع HTML5 تعریف کردیم.
تکه کد مورد نظر را میتوانید در ادامه مشاهده کنید:
<pre><!DOCTYPE html></pre>
بیشتر مرورگر های جاری محتوای تعریف شده با DOCTYPE در حالت استاندارد را رندر خواهند کرد. این بدین معنی است که نقشه گوگل شما دارای ویژگی cross browser است و در اکثر مرورگرهای رایج بصورت درست نمایش داده خواهد شد. علاوه بر این برخی خصوصیاتی که توسط CSS بطور ناگهانی تغییر حالت میدهند در حالت استاندارد نا معتبر هستند به خصوص المان هایی که بر اساس درصد مقدار دهی شده اند یا خصوصیات خود را بصورت درصدی از والد خود دریافت نموده اند. اگر هر کدام از آن المان ها در دریافت خصوصیاتشان با مشکل مواجه شوند با عرض و ارتفاع ۰ پیکسل مقدار دهی خواهند شد.
به همین دلیل ما بعضی خصوصیات را توسط تگ <style> تعیین کرده ایم.
<pre><style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style></pre>
CSS هایی که تعریف شده اند ، DIV والد نقشه را (که با map-canvas نامگذاری شده است) مجبور به دریافت عرض و ارتفاع ۱۰۰ درصد از تگ HTML و BODY خواهد کرد.
بارگذاری Api نقشه گوگل
<pre><html> <head> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<var>API_KEY</var>&sensor=<var>SET_TO_TRUE_OR_FALSE</var>"> </script></pre>
آدرسی که در تگ <script> وجود دارد مکان فایل های API جاوا اسکریپت است که تمام نماد ها و المان هایی که شما برای نقشه گوگل نیاز دارید را بارگیری خواهد کرد.
مسلما این تگ اسکریپت در کد های شما الزامی خواهد بود.
پارامتر key حاوی کلید API نقشه گوگل شما است که در آموزش قبل بطور کامل توضیح دادیم . برای توضیحات بیشتر استفاده از نقشه گوگل در سایت بخش اول را مشاهده نمایید.
نکته قابل توجه این است که این کلید با کلید هایی که در ورژن ۲ API نقشه گوگل استفاده میشده است متفاوت است و شما باید آن را از بخش کنسول API های گوگل دریافت کنید.
پارامتر sensor را نیز در آدرس API گوگل مشاهده میکنید این پارامتر به جایی اشاره میکند که نقشه گوگل از آن به عنوان یک سنسور (مانند یک دستگاه مکان یاب GPS) برای یافتن مکان های کاربران استفاده میکند.
ما در اینجا از این پارامتر به عنوان یک متغیر که مقادیر true یا false را دریافت میکند استفاده کردیم.
HTTPS یا HTTP
<pre><script src="https://maps.googleapis.com/maps/api/js?key=<var>API_KEY</var>&sensor=<var>SET_TO_TRUE_OR_FALSE</var>" type="text/javascript"></script></pre>
اگر وب سایت شما یا ابزاری که در آن نقشه گوگل را درج میکنید بر روی HTTPS است شما نیز باید نقشه گوگل را از HTTPS دریافت کنید.
بارگیری نقشه گوگل از HTTPS برای وب سایت هایی که از SSL استفاده میکنند واجب و ضروری است ولی اگر وب سایت شما از HTTP استفاده میکند استفاده از نقشه گوگل بر روی HTTP و یا HTTPS کاملا اختیاری خواهد بود منتها گوگل پیشنهاد میکند که از HTTPS استفاده کنید تا بتوانید اطلاعاتی نظیر مکان کاربران را نیز دریافت کنید.
در ادامه به مباحث تخصصی تری از آموزش های کار با نقشه گوگل در وب سایت خواهیم پرداخت.
با آموزش های سلسله مراتبی طراحی وب سایت و طراحی قالب وردپرس آنفایو همراه باشید.
