Як додати карту Google на свою веб-сторінку

01

з 05

Отримайте ключ API Карт Google для свого сайту

Найкращий спосіб додати карту Google на свій веб-сайт - використовувати Google Maps API. І Google рекомендує отримати ключ API для використання карт.

Ви не зобов'язані отримувати ключ API для використання Google Maps API v3, але це дуже корисно, оскільки дозволяє відстежувати використання і оплачувати додатковий доступ. Google Maps API v3 має квоту 1 запит на секунду на користувача, максимум 25 000 запитів на день. Якщо ваші сторінки перевищують ці обмеження, вам потрібно включити виставлення рахунків, щоб отримати більше.

Як отримати ключ API Карт Google

1. Увійдіть в Google, використовуючи свій обліковий запис Google.
2. Перейти до консоля розробника
3. Прокрутіть список і знайдіть Google Maps API v3, потім натисніть кнопку OFF, щоб включити його.
4. Прочитайте і погодьтеся з умовами.
5. Перейдіть до консоля API і виберіть API Access у меню ліворуч.
6. У розділі «Простий доступ до API» натисніть кнопку «Створити новий ключ сервера»....
7. Введіть IP-адресу вашого веб-сервера. Це IP-адреса, з якої будуть надходити ваші запити Карт.
8. Скопіюйте текст до рядка "API key:(не включаючи цей заголовок). Це ваш ключ API для ваших карт.

02

з 05

Перетворіть вашу адресу на координати

Щоб використовувати карти Google на своїх веб-сторінках, вам необхідно вказати широту і довготу місця розташування. Ви можете отримати їх з GPS або використовувати онлайн-інструмент, такий як Geocoder.us, щоб повідомити вам.

1. Перейдіть на Geocoder.us і введіть свою адресу в поле пошуку.
2. Скопіюйте перше число для широти (без літери перед) і вставте його в текстовий файл. Вам не потрібен індикатор ступеня.
3. Скопіюйте перше число довготи (без літери попереду) і вставте його в текстовий файл.

Ваша широта і довгота виглядатимуть приблизно так:

40.756076
-73.990838

Geocoder.us працює тільки для адрес у США, якщо вам потрібно отримати координати в іншій країні, вам слід шукати аналогічний інструмент у вашому регіоні.

03

з 05

Додавання карти на вашу веб-сторінку

Спочатку додайте скрипт карти до вашого документа.

Відкрийте свою веб-сторінку та додайте наступне до ГОЛОВКУ вашого документа.

Змініть виділення на значення широти і довготи, які ви записали на другому кроці.

По-друге, додайте елемент карти на свою сторінку.

Після того, як ви додали всі елементи скрипту до ГОЛОВКУ вашого документа, вам потрібно розташувати карту на сторінці. Ви робите це, додаючи елемент DIV з атрибутом id = «map-canvas».

Нарешті завантажити і протестувати

Останнє, що потрібно зробити, це завантажити свою сторінку і перевірити, що ваша карта відображається. Ось приклад карти Google на сторінці. Зверніть увагу, що через те, як працює Lifewire.com CMS, вам потрібно буде клацнути посилання, щоб відобразити карту. Це не буде мати місце на вашій сторінці.

Якщо ваша карта не показується, спробуйте ініціалізувати її атрибутом BODY:
onload = «initialize ()»>

Інші речі, щоб перевірити, чи не завантажується ваша карта, включають:

• Шукайте помилки у вашому JavaScript, включаючи регістр. JavaScript чутливий до регістру. Переконайтеся, що ви встановили параметри масштабування і центру.
• Переконайтеся, що ваш елемент DIV знаходиться на сторінці з правильним ідентифікатором.
• Переконайтеся, що ваш елемент DIV має висоту.

04

з 05

Додайте маркер на вашу карту

Але що хорошого в карті вашого місця розташування, якщо немає маркера, що вказує людям, куди вони повинні йти?

Щоб додати стандартний червоний маркер Google Maps, додайте наступне до вашого скрипту під рядком var map =...:

var myLatlng = new google.maps.LatLng (широта, довгота);
var marker = new google.maps.Marker ({
position: myLatlng,
map: map,
title: «» Колишня штаб-квартира Lifewire.com «»});

Змініть виділений текст на широту і довготу та назву, яку ви хотіли б бачити, коли люди наводять курсор на маркер.

Ви можете додати до сторінки стільки маркерів, скільки захочете, просто додайте нові змінні з новими координатами та заголовками, але якщо карта занадто мала, щоб відобразити всі маркери, вони не будуть відображатися, поки читач не зменшить масштаб.

var latlng 2 = новий google.maps.LatLng (37.3316591, -122.0301778);
var myMarker 2 = new google.maps.Marker ({
position: latlng 2 ,
map: map,
title: "" Apple Computer ""
});

Ось приклад карти Google з маркером.

Через те, як працює Lifewire.com CMS, вам потрібно клацнути посилання, щоб відобразити карту. Це не буде мати місце на вашій сторінці.

05

з 05

Додайте другу (або більше) карту на свою сторінку

Якщо ви подивилися нашу сторінку з прикладами карт Google, то помітите, що на цій сторінці відображається більше однієї карти. Це дуже легко зробити. Ось як.

1. Отримайте широту і довготу всіх карт, які ви хочете відобразити, як ми дізналися на кроці 2 цього уроку.
2. Вставте першу карту, як ми дізналися за крок 3 цього уроку. Якщо ви хочете, щоб на карті був маркер, додайте маркер, як за крок 4.
3. Для другої карти вам потрібно додати 3 нові рядки до вашого скрипту initialize ():