Harita üzerinde tek tek konumları görüntülemek için işaretçileri kullanın. Bu sayfada, programlı bir şekilde ve HTML kullanarak haritaya nasıl işaretçi ekleneceği gösterilmektedir.
Gelişmiş işaretçi kitaplığını yükle
Bir haritaya gelişmiş işaretçi eklemek için harita kodunuzun
marker
kitaplığını yüklemesi gerekir. Bu, uygulamanız işaretçileri programatik olarak
veya HTML kullanarak yüklemesinden bağımsız olarak geçerlidir. Bunu yapmak için öncelikle uygulamanızın Haritalar JavaScript API'sini yüklemesi gerekir.
Kitaplıkları yüklemek için kullanacağı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çiler kitaplığını ekleyin ve çalışma zamanında burada gösterildiği gibi
AdvancedMarkerElement
(ve isteğe bağlı olarakPinElement
) öğesini içe aktarın.const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
Web sayfanızda doğrudan komut dosyası yükleme etiketi kullanılıyorsa
libraries=marker
öğesini aşağıdaki snippet'te gösterildiği gibi yükleme komut dosyasına ekleyin.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker" defer ></script>
dev
HTML (beta) kullanarak işaretçi ekleme
HTML kullanarak gelişmiş bir işaretçi eklemek için gmp-map
öğesine 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="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> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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 callback 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&callback=initMap&libraries=marker&v=beta" defer ></script> </body> </html>
Örneği Deneyin
Programlı olarak işaretçi ekleme
Bir haritaya programlı olarak gelişmiş işaretçi eklemek için, aşağıdaki örnekte gösterildiği gibi, LatLng
veya LatLngAltitude
ileten yeni bir AdvancedMarkerElement
ve temel harita referansı oluşturun:
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> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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
ayarlarını
null
olarak ayarlayın.