Tổng quan
Hướng dẫn này chỉ cho bạn cách thay đổi biểu tượng của điểm đánh dấu nâng cao trên Google Maps để sử dụng hình ảnh đồ hoạ tuỳ chỉnh. Bạn sẽ thấy những kiến thức cơ bản về cách tạo điểm đánh dấu khi sử dụng hướng dẫn này.
Bản đồ mẫu sau đây minh hoạ cách sử dụng các điểm đánh dấu tuỳ chỉnh để biểu thị nhiều loại vị trí.
Phần sau đây liệt kê tất cả mã mà bạn cần để tạo bản đồ trong hướng dẫn này.
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>
Thử mẫu
Tuỳ chỉnh điểm đánh dấu bản đồ
Bạn có thể thay đổi biểu tượng điểm đánh dấu màu đỏ mặc định (
) thành hình ảnh tuỳ chỉnh mà bạn chọn. Ví dụ sau cho biết cách thay thế biểu tượng mặc định bằng một tệp PNG tuỳ chỉnh.
// 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",
});
Xem nhiều cách khác để tạo điểm đánh dấu bằng đồ hoạ.
Tuỳ chỉnh điểm đánh dấu bằng các tính năng của bản đồ
Mỗi địa điểm yêu thích trong danh sách các đối tượng trong khuôn viên đều có một thuộc tính type. Hãy lưu ý cách đoạn mã trích xuất bên dưới chỉ định các loại parking, library và info. Bạn có thể tuỳ chỉnh biểu tượng điểm đánh dấu tuỳ thuộc vào đối tượng bản đồ type mà bạn đã đặt.
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]);