Harita üzerinde tek tek konumları görüntülemek için işaretçileri kullanın. Bu sayfada, bir haritaya programlı olarak ve HTML kullanılarak nasıl işaretçi ekleneceği gösterilmektedir.
Gelişmiş işaretçi kitaplığını yükleme
Bir haritaya gelişmiş işaretçi ekleyebilmek için harita kodunuz
marker
kitaplığı. Bu, uygulamanızın işaretçileri programatik olarak mı yoksa HTML kullanarak mı yüklediğine bakılmaksızın geçerlidir. Bunun için önce uygulamanız
Haritalar JavaScript API'yi yükleyin.
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 çalışma zamanında
AdvancedMarkerElement
(ve isteğe bağlı olarakPinElement
) verilerini içe aktarabilirsiniz. burada gösterilir.const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
Web sayfanızda doğrudan komut dosyası yükleme etiketi kullanılıyorsa aşağıdaki snippet'te gösterildiği gibi yükleme komut dosyasına
libraries=marker
ekleyin. dev<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker" defer ></script>
HTML'yi kullanarak işaretçi ekleme (beta)
HTML kullanarak gelişmiş bir işaretçi eklemek için bir gmp-advanced-marker
ekleyin
gmp-map
öğesine alt öğe eklemeniz gerekir. Aşağıdaki snippet'te, bir web sayfasına işaretçi ekleme gösterilmektedir:
<gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map>
Tam örnek kod
TypeScript
// This example adds a map with markers, using web components. async function initMap(): Promise<void> { console.log('Maps JavaScript API loaded.'); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds a map with markers, using web components. async function initMap() { console.log("Maps JavaScript API loaded."); } window.initMap = initMap;
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; } gmp-map { height: 400px; }
HTML
<html> <head> <title>Add a Map with Markers using HTML</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta" defer ></script> </body> </html>
Örneği Deneyin
İşaretçiyi programatik olarak ekleme
Bir haritaya programlı olarak gelişmiş bir işaretçi eklemek için yeni bir
AdvancedMarkerElement
(bir LatLng
veya LatLngAltitude
) ve bir
aşağıdaki örnekte gösterildiği gibi temel haritaya referans verir:
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.4239163, lng: -122.0947209 },
});
Tam örnek kod
TypeScript
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 map = new Map(document.getElementById('map') as HTMLElement, { center: { lat: 37.4239163, lng: -122.0947209 }, zoom: 14, mapId: '4504f8b37365c3d0', }); const marker = new AdvancedMarkerElement({ map, position: { lat: 37.4239163, lng: -122.0947209 }, }); } initMap();
JavaScript
async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); const map = new Map(document.getElementById("map"), { center: { lat: 37.4239163, lng: -122.0947209 }, zoom: 14, mapId: "4504f8b37365c3d0", }); const marker = new AdvancedMarkerElement({ map, position: { lat: 37.4239163, lng: -122.0947209 }, }); } initMap();
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; }
HTML
<html> <head> <title>Default Advanced Marker</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
Örneği Deneyin
Bir işaretçiyi haritadan kaldırmak için markerView.map
veya position
değerini null
olarak ayarlayın.