الحصول على مفتاح Maps Demo Key: يمكنك تجربة ميزات محدّدة من Maps JavaScript API و"حزمة أدوات خرائط Google الجاهزة للأماكن" بدون أي تكلفة باستخدام مفتاح Maps Demo Key، وبدون الحاجة إلى إدخال معلومات الفوترة.

تستخدم 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

توضّح لك هذه الصفحة كيفية تخصيص العلامات بالطرق التالية:

إضافة نص العنوان
تغيير حجم العلامة
تغيير لون الخلفية
تغيير لون الحدود
تغيير لون الرمز
استخدام نص في رمز
إخفاء الرمز

تستخدم العلامات المتقدّمة فئتَين لتحديد العلامات: توفّر الفئة 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

الخطوات التالية:

تخصيص محدّد الموقع الأساسي