Genel Bakış
Bu eğiticide, gelişmiş bir Google Haritalar uygulamasının simgesini nasıl değiştireceğinizi özel grafik resim kullanmak için işaretçi. Projenin gidişatı boyunca işaretçi oluşturmayla ilgili temel bilgiler lütfen unutmayın.
Aşağıdaki örnek haritada, size yardımcı olabilir.
Aşağıdaki bölümde, haritayı Google Haritalar'da oluşturmak için inceleyebilirsiniz.
TypeScript
let map: google.maps.Map; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; map = new google.maps.Map(document.getElementById("map") as HTMLElement, { center: new google.maps.LatLng(-33.91722, 151.23064), zoom: 16, mapId: "DEMO_MAP_ID", }); const iconBase = "https://developers.google.com/maps/documentation/javascript/examples/full/images/"; const icons: Record<string, { icon: string }> = { parking: { icon: iconBase + "parking_lot_maps.png", }, library: { icon: iconBase + "library_maps.png", }, info: { icon: iconBase + "info-i_maps.png", }, }; const features = [ { position: new google.maps.LatLng(-33.91721, 151.2263), type: "info", }, { position: new google.maps.LatLng(-33.91539, 151.2282), type: "info", }, { position: new google.maps.LatLng(-33.91747, 151.22912), type: "info", }, { position: new google.maps.LatLng(-33.9191, 151.22907), type: "info", }, { position: new google.maps.LatLng(-33.91725, 151.23011), type: "info", }, { position: new google.maps.LatLng(-33.91872, 151.23089), type: "info", }, { position: new google.maps.LatLng(-33.91784, 151.23094), type: "info", }, { position: new google.maps.LatLng(-33.91682, 151.23149), type: "info", }, { position: new google.maps.LatLng(-33.9179, 151.23463), type: "info", }, { position: new google.maps.LatLng(-33.91666, 151.23468), type: "info", }, { position: new google.maps.LatLng(-33.916988, 151.23364), type: "info", }, { position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775), type: "parking", }, { position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496), type: "parking", }, { position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587), type: "parking", }, { position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267), type: "parking", }, { position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644), type: "parking", }, { position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569), type: "parking", }, { position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781), type: "parking", }, { position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578), type: "library", }, ]; for (let i = 0; i < features.length; i++) { const iconImage = document.createElement("img"); iconImage.src = icons[features[i].type].icon; const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: features[i].position, content: iconImage, }) } } initMap();.
JavaScript
let map; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary( "marker", ); map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(-33.91722, 151.23064), zoom: 16, mapId: "DEMO_MAP_ID", }); const iconBase = "https://developers.google.com/maps/documentation/javascript/examples/full/images/"; const icons = { parking: { icon: iconBase + "parking_lot_maps.png", }, library: { icon: iconBase + "library_maps.png", }, info: { icon: iconBase + "info-i_maps.png", }, }; const features = [ { position: new google.maps.LatLng(-33.91721, 151.2263), type: "info", }, { position: new google.maps.LatLng(-33.91539, 151.2282), type: "info", }, { position: new google.maps.LatLng(-33.91747, 151.22912), type: "info", }, { position: new google.maps.LatLng(-33.9191, 151.22907), type: "info", }, { position: new google.maps.LatLng(-33.91725, 151.23011), type: "info", }, { position: new google.maps.LatLng(-33.91872, 151.23089), type: "info", }, { position: new google.maps.LatLng(-33.91784, 151.23094), type: "info", }, { position: new google.maps.LatLng(-33.91682, 151.23149), type: "info", }, { position: new google.maps.LatLng(-33.9179, 151.23463), type: "info", }, { position: new google.maps.LatLng(-33.91666, 151.23468), type: "info", }, { position: new google.maps.LatLng(-33.916988, 151.23364), type: "info", }, { position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775), type: "parking", }, { position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496), type: "parking", }, { position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587), type: "parking", }, { position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267), type: "parking", }, { position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644), type: "parking", }, { position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569), type: "parking", }, { position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781), type: "parking", }, { position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578), type: "library", }, ]; for (let i = 0; i < features.length; i++) { const iconImage = document.createElement("img"); iconImage.src = icons[features[i].type].icon; const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: features[i].position, content: iconImage, }); } } 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>Custom Markers</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
Harita işaretleyiciyi özelleştirme
Varsayılan kırmızı işaretçi simgesini () değiştirebilirsiniz seçtiğiniz özel bir resme ekleyebilirsiniz. Aşağıdaki örnekte, varsayılan simgedir.
// A marker with a with a URL pointing to a PNG. const beachFlagImg = document.createElement("img"); beachFlagImg.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"; const beachFlagMarkerView = new AdvancedMarkerElement({ map, position: { lat: 37.434, lng: -122.082 }, content: beachFlagImg, title: "A marker using a custom PNG Image", });
Grafiklerle işaretçi oluşturmanın diğer yollarını öğrenin.
İşaretçileri harita özelliklerine göre özelleştirme
Kampüs özellikleri listesindeki her önemli noktanın bir type
öğesi vardır
özelliğini gönderin. Aşağıdaki kod ayıklama işleminin parking
, library
parametresini nasıl belirttiğine dikkat edin
ve info
tür. İşaretçi simgesini haritaya bağlı olarak özelleştirebilirsiniz
type
özelliğini ayarlayabilirsiniz.
const iconBase = "https://developers.google.com/maps/documentation/javascript/examples/full/images/"; const icons: Record<string, { icon: string }> = { parking: { icon: iconBase + "parking_lot_maps.png", }, library: { icon: iconBase + "library_maps.png", }, info: { icon: iconBase + "info-i_maps.png", }, }; function addMarker(feature) { const iconImage = document.createElement("img"); iconImage.src = icons[feature.type].icon; const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: feature.position, content: iconImage, }) } addMarker(features[0]);