У вас отличный веб-сайт. Было бы здорово, если бы вы могли добавить на свой сайт Google Карты? На то есть масса причин. Я не хочу делать из нее длинную скучную статью, поэтому оставлю эту тему. Давайте поговорим о том, как добавить Карты Google на свой сайт.

Для начала вам понадобится учетная запись Google. Надеюсь, он у вас есть. Если нет, то создайте аккаунт ЗДЕСЬ. Вы можете как почему? Причина в том, что нам нужен ключ JavaScript API от Google, который мы можем позже добавить в наш HTML-код. Вторая задача - войти в консоль разработчика Google. Ссылка ЗДЕСЬ.

Шаг 1

Во-первых, вам нужно создать проект. Нажмите «Выбрать проект», который находится на верхней панели справа рядом с логотипом «Google API».

Шаг 2

Теперь нажмите на большой знак (+), который вы увидите в правой части всплывающего экрана.

Шаг 3

Пришло время дать вашему проекту имя и нажать «Создать». Теперь ваш проект готов.

Шаг 4

Нам нужен ключ API JavaScript, поэтому мы должны найти его в библиотеке. Вы найдете его в левой части экрана под панелью управления.

Шаг 5

«Google Maps JavaScript API» должен появиться на лицевой стороне. Но если это не так, вы можете использовать строку поиска.

ШАГ 6

Выберите «Google Maps JavaScript API» и включите его.

Шаг 7.

Следующим шагом будет настройка «Учетных данных», таким образом мы находим ключ API. Есть несколько способов сделать это. Вы можете создать учетные данные в окне предупреждения на панели инструментов. Или вы можете выбрать «Учетные данные» в левой строке меню. Мы с этим согласимся.

Шаг 8

После перехода на вкладку «Учетные данные» вы увидите кнопку «Создать учетные данные». Если вы нажмете на нее, появится всплывающее окно, в котором вы сможете выбрать «Ключ API». Сделай это.

Шаг 9

Вы должны получить ключ сразу после того, как нажали «Ключ API». Должно получиться вот так.

Шаг 10.

Тяжелая работа сделана. Теперь вам нужно добавить «API-ключ» на свой сайт. Код JavaScript приведен ниже:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

«YOUR_KEY» следует заменить только что полученным ключом API. Вот образец HTML-кода, который поможет вам лучше понять. В следующем коде есть строка center:new google.maps.LatLng(23.792750,90.407606),, в которой вам нужно отредактировать широту и долготу (23.792750,90.407606) желаемой области. Вы можете легко получить широту и долготу на Google Maps. Просто щелкните позицию правой кнопкой мыши и выберите вариант «Что здесь». Широта и долгота будут отображаться через запятую. Возьми это оттуда.

<!DOCTYPE html>
<html>
<body>
<h1>My Google Map</h1>
<div id="gMap" style="width:100%;height:500px;"></div>
<script>
function myMap() {
var mapProp= {
    center:new google.maps.LatLng(23.792750,90.407606),
    zoom:5,
};
var map=new google.maps.Map(document.getElementById("gMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>

Надеюсь, вы узнали что-то новое сегодня. Я говорю, тебе стоит попробовать. И дайте нам знать, если вам это нравится или возникнут какие-либо проблемы, через раздел комментариев. Ваше здоровье!

Нам очень нравится, когда вы здороваетесь в Twitter или Facebook!