افزودن مکان یک برند تجاری به نقشه ی گوگل

 

در حالتی که شما هم برای کسب عمل خویش درپی تولید یک وب سایت می‌باشید طراحی سایت در مشهد  قاعدتا اضافه کردن جای کمپانی ، گاه و یا این که محل کسب خویش به نقشه گوگل آن هم در وبسایت خودتان یکی مهم‌ترین منظور های شماست .

اضافه کردن جای یک مارک تجاری به نقشه ی گوگل

به چه شکل جای نمایندگی های یک مارک تجاری را به نقشه گوگل اضافه کنیم. 

 

 

دستورالعمل 

درین یادگرفتن ما قصد داریم برای یک مشتری ذهنی نقشه گوگل از برندش را تولید کنیم . نقشه گوگل ما در تارنما مشتری دارنده

 

 آرم منحصر پباده سازی گردیده برای هر یک از جای های مشتری 

لوگوی مشتری بصورت فیکس گردیده در بالای نقشه ی گوگل 

تم نقشه که مارک تجاری مشتری باشد . 

اسم این مشتری ذهنی ما The Hobby Shoppe اسم دارااست . این مجموعه در مورد  بازی های مبنی بر بازی های تخته ای مثل شطرنج و دیگر بازی ها و متعلقات مرتبط با آن در ملبرن استرالیا میباشد . 

 

 

 

ساخت نقشه ی مبنا 

 

درین نصیب ما یک نقشه ی اساس ساخت و ساز کرده و راءس آن را شهر ملبرن قرار میدهیم . بعدا هنگامی رده کمپانی خویش را معلوم کردیم این مرکزیت را به آن نقطه منتقل می‌کنیم. البته برای آغاز ما می بایست ارتفاع و پهنا جغرافیایی شهر را برای نشان دادن کل آن بدانیم . 

 

یافتن ارتفاع و پهنا جغرافیایی اول. 

 

برا ی اینکار نقشه ی گوگل راباز کرده و عبارت ملبورن را تایپ فرمائید نقشه را پاره ای زوم فرمائید تا صرفا بخشها مسی را ملاحظه کنید . وقتی که جای را به صدق تهیه و تنظیم کردید متوجه باشید که Url در حالا تغییر و تحول میباشد . Url مشتمل بر داده ها ارتفاع وعرض جغرافیایی و معیار زوم شماست . url  را اسکن و در جایی نگه دارید. 

 

https://www.google.com/maps/place/Melbourne+VIC/@-37.804627.

 

بعداز آرم @ در Url شما می‌بینید که از کما برای جداگانه کردن مقادیر ارتفاع و پهنا و زوم شده‌است:

 

-37.8046274,144.972156,12z

 

اولی مقدار 37.8046274 - معرف پهنا جغرافیایی میباشد . دومی مقدار  144.972156 معرف ارتفاع جغرافیایی میباشد . و مقدار 12z در معنای آن میباشد که سطح بزرگ نمایی نقشه 12 بوده میباشد . ما این داده ها را به نقشه اساس ای خودمان اضافه خوا هیم کرد. 

 

ساخت و ساز فولدر Html اول 

 

یک Html خالی ساخت‌و‌ساز فرمائید و کد های تحت را داخل آن ساخت نمائید. 

 

 

 

 

 

 

 

 

 

  

 

 

    

 

 

    

 

 

    

 

 

    

 

 

  

 

 

  

 

 

 

 

 

 

   

 

 

 

 

 

 

 

  

 

 

 

 

درین متن با یک مدرک Html ساخت‌و‌ساز کرده ایم که در آن یک تگ Div با \"id=\" map-canvas وجود دارااست که قرار میباشد نقشه ما باطن این تگ قرار گیرد. ما همینطور کد های Css برای انتخاب اندازه و جای این تگ div با آیدی  \"id=\" map-canvas تولید خوا هیم کرد. 

 

در پایان هم ما اسکریپت های لازم را از Google Map API اضافه خوا‌هیم کرد. 

 

 

 

 

هم اکنون بایستی یک عملگر جاوا اسکریپت هم ساخت و ساز کنیم تا اجزائ متفاوت نقشه ی اول را ساخت و ساز و به تگ Div خالی ما فرا بخواند. 

 

 

 

نکته : آیا مشاهده میکنید که مقادیری که از url نقشه گوگل گرفته بودیم به چه شکل در  اینجا در متغییر های  Centerpos و Zooomlevel استعمال شد. متغیر های که در آرایه های mapOptions بکار رفته اند. متغییر centerPos از کما برای جداگانه کردن ارتفاع وعرض جغرافیایی به کار گیری می نماید -37.8046274,144.972156 و متغییر zoomLevel از مقدار 12 به کار گیری می نماید. 

 

فولدر Html خویش را ذخیره و با هر مرورگری که میخواهید گشوده نمائید. نقشه شما می بایست مثل تصویر پایین باشد. 

 

 

 

نشانه های جای های خویش را اضافه نمائید. 

 

در قدم بعدی بایستی ارتفاع و پهنا جغرافیایی هریک از شعب مشتری خویش را پیداکنیم . تا بتوانیم علامتی برای آن‌ها در مکانشان ساخت و ساز کنیم. ریلکس ترین شیوه برای این فعالیت به کارگیری از گوگل مپ برای جستجوی این شعب و یافتن ارتفاع و پهنا جغرافیایی آنان میباشد. 

 

یافتن ارتفاع و پهنا جغرافیایی هر شعبه. 

 

مجدد به نقشه ی گوگل برگردید . برای هریک از شعب کاوش فرمایید. با فرض اینکه ما نشانی این شعب را پیش از این از مشتری خویش اخذ کرده ایم . شما بسادگی برای نشانی در گوگل مپ کاوش می‌کنید. تا در نقشه آن نشانی را بیابید. روی نقشه راست کلیک کرده و آیتم ی ؟What\'s here را از منو تعیین فرمائید. 

 

 

 

یک پاپ آپ (باکس ) کوچک در جهت بالا چپ گشوده گردیده و جزئیات این ناحیه را به شما اعلام می نماید. که دربرگیرنده ارتفاع و پهنا جغرافیایی هم می باشد. 

 

 

 

اضافه کردن وضعیت مکانی برای مقدار دهی اول عملگر 

 

از مقدار ارتفاع و پهنا جغرا فیایی  هرمورد از شعب یادداشت بردارید . در باره این مارک خیالی ما هفت شعبه فرض کرده ایم و برای هرمورد یک مشخصه در نقشه اضافه خوا هیم کرد. برای اینکار پیش از آخر کد های نقشه خویش از عملگر ()initialize به کار گیری میکنیم و پس از خط map = new google.maps.Map : 

 

