Google включает в себя очень много разных нужных сервисом, которые в один или другой момент являются актуальными для нас — разработчиков. В этой записи, я распишу о сервисе «Google Карты» и покажу на примере как это все установить на сайт.

Демо

Демо так же можно посмотреть по этой ссылке (в полный экран).

Предисловие

Первое — вы можете установить любую высоту и ширину для Google карт. Если вы например, хотите сделать ее 100% по ширине и 320 по высоте — пожалуйста — это можно сделать. Ниже я опишу как это сделать.

Второе — в этой записи, я подробно распишу как установить Google карты на сайт. Далее следуйте гайду под заголовком «Установка» (ниже).

Установка

1. Для начала, вам нужно создать просто элемент, который будет держать карту внутри. Для него нужно добавить ширину и высоту, так как это обязательное условие, чтобы карта нормально отображалась.Для начала добавим элемент.

   <div id="map"></div>

   После чего нужно добавить стили для него.

   #map {width: 100%; height: 300px;}

   Я установил, 100% по ширине, высоту я поставил 300 пикселей. Вы можете установить 100% высоту и тогда вашу карта по ширине и высоте будет 100%, то есть растянута по всей странице (если на странице ничего кроме карты нет).

2.  Далее вам нужно установить скрипт, который будет выполнять работу по отображения карты в #map.

   <script>
     var map;
     function initMap() {
       map = new google.maps.Map(document.getElementById('map'), {
         center: {lat: -34.397, lng: 150.644},
         zoom: 8
       });
     }
   </script>

   center — отвечает за отображения центра вашей карты и lat и lng отвечают за координаты вашего адрес.
   lat (сокращенно latitude) — отвечает за ширину на карте
   lng (сокращено longitude)  — отвечает за долготу на карте

   Данные по ширине и долготе можно узнать на этом сайте. Все что вам нужно — это указать адрес и ниже формы с адрес вам покажет нужные вам координаты.

3. После чего перед </body> вам нужно поставить следующий скрипт.

   <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
      async defer></script>

   Который возьмет данные с сервиса Google Карт, чтобы отобразить ее на вашем сайте.

На этом все. Установка закончена. Можете зайти на сайт и проверить работу скрипта.

Если не отображает карту, то вам нужно зайти в консоль браузера и посмотреть есть ли там какие-либо ошибки. Если они есть, то вы можете написать в комментарии к этой записи и я вам помогу решить вашу проблему.