Гугл карты, как подключить JS HTML и всё остальное

Конечно же, для работы с картами потребуется гугл-ключ (куда без этого).

Далее на странице заводим какой-нибудь пустой блок (с уникальным id) для карты, ему также надо будет установить стиль (размер), иначе карта будет невидимой:
Например :

<div id="google-map" style="width: 100%;height: 400px;background-color: grey;">
</div>
</pre>

Далее подлючим скрипты, в том числе и JS для работы с картами:
<pre>
<script src="/js/map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?...ВАШКЛЮЧ&callback=initGoogleMap"></script>

Обратите внимание на initGoogleMap -- это имя функции, которую гугл-мэп вызовет, как только будет загружен на страницу, эту функцию как раз можно разместить в map.js (или другом файле с вашими скриптами, можно и прямо на странице. важно только чтобы сам js гугл-карт с апи-ключом подключался после определения этой функции):

function initGoogleMap()
{
      // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('google-map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});

}