Эта страница переведена с помощью Cloud Translation API.

Как добавить карту Google на веб-страницу

Добавить карту Google на веб-страницу можно с помощью HTML, CSS и JavaScript. На этой странице показано, как добавить карту на веб-страницу, а затем программно получить доступ к экземпляру карты.

Добавьте карту, используя элемент gmp-map
Добавьте карту, используя элемент div и JavaScript.
Задавать и получать свойства экземпляра карты

Обзор

Для загрузки карты ваша веб-страница должна выполнить следующие действия:

Загрузите JavaScript API карт с помощью загрузчика Bootstrap. Здесь передается ваш ключ API. Его можно добавить как в HTML-файлы, так и в исходные файлы JavaScript.
Добавьте карту на HTML-страницу и примените необходимые CSS-стили.
Загрузите библиотеку maps и инициализируйте карту.

Добавьте карту, используя элемент `gmp-map`

Элемент gmp-map — это предпочтительный способ добавления карты Google на веб-страницу. Это пользовательский HTML-элемент, созданный с использованием веб-компонентов. Чтобы добавить карту на веб-страницу с помощью элемента gmp-map , выполните следующие шаги.

Добавьте элемент script , содержащий Bootstrap, на HTML-страницу или добавьте его в исходный файл JavaScript или TypeScript без элемента script . Настройте Bootstrap, указав свой API-ключ и любые другие параметры. Вы можете выбрать либо динамический импорт библиотек, либо прямую загрузку скриптов. В этом примере показано добавление Bootstrap с динамической загрузкой скриптов на HTML-страницу:

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Узнайте больше о загрузке JavaScript API Google Maps.

На HTML-странице добавьте элемент gmp-map . Укажите координаты широты и долготы для center (обязательно), значение масштабирования для параметра zoom (обязательно) и map-id (при необходимости он требуется для некоторых функций, таких как расширенные маркеры).

<gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
</gmp-map>index.html

Полный пример кода

Машинопись

async function initMap(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Create the map.
    const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}

initMap();index.ts

JavaScript

async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');
    // Create the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}
initMap();index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Simple Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
    </head>

    <body>
        <gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>index.html

Попробуйте образец

JSFiddle.net

Добавьте карту, используя элемент `div` ` и JavaScript.

Чтобы добавить карту на веб-страницу с помощью элемента div , выполните следующие шаги.

Добавьте элемент script , содержащий Bootstrap, на HTML-страницу или добавьте его в исходный файл JavaScript или TypeScript без элемента script . Настройте Bootstrap, указав свой API-ключ и любые другие параметры. Вы можете выбрать либо динамический импорт библиотеки, либо прямую загрузку скрипта. В этом примере показано добавление динамического Bootstrap на HTML-страницу:

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Узнайте больше о загрузке JavaScript API Google Maps.

На HTML-странице добавьте элемент div , чтобы разместить карту.
```
<div id="map"></div>
```
В CSS-коде установите высоту карты равной 100%. Атрибут ` height необходим для того, чтобы карта была видна.
```
#map {
  height: 100%;
}
```
В файле JavaScript или TypeScript создайте функцию для загрузки библиотеки maps и инициализации карты. Укажите координаты широты и долготы для center , а также уровень масштабирования для zoom . При необходимости добавьте идентификатор карты, используя свойство mapId . Поскольку карта по умолчанию будет растровой, запросите векторную карту, указав параметр "VECTOR"; векторный тип карты рекомендуется для наилучшего пользовательского опыта, поскольку он обеспечивает улучшенную визуальную точность, а также возможность управления наклоном и направлением на карте.
} } Машинопись
```
let map: google.maps.Map; async function initMap(): Promise<void> { // Import the needed libraries const { Map, RenderingType } = (await google.maps.importLibrary( 'maps' )) as google.maps.MapsLibrary; // Create a new map from the div with id="map". map = new Map(document.getElementById('map') as HTMLElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 8, renderingType: "VECTOR", }); >initMap();index.ts
```
Примечание: Ознакомьтесь с руководством по использованию TypeScript и Google Maps.
JavaScript
```
let map; async function initMap() { // Import the needed libraries const { Map, RenderingType } = (await google.maps.importLibrary('maps')); // Create a new map from the div with id="map". map = new Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, renderingType: "VECTOR", }); >initMap();index.js
```

См. полный пример исходного кода.

Машинопись

let map: google.maps.Map;
async function initMap(): Promise<void> {
    // Import the needed libraries
    const { Map, RenderingType } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: "VECTOR",
    });
}

initMap();index.ts

JavaScript

let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (await google.maps.importLibrary('maps'));
    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: "VECTOR",
    });
}
initMap();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>

<head>
    <title>Simple Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>

    <!-- prettier-ignore -->
    <script>(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })
            ({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
    </body>
</head>

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

</html>index.html

Попробуйте образец

JSFiddle.net

Задавать и получать свойства экземпляра карты

Для взаимодействия с экземпляром карты выберите содержащий его элемент. Код для этого будет различаться в зависимости от того, использовали ли вы элемент gmp-map или элемент div .

Получите экземпляр карты из элемента `gmp-map`

Чтобы получить экземпляр карты при использовании элемента gmp-map , используйте document.querySelector для получения экземпляра mapElement , как показано здесь.

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

Затем задайте свойства экземпляра mapElement :

mapElement.zoom = 8;

Внутри класса MapElement используется класс Map ; доступ к классу Map осуществляется с помощью свойства MapElement.innerMap , как показано здесь:

mapElement.innerMap.setOptions({
    mapTypeControl: false,
});

Получить экземпляр карты из элемента `div`

При использовании элемента div получите экземпляр карты и задайте параметры во время инициализации:

map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    mapTypeControl: false,
});

После инициализации установите параметры экземпляра map , как показано здесь:

map.setOptions({
    zoom: 8,
});

Как добавить карту Google на веб-страницу Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Обзор

Добавьте карту, используя элемент gmp-map

Полный пример кода

Машинопись

JavaScript

CSS

HTML

Попробуйте образец

Добавьте карту, используя элемент div ` и JavaScript.

} } Машинопись

JavaScript

См. полный пример исходного кода.

Машинопись

JavaScript

CSS

HTML

Попробуйте образец

Задавать и получать свойства экземпляра карты

Получите экземпляр карты из элемента gmp-map

Получить экземпляр карты из элемента div

Как добавить карту Google на веб-страницу

Добавьте карту, используя элемент `gmp-map`

Добавьте карту, используя элемент `div` ` и JavaScript.

Получите экземпляр карты из элемента `gmp-map`

Получить экземпляр карты из элемента `div`