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

Тази статия обяснява как да вмъкнете карта на Google с маркер за местоположение във вашата уеб страница. Този процес включва получаване на специален софтуерен ключ от Google и след това добавяне на съответния JavaScript на страницата.

Получете ключ на API на Google Maps

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

За да регистрирате вашия API ключ:

1. Отидете на Google Cloud Platform Console и след като влезете с вашия акаунт в Google, или създайте нов проект, или изберете съществуващ.

2. Щракнете продължи за да активирате API и свързаните с тях услуги.

3. На Акредитивни писма страница, вземете API ключ. Ако е необходимо, задайте съответните ограничения на ключа.

4. Защитете вашия API ключ, като използвате най-добри практики препоръчани от Google.

Поставете JavaScript във вашата уеб страница

Вмъкнете следния код във вашата уеб страница, в раздела BODY на HTML документа:

// Инициализиране и добавяне на функцията за карта initMap () {
// Местоположението на флага var flag = {lat: XXX, lng: YYY};
// Картата, центрирана в флаг var map = new google.maps. Карта (document.getElementById ('map'), {zoom: 4, center: flag});
// Маркерът, позициониран на флаг var marker = new google.maps. Маркер ({позиция: флаг, карта: карта}); } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">

В този код променете следното:

• Сменете флаг с име, което препраща към местоположението, което фиксирате. Нека бъде просто и кратко (като У дома или офис или Париж или детройт). Можете да стартирате този код на излизане флаг както е, но промяната на името поддържа повторното използване на този код на една и съща страница за вграждане на няколко различни карти.
• Сменете XXX и ГГГ с географската ширина и дължина, в десетични знаци, на местоположението на маркера на картата. Трябва да замените тези стойности, за да може картата да се показва правилно. Лесен начин да намерите географската ширина и дължина е да отворите Google Maps и да щракнете с десния бутон върху точното местоположение, което възнамерявате да маркирате. В контекстното меню изберете Какво има тук за да видите географската ширина и дължина.
• Сменете YOUR_API_KEY с API ключа, който сте получили от Google. Не поставяйте интервали между знака за равенство и амперсанда. Без ключа, заявката ще се провали и картата няма да се покаже правилно.

Оптимални практики

В главата на вашия HTML документ посочете CSS ограничения за картата, включително оразмеряване, цветове и разположение на страницата.

Скриптът на картата на Google съдържа атрибути като мащабиране и център които са отворени за промяна на крайния потребител. Тази по-усъвършенствана техника се поддържа чрез документацията за разработчици на Google.

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