Google Maps карта и валиден XHTML

Създаване на Google Maps карта за сайт

Google направиха някои промени в техния API (Application programming interface) поради това в много сайтове, които ползваха динамични Google Maps карти, чрез „JS Maps API v2“ спряха да работят. В това число и Ganbox решението от публикацията „Карта от Google Maps и валиден XHTML

Независимо дали си ползвал до момента стария Google API ключ или за първи път ще вграждаш Google карта, ще трябва да създадеш нов API ключ от новата версия JS Maps API v3.

Google maps активиране на услугаСъздаване на Google Maps API ключ

1. Логни се в твоя Google акаунт и отвори адреса https://code.google.com/apis/console

2. От менюто вляво избери Services и от списъка с услуги (някъде в средата) активирай „Google Maps API v3“ така както и показано на втората картинка. Както се вижда има ограничение от 25 хиляди заявки на ден, след което картата спира да се показва и на нейно място излиза съобщение „Този сайт е надвишил дневната си квота за карти“. Това са безплатните заявки на ден. При нужда от по-големи обеми се плаща. В страница Reports ще има статистика на използването на API ключа.

Google Maps карта активиране на API ключ

 

3. След като услугата е активирана, новият API ключ е създаден и достъпен. От менюто вляво отвори страница „API Access“ и в секцията „Simple API Access“ в полето API key: ще видиш новия API ключ.

За сйта ganbox.com той изглежда така: AIzaSyCA7Zq8bapF4rhnqqgh9D7lB7eHdvqPe7c (не се опитвай да ползваш за твоя сайт – няма да сработи).

4. В дясната страна срещу ключа има линк „Edit allowed referers…“ натисни го и ползвай полето, за да въведеш един или повече сайта, в които да работи твоя API ключ. Например за сайта Ganbox се въвежда на отделен ред: *.ganbox.com/*

По този начин API ключът работи за целия домейн и за поддомейни. Въведи домейна на твоя сайт, за да спреш възможността някой да ползва твоя ключ за друг сайт.

 

Инсталиране на Goole Maps карта в сайт

1. Изтегли кода на библиотеката GMapEZ от адрес http://ganbox.com/inc/gmapez-3.0-beta1.js

2. Качи този JavaScript файл на сървъра на сайта, в който ще показваш картата, например в директория /inc – поддиректория на главната уеб директория.

3. В head частта на страницата на твоя сайт, в която ще се показва карта, преди затварящия таг </head> добави следните два реда:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCA7Zq8bapF4rhnqqgh9D7lB7eHdvqPe7c&amp;sensor=true" type="text/javascript"></script>
<script src="/inc/gmapez-3.0-beta1.js" type="text/javascript"></script>

В първя ред след „key=“ и преди „&amp;“ е Google Maps API ключа, който трябва да промениш с твоя ключ (не опитвай да ползваш този за Ganbox, защото няма да сработи).

Във втория ред включваш новата JavaScript библиотека GMapEZ, която работи с новата версия JS Maps API v3.

4. В body частта, там където искаш да се покаже картата добави следния код:

<div class="GMapEZ GLargeMapControl GMapTypeControl GScaleControl" style="width: 700px; height: 480px;"><a href="https://maps.google.com/maps?q=%D0%A1%D0%BE%D1%84%D0%B8%D1%8F+%D0%B6%D0%BA+%D0%93%D0%BE%D1%86%D0%B5+%D0%94%D0%B5%D0%BB%D1%87%D0%B5%D0%B2+235%D0%90&amp;hl=bg&amp;ie=UTF8&amp;ll=42.664813,23.295575&amp;spn=0.006209,0.016512&amp;sll=42.665243,23.294361&amp;sspn=0.012418,0.033023&amp;t=m&amp;hnear=%D0%B6.%D0%BA.+%D0%93%D0%BE%D1%86%D0%B5+%D0%94%D0%B5%D0%BB%D1%87%D0%B5%D0%B2+235-%D0%90,+1404+%D0%A1%D0%BE%D1%84%D0%B8%D1%8F,+%D0%91%D1%8A%D0%BB%D0%B3%D0%B0%D1%80%D0%B8%D1%8F&amp;z=17&amp;iwloc=A">OPEN</a></div>

Стойността н атрибута href на тага a представлява бързата връзка към адреса взет от Google Maps.

Създаване на линк към карта в Google Maps

Създаване на линк към Google Maps карта

Както е показано на картинката. Направи следното:

1. Отвори https://maps.google.com

Потърси адреса, който те интересува, докато се покаже отбелязан с червен маркер A. Ако е нужно премести маркера с мишката.

Може да направиш промяна на мащаба (zoom in) като застанеш с мишката върху картата и завъртиш напред колелцето на мишката.

2. Натисни в горния десен ъгъл на надписа карта, за превключване от изглед на сателит до изглед на карта.

3. Натисни бутончето с веригата, за отваряне на прозорче с URL на картата.

4. При промяна на мащаба или центриране на маркера URL адреса динамично се променя, затова увери се, че картата изглежда добре на екрана и след това копирай URL адреса от първото поле.

Заключение

С това картата е готова. Естествено може да променяш стойностите на style=”width: 700px; height: 480px;” за промяна размера на картата.
Заб. За предпочитане е да се сложи id атрибут на този div и стилът да се изнесе в отделен CSS файл.

Като краен резултат ще получиш карта подобна на тази в страница Контакт на ganbox.com и кода на страницата ще бъде валиден XHTML.

За повече настройки виж предишната публикация Карта от Google Maps и валиден XHTML

 

Прочетена:3528
« Предишна публикация

Добавяне на бизнес сайт във Freebase (видео)

UPDATE (от дата 17.12.2014): На 16.12.2014 беше обявено, че поддръжката на Freebase ще бъде преустановена и ще насочат усилия към сайта Wikidata.org На 31 март 2015г услугата Freebase ще стане само за четене.   Какво е ... Повече информация »

Следваща публикация »

Оптимизиране на процесорното време на сайт

Оптимизация на CPU ресурси Тази публикация е за сайтове разположение на споделен хостинг, но може да даде някои идеи за оптимизиране за всеки динамичен сайт без значение какъв хостинг ползва. Какво е ... Повече информация »

Напишете коментар