Създаване на Google Maps карта за сайт
Обновена на: 15.06.2021 г. Google Maps картите вече са платени, като се плаща са брой показвания на картите на Google във вашия сайт. Инсталирането на картата в сайта става само през Google API и се извършва от програмист. Към своя Google профил имате всеки месец безплатен брой извиквания на картата, които след като бъдат изчерпани, картата спира да се показва във сайта ви. За да продължи да се показва, трябва да имате платежно средство в профила и да платите на Google за показване на картата от Googl eMaps. Ако имате нужда от помощ с инсталирането на карти във вашия сайт, може да се свържете с нас от страница Контакти.
Слидва старо съдържание:
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 API ключ
1. Логни се в твоя Google акаунт и отвори адреса https://code.google.com/apis/console
2. От менюто вляво избери Services и от списъка с услуги (някъде в средата) активирай "Google Maps API v3" така както и показано на втората картинка. Както се вижда има ограничение от 25 хиляди заявки на ден, след което картата спира да се показва и на нейно място излиза съобщение "Този сайт е надвишил дневната си квота за карти". Това са безплатните заявки на ден. При нужда от по-големи обеми се плаща. В страница Reports ще има статистика на използването на 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 от адрес https://ganbox.com/inc/gmapez-3.0-beta1.js
2. Качи този JavaScript файл на сървъра на сайта, в който ще показваш картата, например в директория /inc - поддиректория на главната уеб директория.
3. В head частта на страницата на твоя сайт, в която ще се показва карта, преди затварящия таг </head> добави следните два реда:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fjs%3Fkey%3DAIzaSyCA7Zq8bapF4rhnqqgh9D7lB7eHdvqPe7c%26amp%3Bsensor%3Dtrue%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Finc%2Fgmapez-3.0-beta1.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
В първя ред след "key=" и преди "&" е 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&hl=bg&ie=UTF8&ll=42.664813,23.295575&spn=0.006209,0.016512&sll=42.665243,23.294361&sspn=0.012418,0.033023&t=m&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&z=17&iwloc=A">OPEN</a></div>
Стойността н атрибута href на тага a представлява бързата връзка към адреса взет от 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
Прочетена:11945
Loading...
