مشاهده نسخه کامل
: elham1989
29-09-2014, 14:10
چگونه می توان نقشه تعاملی با استفاده از API Google Maps را در طراحی وب سایت خود ایجاد نماییم! وجود نقشه در برخی سایت ها، فاکتور ضروری تلقی می شود و موجب جلب نظر کاربران سایت می شود که در نتیجه امر سئو سایت را تحت تاثیر خود قرا خواهد داد پیش از شروع، شما نیازمند کلید خاص API از گوگل می باشید. API واسط برنامه کاربری است و به منظور تعامل بین کامپوننت های یک نرم افزار استفاده می شوند و می تواند توصیفی از روش انجام یک وظیفه باشد. با ورود به لینک [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] و ورود به حساب گوگل خود می توانید در لیست خدمات Google Maps API v3 را بیابید و به صورت رایگان کلید API را تهیه نمایید.حال شما آماده هستید که یک نقشه گوگل ساده را در طراحی سایت خود ایجاد و درج نمایید.کد زیر مثالی از نقشه شهر لندن می باشد.
<!DOCTYPE html>
<html>
<head>
<script src="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
اولین تگ <script>مثال بالا، دربردارنده کلید Google Maps API می باشد. شما می بایست کلید Google Maps API خود را درج نمایید.
متغییر sensor نشان دهنده این مهم است که برنامه کاربری از سنسور( مانند GPS) استفاده می کند یا خیر.
<script src="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]"></script>
در مثال زیر پس از بارگذاری کامل صفحه سایت گوگل مپ بارگذاری می شود:
function loadScript()
{
var script = document.createElement("script");
script.src = "[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}
window.on-load = loadScript;
حال می خواهیم به بررسی متغییرهای موجود در کد بپردازیم. قطعه کد یزر را در نظر بگیرید.
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
متغییر center تعیین کننده این مورد است که کدام نقطه را مرکز قرار دهیم. متغییر Zoom درجه بزرگنماییی نقشه را مشخص می نماید. MapTypeId نوع نمایش مپ را تعیین می نماید. حال می بایست محل درج کد نقشه را در طراحی سایت خود مشخص نماییم.قطعه کد زیر بیان گر این مطلب است.
<div id="googleMap" style="width:500px;height:380px;"></div>
طراحی سایت ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
<!DOCTYPE html>
<html>
<head>
<script src="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
اولین تگ <script>مثال بالا، دربردارنده کلید Google Maps API می باشد. شما می بایست کلید Google Maps API خود را درج نمایید.
متغییر sensor نشان دهنده این مهم است که برنامه کاربری از سنسور( مانند GPS) استفاده می کند یا خیر.
<script src="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]"></script>
در مثال زیر پس از بارگذاری کامل صفحه سایت گوگل مپ بارگذاری می شود:
function loadScript()
{
var script = document.createElement("script");
script.src = "[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}
window.on-load = loadScript;
حال می خواهیم به بررسی متغییرهای موجود در کد بپردازیم. قطعه کد یزر را در نظر بگیرید.
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
متغییر center تعیین کننده این مورد است که کدام نقطه را مرکز قرار دهیم. متغییر Zoom درجه بزرگنماییی نقشه را مشخص می نماید. MapTypeId نوع نمایش مپ را تعیین می نماید. حال می بایست محل درج کد نقشه را در طراحی سایت خود مشخص نماییم.قطعه کد زیر بیان گر این مطلب است.
<div id="googleMap" style="width:500px;height:380px;"></div>
طراحی سایت ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])