Основы Google Maps

Создание базовой карты Google

Этот пример создает карту Google, центром которой является Лондон, Великобритания:

Пример

<!DOCTYPE html>
<html>
<body>
<h1>Моя первая карта Google</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
  center: new google.maps.LatLng(51.508742, -0.120850),
  zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>

Далее, мы шаг за шагом рассмотрим этот пример.

Корпус карты и размеры

Карта需要一个 HTML элемент для хранения карты:

<div id="googleMap" style="width:100%;height:400px"></div>

и также настроить размер карты.

Создать функцию для настройки свойств карты

function myMap() {
var mapProp = {
    center: new google.maps.LatLng(51.508742, -0.120850),
    zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

mapProp Переменная определяет свойства карты.

center Свойство определяет центр карты (используйте координаты широты и долготы).

zoom Свойство определяет уровень масштабирования карты (попробуйте масштабировать карту).

Пожалуйста, посмотрите на эту строку:

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

Он использует переданные параметры (mapProp) Создайте новую карту в элементе <div> с id="googleMap".

Множество карт

Ниже приведен пример, который определяет карты с четырьмя различными типами карт:

Пример

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);

Бесплатный Google API Key

Google позволяет веб-сайтам бесплатно вызывать любые Google API несколько тысяч раз в день.

Пожалуйста, перейдите по следующей ссылке, чтобы узнать, как получить ключ API:

https://developers.google.com/maps/documentation/javascript/get-api-key

Google Maps необходимо указать ключ API при загрузке API: key В параметрах найти этот API ключ:

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