چگونه می توان نقشه تعاملی با استفاده از API Google Maps را در طراحی وب سایت خود ایجاد نماییم! وجود نقشه در برخی سایت ها، فاکتور ضروری تلقی می شود و موجب جلب نظر کاربران سایت می شود که در نتیجه امر سئو سایت را تحت تاثیر خود قرا خواهد داد پیش از شروع، شما نیازمند کلید خاص API از گوگل می باشید. API واسط برنامه کاربری است و به منظور تعامل بین کامپوننت های یک نرم افزار استفاده می شوند و می تواند توصیفی از روش انجام یک وظیفه باشد. با ورود به لینک https://code.google.com/apis/console/ و ورود به حساب گوگل خود می توانید در لیست خدمات Google Maps API v3 را بیابید و به صورت رایگان کلید API را تهیه نمایید.حال شما آماده هستید که یک نقشه گوگل ساده را در طراحی سایت خود ایجاد و درج نمایید.کد زیر مثالی از نقشه شهر لندن می باشد.
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</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="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
در مثال زیر پس از بارگذاری کامل صفحه سایت گوگل مپ بارگذاری می شود:
function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? 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>
طراحی سایت
