เพิ่มเครื่องหมายในโปรแกรมของคุณเป็นเรื่องง่ายมาก คุณอาจเพิ่มรหัสนี้:
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
ฟิลด์ต่อไปนี้มีความสำคัญอย่างยิ่งและตั้งค่าทั่วไปเมื่อคุณสร้างเครื่องหมาย:
position(จำเป็น) ระบุ LatLng เพื่อระบุตำแหน่งเริ่มต้นของเครื่องหมาย วิธีการหนึ่งของการเรียก LatLng การคือการใช้บริการระบุพิกัดทางภูมิศาสตร์map(ไม่บังคับ) ระบุแผนที่ที่จะวางเครื่องหมาย หากคุณไม่ได้ระบุแผนที่ในการสร้างเครื่องหมายเครื่องหมายจะถูกสร้างขึ้น แต่ไม่ได้แนบกับ (หรือแสดงบน) แผนที่ คุณสามารถเพิ่มเครื่องหมายในภายหลังโดยเรียกsetMap()วิธีการของเครื่องหมาย
หมายเหตุในตัวอย่างฟิลด์หัวเรื่องตั้งชื่อของเครื่องหมายที่จะปรากฏเป็นคำแนะนำเครื่องมือ
คุณอาจจะปรึกษา Documenation API ของ Google ที่นี่
นี่เป็นตัวอย่างที่สมบูรณ์ในการตั้งเครื่องหมายหนึ่งอันในแผนที่ ระวังให้ดีคุณต้องแทนที่YOUR_API_KEYด้วยคีย์ Google APIของคุณ:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
ตอนนี้ถ้าคุณต้องการพล็อตเครื่องหมายของอาร์เรย์ในแผนที่คุณควรทำดังนี้:
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function initMap() {
var myLatLng = {lat: -33.90, lng: 151.16};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: myLatLng
});
var count;
for (count = 0; count < locations.length; count++) {
new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map,
title: locations[count][0]
});
}
}
ตัวอย่างนี้ให้ผลลัพธ์ต่อไปนี้แก่ฉัน:
คุณสามารถเพิ่ม infoWindow ในพินของคุณได้เช่นกัน คุณต้องใช้รหัสนี้:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});
marker.info = new google.maps.InfoWindow({
content: 'Hello World!'
});
คุณสามารถมีเอกสารของ Google เกี่ยวกับหน้าต่างข้อมูลที่นี่
ตอนนี้เราสามารถเปิดหน้าต่างข้อมูลได้เมื่อตัวทำเครื่องหมายเป็น "clik" ดังนี้:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});
marker.info = new google.maps.InfoWindow({
content: locations [count][0]
});
google.maps.event.addListener(marker, 'click', function() {
// this = marker
var marker_map = this.getMap();
this.info.open(marker_map, this);
// Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
});
หมายเหตุคุณสามารถมีเอกสารบางอย่างเกี่ยวกับListener ที่นี่ใน Google Developer
และในที่สุดเราสามารถลงจุดข้อมูล windows ในเครื่องหมายถ้าผู้ใช้คลิกที่มัน นี่คือรหัสที่สมบูรณ์ของฉัน:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
// When the user clicks the marker, an info window opens.
function initMap() {
var myLatLng = {lat: -33.90, lng: 151.16};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: myLatLng
});
var count=0;
for (count = 0; count < locations.length; count++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});
marker.info = new google.maps.InfoWindow({
content: locations [count][0]
});
google.maps.event.addListener(marker, 'click', function() {
// this = marker
var marker_map = this.getMap();
this.info.open(marker_map, this);
// Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
โดยปกติคุณควรมีผลลัพธ์นี้:
