Внимание! Google направиха някои промени по техния API и затова кодът от тази страница вече не работи. Прочети публикацията Google Maps карта и валиден XHTML
Google Maps карта за твоя сайт
В статията Google maps – бързо включване на карта в сайт показах, как бързо да включиш карта от Google Maps в твоя сайт. Но има един малък проблем - използването на iframe таг прави кода на страницата невалиден HTML код по стандарта XHTML. Да бъдат страниците валиден XHTML е важно за SEO оптимизацията на един сайт. Това помага на ботовете на търсачките да разберат без проблем структурата и елементите на текущата страница, и да индексират страницата без проблем.
Затова ти предлагам друг вариант на включване на Гугъл карта, който изисква Google Maps API ключ и добавяне на една JavaScript библиотека.
Създаване на Google Maps API ключ
Звучи малко страшно, но всъщност е елементарно.
Отвори адрес code.google.com/apis/maps/signup.html.
Избери опцията "I have read and agree with the terms and conditions" за да се съгласиш с Правилата за ползване.
В полето "My web site URL" въведи интернет адреса на сайта, в който ще включваш Гугъл карта и натисни бутона [Generate API Key].
Копирай кода на твоя API ключ.
Библиотека за работа с Google карти GMapEZ
Изтегли кода на библиотеката GMapEZ от адрес https://ganbox.com/inc/gmapez-2.5.js или от сайта на разработчика http://n01se.net/gmapez/ и го качи на твоя сайт, например в директория /inc, която е поддиректория на главната уеб директория на твоя сайт.
В сайта на разработчика може да прочетеш документацията и да видиш примери показващи възможностите на бибилиотеката, като поставяне на няколко маркера на картата, промяна изгледа на изкачащите балони на маркерите и др.
Линк към карта в Google Maps
Преди инсталиране на кода в твоя сайт ти трябва и линка към картата, която ще се показва в твоя сайт. Ако не знаеш как да получиш този линк, трябва да прочетеш статията Google maps – бързо включване на карта в сайт. Изпълни стъпките описани в "Добавяне на карта от Google Maps в сайт", с тази разлика, че след натискане на връзката "Link" след като се отвори прозорче с двете полета се копира не от второто поле, а линка от първото поле. Това и бърза връзка към твоята карта в Google Maps.
Инсталиране на Goole Maps карта за валиден XHTML
В head частта на твоя сайт (преди затварящия таг </head>) добави следните два реда:
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAdwBYdsADaUm9q8tkYl-wsBT6h6yFeRhnW_cacFSo3_TadhhEhRSV2ZhRK4Y7c5tvGD2bFGE1obPH-w"></script> <script type="text/javascript" src="/inc/gmapez-2.5.js"></script>
В първя ред след key= е Google Maps API ключа
ABQIAAAAdwBYdsADaUm9q8tkYl-wsBT6h6yFeRhnW_cacFSo3_TadhhEhRSV2ZhRK4Y7c5tvGD2bFGE1obPH-w
който трябва да промениш с твоя ключ (не опитвай да ползваш този, защото няма да сработи).
Във втория ред включваш JavaScript библиотеката GMapEZ.
Hint: Може да добавиш тези редове само в страницата, в която ще показваш карта, за да не се включват излишно по другите страници.
В body частта, там където искаш да се покаже картата добави следния код:
<div class="GMapEZ GLargeMapControl GMapTypeControl GScaleControl" style="width: 700px; height: 480px;"><a href="http://maps.google.bg/maps/ms?hl=bg&georestrict=input_srcid:22f19766be2105d0&ie=UTF8&view=map&ctz=-180&source=embed&msa=0&msid=214760292494879634878.000483e138e466fe737de&ll=42.664884,23.29551&spn=0.007572,0.014999&z=16">OPEN</a></div>
Стойността на атрибута href на тага a във втория ред,
http://maps.google.bg/maps/ms?hl=bg&georestrict=input_srcid:22f19766be2105d0&ie=UTF8&view=map&ctz=-180&source=embed&msa=0&msid=214760292494879634878.000483e138e466fe737de&ll=42.664884,23.29551&spn=0.007572,0.014999&z=16
трябва да замениш с твоята бърза връзка към Google карта (не опитвай да ползваш тази, защото няма да сработи).
Ще трябва в линка да заместиш всеки от знаците & с пет знака & - това се налага заради XHTML.
Естествено може да променяш стойностите на style="width: 700px; height: 480px;" на първия ред за оразмеряване на картата.
Класовете GMapEZ GLargeMapControl GMapTypeControl GScaleControl са опции необходими за правилната работа на картата. С това картата е готова.
Често ползвани опции
Дотук само поставихме карта с маркер на определен адрес, но няма описание към него. Накратко ще разгледам най-често ползваните възможности на библиотеката GMapEZ.
За да се добави информационен балон към маркера (при натискане на маркера се показва повече информация за адреса и при повторно натискане се скрива). Трябва да се добави още един div елемент веднага след елемента a, който обаче е вътре в първия div. Ето как ще изглежда целия код:
<div>1797 София бул. Г.М.Димитров №36 (до НСС)</div>
Вътрешният div съдържа допълнителни данни за адреса и се показва в изкачащ информационен балон.
Опции може да се добавят и вътре в тага a. Например ако точно пред затварящия таг </a> се напишат опциите:
YELLOW OPEN
Това ще промени маркера по следния начин:
1. YELLOW ще промени стандартния червен цвят със жълт цвят на маркера.
2. OPEN ще доведе до автоматично отваряне на информационния балон при зареждане на картата.
Както се вижда библиотеката ни дава малко повече контрол.
За повече опции прочети документацията на разработчика на адрес http://n01se.net/gmapez
Като краен резултат ще получиш карта подобна на тази в страница Контакт на ganbox.com и кода на страницата ще бъде валиден XHTML.
Loading...
