У вас отличный веб-сайт. Было бы здорово, если бы вы могли добавить на свой сайт 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!