আপনার প্রোগ্রামে একটি চিহ্নিতকারী যুক্ত করুন খুব সহজ। আপনি কেবল এই কোডটি যুক্ত করতে পারেন:
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
আপনি যখন কোনও মার্কার তৈরি করেন নিম্নলিখিত ক্ষেত্রগুলি বিশেষত গুরুত্বপূর্ণ এবং সাধারণত সেট থাকে:
position(প্রয়োজনীয়) চিহ্নিতকারীর প্রাথমিক অবস্থান চিহ্নিত করে একটি ল্যাটল্যাং নির্দিষ্ট করে। একটি অক্ষাংশ দ্রাঘিমাংশ পুনরুদ্ধারের এর ওয়ান ওয়ে ব্যবহার করা Geocoding সেবা ।map(alচ্ছিক) চিহ্নিতকরণের জন্য মানচিত্র নির্দিষ্ট করে। আপনি যদি মার্কার নির্মাণে কোনও মানচিত্র নির্দিষ্ট না করেন তবে চিহ্নিতকারী তৈরি হয় তবে মানচিত্রে সংযুক্ত না হয় (বা প্রদর্শিত হয়)। আপনি পরে চিহ্নিতকারীটির setMap()পদ্ধতিতে কল করে চিহ্নিতকারী যুক্ত করতে পারেন ।
দ্রষ্টব্য , উদাহরণস্বরূপ, শিরোনাম ক্ষেত্রটি চিহ্নিতকারীটির শিরোনাম সেট করে যা একটি সরঞ্জামদণ্ড হিসাবে উপস্থিত হবে।
আপনি গুগল এপিআই ডকুমেন্টেশন এখানে পরামর্শ করতে পারেন ।
এই সেট করার জন্য একটি সম্পূর্ণ উদাহরণ এক একটি মানচিত্রে চিহ্নিতকারী। যত্নবান হোন, আপনাকে YOUR_API_KEYআপনার গুগল এপিআই কী দ্বারা প্রতিস্থাপন করতে হবে :
<!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]
});
}
}
এই উদাহরণটি আমাকে নিম্নলিখিত ফলাফল দেয়:
আপনি আপনার পিনে একটি তথ্য উইন্ডো যুক্ত করতে পারেন। আপনার কেবল এই কোডটি দরকার:
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!'
});
আপনার এখানে তথ্য উইন্ডো সম্পর্কে গুগলের ডকুমেন্টেশন থাকতে পারে ।
যখন মার্কারটি "ক্লিপ" এর মতো হয় তখন আমরা তথ্যবাইন্ডোটি খুলতে পারি:
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 এখানে গুগল বিকাশকারী সম্পর্কে কিছু ডকুমেন্টেশন থাকতে পারে ।
এবং, অবশেষে, আমরা যদি কোনও ব্যবহারকারী উইন্ডোতে ক্লিক করেন তবে আমরা একটি চিহ্নিতকারীতে একটি তথ্য উইন্ডো প্লট করতে পারি। এটি আমার সম্পূর্ণ কোড:
<!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>
সাধারণত, আপনার এই ফলাফলটি হওয়া উচিত:
