Ringkasan
Tutorial ini mengajarkan cara mengubah ikon penanda lanjutan Google Maps untuk menggunakan gambar grafis kustom. Ada baiknya Anda mengetahui dasar-dasar pembuatan penanda saat menggunakan tutorial ini.
Peta contoh berikut menunjukkan penggunaan penanda yang disesuaikan untuk menunjukkan berbagai jenis lokasi.
Bagian berikut mencantumkan semua kode yang Anda perlukan untuk membuat peta dalam tutorial ini.
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>
<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>
Mencoba Contoh
Menyesuaikan penanda peta
Anda dapat mengubah ikon penanda merah default (
) menjadi gambar kustom pilihan Anda. Contoh berikut menunjukkan cara mengganti
ikon default dengan PNG kustom.
// 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",
});
Lihat lebih banyak cara untuk membuat penanda dengan grafik.
Menyesuaikan penanda menurut fitur peta
Setiap lokasi menarik dalam daftar fitur kampus memiliki atribut type. Perhatikan cara ekstrak kode di bawah menentukan jenis parking, library,
dan info. Anda dapat menyesuaikan ikon penanda bergantung pada fitur peta type yang ditetapkan.
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]);