Programınıza bir işaretleyici eklemek çok kolaydır. Sadece bu kodu ekleyebilirsiniz:
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
Aşağıdaki alanlar özellikle önemlidir ve bir işaretleyici oluştururken yaygın olarak ayarlanır:
position(zorunlu), işaretçinin başlangıç konumunu tanımlayan bir LatLng belirtir. LatLng almanın bir yolu, Geocoding hizmetini kullanmaktır .map(isteğe bağlı), işaretçinin yerleştirileceği Haritayı belirtir. İşaretçinin yapımında bir harita belirtmezseniz, işaretçi oluşturulur ancak haritaya eklenmez (veya haritada gösterilmez). İşaretçiyi daha sonra işaretleyiciyi arayarak ekleyebilirsiniz.setMap() yöntemini .
Not örnekte, başlık alanı bir araç ipucu olarak görünecektir işaretin başlığını ayarlayın.
Google api dokümantasyonuna buradan başvurabilirsiniz. .
Bu, haritada bir işaretleyici ayarlamak için eksiksiz bir örnektir . Dikkatli olun YOUR_API_KEY, google API anahtarınızla değiştirmeniz gerekir :
<!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>
Şimdi, bir dizinin işaretlerini bir haritaya çizmek istiyorsanız, bunu yapmanız gerekir:
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]
});
}
}
Bu örnek bana şu sonucu verir:
Ayrıca, raptiyenize bir infoWindow ekleyebilirsiniz. Sadece bu koda ihtiyacınız var:
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'ın infoWindows hakkındaki dokümanlarına buradan ulaşabilirsiniz. .
Şimdi, marker "clik" olduğunda infoWindow'u açabiliyoruz:
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.
});
Burada hakkında bazı belgelere sahip olabileceğinizi unutmayınListener Google geliştiricisinde .
Ve son olarak, kullanıcı üzerine tıklarsa infoWindow'u bir işaretleyiciye çizebiliriz. Bu tam kodum:
<!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>
Normalde şu sonucu almalısınız:
