Haritaya işaretçi ekleme

Platform seçin: Android iOS JavaScript

Haritada tek konumları göstermek için işaretçileri kullanın. Bu sayfada, bir haritaya programatik olarak ve özel HTML öğeleri kullanarak işaretçi ekleme işlemi gösterilmektedir.

Gelişmiş işaretçi kitaplığını yükleme

Haritaya gelişmiş işaretçi eklemek için harita kodunuzun marker ve PinElement sınıflarını sağlayan marker kitaplığını yüklemesi gerekir.AdvancedMarkerElement Bu durum, uygulamanızın işaretçileri programatik olarak veya HTML kullanarak yüklemesine bağlı değildir. Bunun için uygulamanızın önce Maps JavaScript API'yi yüklemesi gerekir.

Kitaplıkları yüklemek için kullandığınız yöntem, web sayfanızın Maps JavaScript API'yi nasıl yüklediğine bağlıdır.

  • Web sayfanızda dinamik komut dosyası yükleme kullanılıyorsa işaretçi kitaplığını ekleyin ve AdvancedMarkerElement (isteğe bağlı olarak PinElement) öğesini çalışma zamanında içe aktarın.

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • Web sayfanızda doğrudan komut dosyası yükleme etiketi kullanılıyorsa yükleme komut dosyasına aşağıdaki snippet'te gösterildiği gibi libraries=marker ekleyin. Bu işlem, hem AdvancedMarkerElement hem de PinElement öğesinin içe aktarılmasına neden olur.

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

Harita kimliği ayarlama

Gelişmiş işaretçileri kullanmak için harita kimliği gerekir (DEMO_MAP_ID kullanılabilir). Harita seçeneklerinde bir harita kimliği ayarlayın.

const map = new Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 37.4239163, lng: -122.0947209 },
    zoom: 14,
    mapId: 'DEMO_MAP_ID',
});

Web bileşenleri kullanıyorsanız harita kimliğini doğrudan gmp-map öğesinde ayarlayabilirsiniz:

<gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="DEMO_MAP_ID"></gmp-map>

Harita kimlikleri hakkında daha fazla bilgi edinin.

Özel HTML öğelerini kullanarak işaretçi ekleme

Özel HTML öğelerini kullanarak gelişmiş bir işaretçi eklemek için gmp-map öğesine bir gmp-advanced-marker alt öğesi ekleyin. Aşağıdaki snippet'te, bir web sayfasına işaretçi ekleme işlemi gösterilmektedir:

<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

Tam örnek kaynak kodunu görüntüleme

Bu örnekte, HTML kullanarak işaretçiler içeren bir harita oluşturma işlemi gösterilmektedir.

TypeScript

// This example adds a map with markers, using web components.
async function initMap() {
    console.log('Maps JavaScript API loaded.');
}
initMap();
index.ts

JavaScript

// This example adds a map with markers, using web components.
async function initMap() {
    console.log('Maps JavaScript API loaded.');
}
initMap();
index.js

CSS

/* Note: This CSS file is intentionally blank. */
style.css

HTML

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly&internal_usage_attribution_ids=gmp_git_jsapisamples_v1_web-components"
            defer></script>
    </head>
    <body>
        <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>
    </body>
</html>
index.html

Örneği deneyin

Programatik olarak işaretçi ekleme

Bir haritaya programatik olarak gelişmiş işaretçi eklemek için yeni bir AdvancedMarkerElement oluşturun ve bu örnekte gösterildiği gibi haritaya ekleyin:

TypeScript

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

async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        'marker'
    )) as google.maps.MarkerLibrary;

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
index.js

Öğeleri ekleme işlemi yalnızca web bileşenleri kullanılırken mümkündür. Haritayı yüklemek için div öğesi kullanılıyorsa işaretçiyi harita örneğiyle ilişkilendirmek için map özelliğini burada gösterildiği gibi kullanın:

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

const marker = new AdvancedMarkerElement({
    map: myMap,
    position: { lat: -34.397, lng: 150.644 },
});

İşaretçiyi kaldırma

Haritadan bir işaretçi kaldırmak için marker.map veya marker.position değerini null olarak ayarlayın.

// Set the map to null.
marker.map = null;

// Set the position to null.
marker.position = null;

Tam örnek kaynak kodunu görüntüleme

Bu örnekte, haritaya nasıl işaretçi ekleneceği gösterilmektedir.

TypeScript

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

async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        'marker'
    )) as google.maps.MarkerLibrary;

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
initMap();
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>Default Advanced Marker</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="37.4239163,-122.0947209"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html

Örneği deneyin

Sonraki adımlar