Как да добавите Google карта към вашата уеб страница

01 от 05

Получете ключ за API на Google Карти за вашия сайт

Най-добрият начин да добавите карта на Google към уебсайта си е да използвате приложния програмен интерфейс (API) на Google Карти. Google препоръчва да получите ключ API, за да използвате картите.

Не се изисква да получавате ключ за приложния програмен интерфейс (API), за да използвате приложния програмен интерфейс (API) на Google Карти v3, но това е много полезно, тъй като ви позволява да наблюдавате употребата си и да плащате за допълнителен достъп. Приложният програмен интерфейс (API) на Google Карти v3 има квота от 1 заявка в секунда за потребител до максимум 25 000 заявки на ден. Ако страниците Ви надвишават тези граници, ще трябва да активирате таксуването, за да получите повече.

Как да получите ключ за API на Google Карти

1. Влезте в Google, като използвате профила си в Google.
2. Отворете Конзолата за програмисти
3. Превъртете списъка и намерете приложния програмен интерфейс (API) на Google Карти v3, след което кликнете върху бутона "OFF", за да го включите.
4. Прочетете и приемете условията.
5. Отидете в конзолата на API и изберете "API Access" от менюто отляво
6. В секцията "Просто достъп до API" кликнете върху бутона "Създаване на нов сървър ...".
7. Въведете IP адреса на уеб сървъра си. Това е IP адресът, откъдето идват вашите заявки от Карти. Ако не знаете IP адреса си, можете да го търсите.
8. Копирайте текста в реда "API ключ:" (без да се включва заглавието). Това е вашият API ключ за вашите карти.

02 от 05

Преобразувайте адреса си в координатите

За да използвате Google Карти на уеб страниците си, трябва да имате географската ширина и дължина за местоположението. Можете да ги получите от GPS или можете да използвате онлайн инструмент като Geocoder.us, за да ви кажа.

1. Отидете на Geocoder.us и въведете адреса си в полето за търсене.
2. Копирайте първото число за географската ширина (без буквата отпред) и го поставете в текстов файл. Нямате нужда от индикатора за степен (º).
3. Копирайте първия номер за географската дължина (отново без буквата отпред) и го поставете във вашия текстов файл.

Вашата ширина и дължина ще изглежда по следния начин:

40.756076
-73.990838

Geocoder.us работи само за адреси в САЩ, ако трябва да получите координатите в друга държава, трябва да потърсите подобен инструмент във вашия регион.

03 от 05

Добавяне на картата към уеб страницата ви

Първо, добавете Script карта към

на вашия документ

Отворете уеб страницата си и добавете следното към главата на вашия документ.

Променете маркираната част до номерата на географската ширина и дължина, които сте записали в стъпка две.

Второ, добавете елемента от картата към страницата си

След като сте добавили всички елементи от скрипта към главата на вашия документ, трябва да позиционирате картата си на страницата. Направете това, като добавите елемент DIV с id = "map-canvas" атрибут. Препоръчвам ви също така да нагласите тази Div с ширината и височината, които ще се поберат на вашата страница:

Накрая качите и тествайте

Последното нещо, което трябва да направите, е да качите страницата си и да тествате дали картата ви се показва. Ето един пример за карта на Google на страницата. Забележете, поради начина, по който CMS работи, ще трябва да кликнете върху връзка, за да се покаже картата. Това няма да се случи на страницата ви.

Ако картата ви не се показва, опитайте да я инициализирате с атрибут BODY:

onload = "инициализиране ()" >

Други неща, за да проверите дали картата ви не се зарежда, включват:

• Потърсете грешки в JavaScript, включително и случая. JavaScript прави разлика между главни и малки букви.
• Уверете се, че сте задали опциите за мащабиране и център.
• Уверете се, че елементът DIV е на страницата със съответния идентификационен номер.
• Уверете се, че елементът DIV има височина.

04 от 05

Добавете маркер към картата си

Но каква е добрата карта на местоположението ви, ако няма маркер, който да казва на хората къде да отидат?

За да добавите стандартен червен маркер на Google Карти, добавете следното към скрипта си под var map = ... line:

var myLatlng = нов google.maps.LatLng ( ширина, дължина );
var marker = нов google.maps.Marker ({
позиция: myLatlng,
карта: карта,
заглавие: " бивш седалище в Google.com "
});

Променете маркирания текст на географската ширина и дължина и заглавието, което искате да се показва, когато хората се придвижват над маркера.

Можете да добавяте толкова маркери към страницата, колкото искате, просто добавете нови променливи с нови координати и заглавия, но ако картата е твърде малка, за да покажете всички маркери, те няма да се показват, освен ако читателят не се махне.

var latlng 2 = нов google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = нов google.maps.Marker ({
позиция: latlng 2 ,
карта: карта,
заглавие: " Apple Computer "
});

Ето пример за карта на Google с маркер. Забележете, заради начина, по който CMS работи, трябва да кликнете върху връзка, за да се покаже картата. Това няма да се случи на страницата ви.

05 от 05

Добавете втора (или повече) карта към страницата си

Ако сте разгледали примерната ми страница на Google карти, ще забележите, че на страницата има повече от една карта. Това е много лесно да се направи. Ето как.

1. Получете географската ширина и дължина на всички карти, които искате да покажете, както научихме в стъпка 2 от този урок.
2. Поставете първата карта, както научихме в стъпка 3 от този урок. Ако искате картата да има маркер, добавете маркера, както в стъпка 4.
3. За втората карта ще трябва да добавите 3 нови реда към скрипта your initialize ():
   var latlng2 = нов google.maps.LatLng ( втори координати );
   var myOptions2 = {увеличение: 18, център: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = нов google.maps.Материал (document.getElementById ("map_canvas_2"), myOptions2);
4. Ако искате и маркер на новата карта, добавете втори маркер, насочен към вторите координати и втората карта:
   var myMarker2 = нов google.maps.Marker ({позиция: latlng2 , map: map2 , заглавие: " Вашият маркер "});
5. След това добавете втория

   където искате втората карта. И не забравяйте да му дадете id = "map_canvas_2" ID.

6. Когато се зареди страницата ви, ще се покажат две карти

Ето кода на страница с два Google карти върху нея: