Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

Базовая настройка маркера

Выберите платформу: Android iOS JavaScript

Посмотреть полный пример исходного кода

В этом примере показано, как настроить маркеры: добавить текст заголовка, изменить размер маркера, цвет фона, цвет границы, цвет глифа и скрыть глиф.

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement, PinElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    // Each PinElement is paired with a marker to demonstrate setting each parameter.

    // Default marker with title text (no PinElement).
    const markerWithText = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.03 },
        title: 'Title text for the marker at lat: 37.419, lng: -122.03',
    });
    mapElement.append(markerWithText);

    // Adjust the scale.
    const pinScaled = new PinElement({
        scale: 1.5,
    });
    const markerScaled = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.02 },
    });
    markerScaled.append(pinScaled);
    mapElement.append(markerScaled);

    // Change the background color.
    const pinBackground = new PinElement({
        background: '#FBBC04',
    });
    const markerBackground = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.01 },
    });
    markerBackground.append(pinBackground);
    mapElement.append(markerBackground);

    // Change the border color.
    const pinBorder = new PinElement({
        borderColor: '#137333',
    });
    const markerBorder = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.035 },
    });
    markerBorder.append(pinBorder);
    mapElement.append(markerBorder);

    // Change the glyph color.
    const pinGlyph = new PinElement({
        glyphColor: 'white',
    });
    const markerGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.025 },
    });
    markerGlyph.append(pinGlyph);
    mapElement.append(markerGlyph);

    const pinTextGlyph = new PinElement({
        glyphText: 'T',
        glyphColor: 'white',
    });
    const markerGlyphText = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.015 },
    });
    markerGlyphText.append(pinTextGlyph);
    mapElement.append(markerGlyphText);

    // Hide the glyph.
    const pinNoGlyph = new PinElement({
        glyphText: '',
    });
    const markerNoGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.005 },
    });
    markerNoGlyph.append(pinNoGlyph);
    mapElement.append(markerNoGlyph);
}

void init();index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement, PinElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    // Each PinElement is paired with a marker to demonstrate setting each parameter.

    // Default marker with title text (no PinElement).
    const markerWithText = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.03 },
        title: 'Title text for the marker at lat: 37.419, lng: -122.03',
    });
    mapElement.append(markerWithText);

    // Adjust the scale.
    const pinScaled = new PinElement({
        scale: 1.5,
    });
    const markerScaled = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.02 },
    });
    markerScaled.append(pinScaled);
    mapElement.append(markerScaled);

    // Change the background color.
    const pinBackground = new PinElement({
        background: '#FBBC04',
    });
    const markerBackground = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.01 },
    });
    markerBackground.append(pinBackground);
    mapElement.append(markerBackground);

    // Change the border color.
    const pinBorder = new PinElement({
        borderColor: '#137333',
    });
    const markerBorder = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.035 },
    });
    markerBorder.append(pinBorder);
    mapElement.append(markerBorder);

    // Change the glyph color.
    const pinGlyph = new PinElement({
        glyphColor: 'white',
    });
    const markerGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.025 },
    });
    markerGlyph.append(pinGlyph);
    mapElement.append(markerGlyph);

    const pinTextGlyph = new PinElement({
        glyphText: 'T',
        glyphColor: 'white',
    });
    const markerGlyphText = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.015 },
    });
    markerGlyphText.append(pinTextGlyph);
    mapElement.append(markerGlyphText);

    // Hide the glyph.
    const pinNoGlyph = new PinElement({
        glyphText: '',
    });
    const markerNoGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.005 },
    });
    markerNoGlyph.append(pinNoGlyph);
    mapElement.append(markerNoGlyph);
}

void init();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-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>Advanced Marker Basic Customization</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="37.419,-122.02"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>index.html

В этой статье рассказывается, как выполнить следующие действия:

Как добавить название
Как масштабировать маркер
Как изменить цвет фона
Как изменить цвет контура
Как изменить цвет глифа
Как использовать текст в глифе
Как скрыть глиф

**Рисунок 1.** Элементы расширенного маркера.

В расширенных маркерах используется два класса для определения маркеров: AdvancedMarkerElement обеспечивает основные параметры (position, title и map), а PinElement содержит параметры для дальнейшей настройки.

Чтобы добавить маркеры на карту, сначала нужно загрузить библиотеку marker, которая предоставляет классы AdvancedMarkerElement и PinElement.

В следующем фрагменте кода показано, как создать новый экземпляр PinElement и применить его к маркеру.

// Create a pin element.
const myPin = new PinElement({
    scale: 1.5,
});
// Create a marker.
const myMarker = new AdvancedMarkerElement({
    position: { lat: 37.4239163, lng: -122.0947209 },
});
// Append the pin to the marker.
myMarker.append(myPin);
// Append the marker to the map.
mapElement.append(myMarker);

На картах, созданных с помощью пользовательских элементов HTML, основные параметры маркера объявляются с помощью элемента HTML gmp-advanced-marker. Любые настройки, в которых используется класс PinElement, должны применяться программно. Для этого ваш код должен извлечь элементы gmp-advanced-marker из HTML-страницы. В приведенном ниже фрагменте кода показано, как запросить коллекцию элементов gmp-advanced-marker, а затем перебрать результаты, чтобы применить настройки, объявленные в PinElement.

// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];

// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  marker.append(pin);
}

Как добавить название

Название отображается при наведении указателя мыши на маркер. Оно распознается программами чтения с экрана.

Чтобы добавить название программным способом, используйте атрибут AdvancedMarkerElement.title:

// Default marker with title text (no PinElement).
const markerWithText = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.03 },
    title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
mapElement.append(markerWithText);index.js

Чтобы добавить название для маркера, созданного с помощью собственных элементов HTML, используйте атрибут title, как показано ниже.

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>index.html

Как масштабировать маркер

Чтобы масштабировать маркер, используйте атрибут scale.

TypeScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerScaled = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerScaled.append(pinScaled);
mapElement.append(markerScaled);index.ts

JavaScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerScaled = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerScaled.append(pinScaled);
mapElement.append(markerScaled);index.js

Как изменить цвет фона

Чтобы изменить цвет фона маркера, используйте атрибут PinElement.background.

TypeScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerBackground = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerBackground.append(pinBackground);
mapElement.append(markerBackground);index.ts

JavaScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerBackground = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerBackground.append(pinBackground);
mapElement.append(markerBackground);index.js

Как изменить цвет контура

Чтобы изменить цвет контура маркера, используйте атрибут PinElement.borderColor.

TypeScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerBorder = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerBorder.append(pinBorder);
mapElement.append(markerBorder);index.ts

JavaScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerBorder = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerBorder.append(pinBorder);
mapElement.append(markerBorder);index.js

Как изменить цвет глифа

Чтобы изменить цвет глифа маркера, используйте атрибут PinElement.glyphColor.

TypeScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerGlyph.append(pinGlyph);
mapElement.append(markerGlyph);index.ts

JavaScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerGlyph.append(pinGlyph);
mapElement.append(markerGlyph);index.js

Как использовать текст в глифе

Чтобы заменить глиф по умолчанию на текстовый символ, используйте атрибут PinElement.glyphText. Текстовый глиф PinElement масштабируется вместе с PinElement, а его цвет по умолчанию совпадает с цветом glyphColor по умолчанию для PinElement.

TypeScript

const pinTextGlyph = new PinElement({
    glyphText: 'T',
    glyphColor: 'white',
});
const markerGlyphText = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.015 },
});
markerGlyphText.append(pinTextGlyph);
mapElement.append(markerGlyphText);index.ts

JavaScript

const pinTextGlyph = new PinElement({
    glyphText: 'T',
    glyphColor: 'white',
});
const markerGlyphText = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.015 },
});
markerGlyphText.append(pinTextGlyph);
mapElement.append(markerGlyphText);index.js

Как скрыть глиф

Чтобы скрыть глиф маркера, укажите в качестве значения атрибута PinElement.glyphText пустую строку.

TypeScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyphText: '',
});
const markerNoGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.005 },
});
markerNoGlyph.append(pinNoGlyph);
mapElement.append(markerNoGlyph);index.ts

JavaScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyphText: '',
});
const markerNoGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.005 },
});
markerNoGlyph.append(pinNoGlyph);
mapElement.append(markerNoGlyph);index.js

Или вы можете назначить для PinElement.glyphColor то же значение, что и для PinElement.background. Глиф будет скрыт (не будет отображаться).

Дальнейшие действия

Узнайте, как создать маркер с собственным изображением.

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

Посмотреть полный пример исходного кода

TypeScript

JavaScript

CSS

HTML

Как добавить название

Как масштабировать маркер

TypeScript

JavaScript

Как изменить цвет фона

TypeScript

JavaScript

Как изменить цвет контура

TypeScript

JavaScript

Как изменить цвет глифа

TypeScript

JavaScript

Как использовать текст в глифе

TypeScript

JavaScript

Как скрыть глиф

TypeScript

JavaScript

Дальнейшие действия

Базовая настройка маркера