var locations = [

 

  [\'First Shoppe\', -37.808204, 144.855579],

 

  [\'Second Shoppe\', -37.675648, 145.026125],

 

  [\'Third Shoppe\', -37.816935, 144.966877],

 

  [\'Fourth Shoppe\', -37.818714, 145.036494],

 

  [\'Fifth Shoppe\', -37.793834, 144.987018],

 

  [\'Sixth Shoppe\', -37.737116, 144.998581],

 

  [\'Seventh Shoppe\', -37.765528, 144.922624]

 

];

 

 

 

for (i = 0; i < locations.length; i++) {

 

marker = new google.maps.Marker({

 

position: new google.maps.LatLng(locations[i][1], locations[i][2]),

 

title: locations[i][0],

 

map: map

 

});

 

} 

 

در‌این کد ما نخست یک آرایه از مکان شعب ساخت‌و‌ساز کرده ایم . که اسم ، ارتفاع و پهنا جغرافیایی هریک را دربرگیرنده می‌شود. ما آن‌گاه برای هرکدام از آرایه ها یک نماد گذاری را تکرار کرده ایم که یک تیتر میباشد که به طور Tool tip هنگام هاور کردن آن ناحیه ضاهر می گردد. 

 

نقشه ی شما بایستی مشابه تصویر ذیل باشد. 

 

 

 

البته طاقت فرمایید. یک چیزی درین تصویر اشتباه میباشد . ما هفت نقطه اضافه کرده ایم البته صرفا شش حیطه معلوم گردیده اند چرا ؟

 

پاسخ معمولی میباشد محل شعبه هفتم بیرون از محدوده ی رویت کرد ماست پس بایستی مجدد راس نقشه را معین کنیم . 

 

تهیه و تنظیم راءس نقشه 

 

اکنون که ما کل نقاط خویش را داریم می‌توانیم نقطه استارت خویش را تصحیح کنیم برای این عمل یک دکمه ساخت می‌کنیم که با کلیک روی آن به ما خصوصیات نو را بدهد تا به محض یافتن شایسته ترین نقطه روی آن کلیک کنیم. 

 

در هر مکان که میخواهید در تگ Body این دکمه را اضافه فرمایید. 

 

Get Map Co-ords

 

هم اکنون میتوانید نقشه خویش را به حریم بگردانید و بعد روی دکمه ی یافتن خصوصیات نو کلیک نمایید. 

 

 

 

مقادیر ارتفاع و پهنا و معیار بزرگ نمایی در کنسول درج شده است . پس مطمئن گردید که ابزار Chrome Dev و یا این که Firebug را دارید و کنسول آن ها گشوده میباشد. 

 

خصوصیات راس نقشه خویش را تغییر و تحول و تصحیح فرمائید. واحد سنجش ارتفاع و پهنا و بزرگ نمایی را در‌حالتی که مورد نیاز میباشد تغییر تحول دهید. 

 

var mapOptions = {

 

  center: new google.maps.LatLng(-37.74723337588968,144.961341333252),

 

  zoom: 12

 

};

 

نقشه خویش را ذخیره و رفرش فرمائید اکنون بایستی کل نقاطی که معلوم کرده بودید چشم شوند. وقتی که مطمئن شدید راس تصویر را به صدق تعیین نموده اید و تمامی چیز صحت دارد دکمه ای را که برای یافتن خصوصیات نو ساخت‌و‌ساز کرده بودید را حذف فرمایید. 

 

تولید یک تصویر سفارشی برای معین کردن مکان شعب 

اکنون که تمامی شعب را جا نمایی و مشخص و معلوم کرده ایم . و همگی آنان در نقشه قابل روءیت میباشند. میخواهیم آنها‌را با یک عکس سفارشی جابه جا کنیم. این تصویر می بایست با مارک تجاری و استایل نقشه ی ما هم خوانی داشته باشد هر تصویری که برای مشخص و معلوم کردن جای ها در نقشه می‌خواهید به کارگیری فرمایید بایستی فاقد دور نما باشد . 

 

 

 

عکس خویش را ساخت و در فایل images که با فولدر اساسی وبسایت در رابطه باشد قرار دهید. آنگاه کد های را که در ذیل Location در مرحله پیشین ساخت و ساز کرده بودید را بیاورید. 

 

var image = \'images/shoppe_icon.png\';

 

هم اکنون گذینه های دیگر را هم اضافه فرمائید. icon:image برای حلقهی FOR که ما تا قبل از این برای جا نمایی نقاط روی نقشه ساخت و ساز کرده بودیم . قرار دادن این عکس ها منجر جایگزینی آنان با نماد های گذشته می‌شود. 

 

for (i = 0; i < locations.length; i++) {

 

marker = new google.maps.Marker({

 

position: new google.maps.LatLng(locations[i][1], locations[i][2]),

 

title: locations[i][0],

 

map: map,

 

icon: image

 

});

 

} 

 

بگذارید نگاه دیگری به نقشه خویش بیاندازیم . اکنون می بایست این منزل های کوچک در محل هر مورد از شعب قرار داشته باشند. 

 

 

 

درج لوگوی مشتری

 

حال ما میخواهیم لگوی مشتری را درج کنیم. اندازه و جای و غلو آن با جابه جایی نقشه نباید جابه جا خواهد شد. 

 

صرفا عنصر نقشه که با جابه جایی و غلو جابه چا نمیگردد. عنصر  control UI میباشد. که اکثر وقت ها برای خیابان های دیدنی و یا این که نقشه های جابه جا شونده به کار گیری می‌گردد. هرچند که ما می توانیم از آن برای قرار دادن لگوی خویش در روی شیت به کارگیری کنیم. همچنین هم قادر خواهیم بود با کلیک روی لگو جای و بزرگنمایی نقشه را به موقعیت پیشفرض برگردانیم که استعمال قابل قبولی از کنترلر این لگو به حساب آورده می شود.

 

عمل را با افزودن لگوی مشتری خویش در به عبارتی فولدر ی یimages استارت فرمائید. اکنون کد های جاوا اسکریپت ذیل را اضافه فرمائید. صحیح پیش از عملگر ()initialize که پیش از این ساخت و ساز کرده بودید این کد ها را وارد نمایید. 

 

function LogoControl(controlDiv, map) {

 

 

 

  controlDiv.style.padding = \'5px\';

 

 

 

  var controlUI = document.createElement(\'div\');

 

  controlUI.style.backgroundImage = \'url(images/logo.png)\';

 

  controlUI.style.width = \'600px\';

 

  controlUI.style.height = \'116px\';

 

  controlUI.style.cursor = \'pointer\';

 

  controlUI.title = \'Click to set the map to Home\';

 

  controlDiv.appendChild(controlUI);

 

 

 

  google.maps.event.addDomListener(controlUI, \'click\', function() {

 

    map.setCenter(centerPos)

 

    map.setZoom(zoomLevel)

 

  });

 

 

 

}

 

هنگامی این عملگر پردازش گردد یک عنصر control UI در بعد ها 600*116 پیکسل ساخت‌و‌ساز خواهد کرد ، استعمال از تصویر لوگو تحت عنوان دور نما ، که علاوه بر تصویر با کلیک کردن تصویر را به نقطه ی مرکزی پیشفرض بر می گرداند. 

 

بعد در انتهای عملگر ()initialize کد های تحت را وارد نمایید. 

 

var logoControlDiv = document.createElement(\'div\');

 

var logoControl = new LogoControl(logoControlDiv, map);

 

 

 

logoControlDiv.index = 1;

 

map.controls[google.maps.ControlPosition.TOP_CENTER].push(logoControlDiv);

 

زمانی که عملگر ()initialize اجرا خواهد شد. حال عملگر ()LogoControl رافرا میخواند که ما نو ساخت‌و‌ساز کرده ایم و خروجی خویش را به در دست گرفتن نقشه می فرستد . 

 

نقشه شما بایستی مشابه  تصویر ذیل گردیده باشد. 

 

 

 

رنگ آمیزی نقشه 

برای رنگامیزی نقشه شما از روند استایل دهی به نقشه گوگل پیروی خواهید کرد تا تاثیر گرافیک خویش را سریعتر مشاهده کنید. 

 

 

 

منوی Feature type در پنجره به شما چندین کامپوننت می‌دهد که بتوان با آن به نقشه استایل بخشید. آنها از بسیار عام تا خیلی تخصصی طبقه بندی گردیده اند. در بیشتر سطح های عادی شما می‌توانید رنگ را به کلیه All feature type نسبت دهید. برای رنگدهی یکسان به کلیه چیز در نقشه. در رنگ دهی به طور منحصر به فرد شما میتوانید از دستوراتی مانند . All > Transit > Station > Bus بعنوان نمونه فایده ببرید. 

 

با یک  Feature type تعیین گردیده شما می‌توانید یک عنصر را با تعیین از منوی گونه های موادسازنده تعیین نمایید. برای این که رنگدهی شما خصوصیت های متفاوت زمین اثر نماید. و یا این که می‌توانید از برچسب ها یاری بگیرید. شما همینطور میتوانید نوع رنگامیزی را Fill یا این که Stroke گزینش فرمایید. 

 

برای رنگامیزی شما از دو پنل color و hue به کار گیری خواهید کرد پنل color همان گونه که از نامش پیداست برای رنگامیزی موادسازنده گزینش گردیده کاربرد داراست و پنل hue برای تغییر‌و تحول ترازو روشنی و تیرگی رنگی که آن شیئ دارااست تلاش دارااست. 

 

نقشه ما 

با جستجوی ملبورن در پنجره استارت کرده و حیطه ای که تا قبل از این گزینش کرده بودید را معین فرمایید. 

 

در تحت منوی Feature type در پنجره ی جان دار گذینه All را بزنید و در تحت منوی Element type گذینه Geometry را تعیین نمایید. حال گذینه Hue را تیک زده و روی نوار رنگی کلیک نمائید تا رنگی حدود کد  ffa200 را بیابید. بنابه دلایلی شما قوی به واردکردن کد به طور دستی درین پنجره نیستید. پس می بایست با کلیک کردن تا جایی که می‌شود به‌این رنگ مجاورت شویند. حال گذینه Invert lightness را تیک بزنید. پیکربندی Saturation را فعال کرده و واحد سنجش آن را روی 35 قرار دهید . پیکربندی Lightness را فعال کرده و آن را روی 50 تهیه و تنظیم فرمایید. گرینه ی Gamma را فعال فرمائید و تا جایی که میشود عددی مجاورت 1.3 به آن بدهید.

مقالات برگزیده طراحی سایت در مشهد نقشه ,کرده ,خویش ,میباشد ,ارتفاع ,پهنا ,google maps ,پهنا جغرافیایی ,نقشه گوگل ,کرده بودید ,نقشه خویش ,maps latlng locations منبع